Hexo博客主题pure修改记录

标签: hexo  next  博客主题  个人博客

主题效果

效果如图:
mark

具体可到我的主页查看。

配置文件说明

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为主题配置文件

启用pure主题

安装主题

git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

打开站点配置文件,找到theme字段,将其值更改为 pure。

theme: next

更新主题

cd themes/pure
git pull

到此,主题安装完成。然后启动Hexo服务验证主题是否正确启用。

hexo s

使用浏览器访问 http://localhost:4000 ,检查主题是否被启用。

主题设定

设置语言

打开站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,可选值对应themes\pure\languages目录下语言文件,简体中文配置如下:

language: zh-CN

设置个人信息

头像在themes\pure\source\images 目录下替换图片即可,捐献的二维码同理。

个人信息大部分都在 主题配置文件 中设置

设置菜单

右边导航菜单在主题配置文件中配置

# 导航菜单
menu:
  Home: . 
  Archives: archives # 归档
  Categories: categories # 分类
  Tags: tags # 标签
  Repository: repository # github repositories
  Books: books     # 书单
  Links: links # 友链
  About: about # 关于

# 导航菜单图标(font awesome)
menu_icons:
  enable: true # 是否启用菜单图标
  home: fa-dashboard
  archives: fa-delicious
  categories: fa-folder
  tags: fa-tags
  repository: fa-code
  books: fa-leanpub
  links: fa-gg
  about: fa-coffee

添加背景动画

背景动画基于canvas,在\themes\pure\layout\layout.ejs的中面添加

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

站点建立时间

这个时间将在站点的底部显示,例如 © 2017。 编辑 主题配置文件,新增字段 since

配置示例:

since: 2017

添加404公益页面

GitHub Pages有提供制作404页面的指引:Custom 404 Pages

但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

使用方法:新建 404.html 页面,放到主题的 source 目录下,内容如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

阅读次数统计

本来想用leancloud来统计,因为不蒜子不能管理相关博文的阅读量,但是配置完leancloud会报错~..~只能选用不蒜子,在主题配置文件 中把busuanzi设置为true即可:

pv:
  busuanzi:
    enable: true  # 不蒜子统计

常用插件及用法

hexo-admin

Github:https://github.com/jaredly/hexo-admin

简介:可以直接在网页端创建、编辑markdown文章内容,并将内容发布到_posts里。最方便的是可以很方便的给文章加标题、分类、打标签。

安装和使用:

安装这个插件需要升级npm,先升级

npm install -g npm

然后安装

npm install --save hexo-admin

配置:

站点配置文件 _config.yml中添加

admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something

这个配置可以直接在admin Settings > Setup authentification 页面中输入数据获取,secret是用于产生cookie值的。

hexo-douban

Github:https://github.com/mythsman/hexo-douban

简介:为博客添加豆瓣书单和豆瓣电影。(不支持分页,数据大网络差有可能出现超时错误)

安装:

npm install hexo-douban --save

配置:

站点配置文件 _config.yml中添加

douban:
  user: 豆瓣个性域名
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'

主题配置文件 中修改menu

menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page

hexo-wordcount

Github:https://github.com/willin/hexo-wordcount

简介:为文章添加文章字数统计、文章预计阅读时间

安装:

npm install hexo-wordcount --save

配置:

主题配置文件 中设置为true:

# wordcount
postCount:
  enable: true
  wordcount: true  # 文章字数统计
  min2read: true  # 阅读时长预计 

hexo-autonofollow

Github:https://github.com/liuzc/hexo-autonofollow

简介:自动为站外链接添加nofollow属性

安装:

npm install hexo-autonofollow --save

配置:

站点配置文件_config.yml中添加

nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com
  • enable - 是否启用
  • exclude - 排除域名

hexo-generator-feed

Github:https://github.com/hexojs/hexo-generator-feed

简介:RSS的生成插件,你可以在配置显示你站点的RSS,文件路径\atom.xml。

安装:

npm install hexo-generator-feed --save

配置:

站点配置文件_config.yml中添加

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  • type - Feed type. (atom/rss2)
  • path - Feed path. (Default: atom.xml/rss2.xml)
  • limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
  • hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it)
  • content - (optional) set to ‘true’ to include the contents of the entire post in the feed.

hexo-generator-sitemap

Github:https://github.com/hexojs/hexo-generator-sitemap

简介:生成博客的sitemap。

安装:

npm install hexo-generator-sitemap --save

配置:

站点配置文件_config.yml中添加

sitemap:
    path: sitemap.xml

hexo-generator-baidu-sitemap

Github:https://github.com/coneycode/hexo-generator-baidu-sitemap

简介:生成博客的sitemap(针对百度)。

安装:

install hexo-generator-baidu-sitemap --save

配置:

站点配置文件_config.yml中添加

baidusitemap:
path: baidusitemap.xml

hexo-generator-json-content

Github:https://github.com/alexbruno/hexo-generator-json-content

简介:用于生成静态站点数据,提供搜索功能的数据源。

安装:

npm install hexo-generator-json-content --save

配置:

站点配置文件_config.yml中添加

jsonContent:
  ignore:
    - path/to/a/page
    - url/to/one/post
    - an-entire-category
    - specific.file
    - .ext # a file extension

hexo-neat

Github:https://github.com/rozbo/hexo-neat

简介:自动压缩html、css、js代码

安装:

npm install hexo-neat --save

配置:

站点配置文件_config.yml中添加

neat_enable: true
neat_html:
  enable: ture
  exclude:
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

参考

http://theme-next.iissnan.com/getting-started.html

https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md

http://blog.cofess.com/2017/08/16/comon-plugins-and-usage-of-hexo-blog.html

版权声明:本文为a945372160原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a945372160/article/details/78806700

智能推荐

HTML 表单元素的基本样式

HTML 表单元素的基本样式 原创 ixygj197875 发布于2018-02-22 17:48:53 阅读数 2296 收藏 更新于2018-05-20 15:35:58 分类专栏: 揭秘 CSS 揭秘 CSS 收起 表单元素主要包括 label、input、textarea、select、datalist、******、progress、meter、output等,以及对表单元素进行分组的 ...

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

猜你喜欢

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...

深入理解 JavaScript 代码执行机制

深入理解 JavaScript 代码执行机制 前言 本文仅为个人见解,如有错误的地方欢迎留言区探讨和指正。 1、餐前甜品 如下是一段 JavaScript 代码,如果你毫不犹豫的说出代码执行顺序。那么请直接滚动到底部,留下你的足迹,接受膜拜。如果还不是很确定,那么请往下继续查看。 2、磨刀不误砍柴工(了解浏览器原理) (1) 进程和线程 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小...