Hexo-Next6.7.0主题优化

 

Hexo-Next6.7.0主题优化

效果预览：Next6.7.0主题个人博客

一、下载next主题

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

二、使用next主题

• 在站点配置文件中配置使用next主题

theme: next

注意：所有配置文件内，每一项配置的冒号后面都要加上空格

三、next主题设定

• 在主题配置文件中配置所选主题

# next主题配置文件中配置选用的主题
# scheme: Muse
#scheme: Mist
# scheme: Pisces
 scheme: Gemini

四、设置语言

• 在站点配置文件中设置语言

language: zh-Hans     next5版本
language: zh-CN       next6版本

五、设置菜单

• 在主题配置文件中设置菜单

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

六、设置头像

• 在主题配置文件中设置头像
• 使用本地图片,把图片放入themes/next/source/images下,修改avatar01

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar01.jpg

七、设置作者昵称和站点描述

# Site
title: Chris
subtitle: 步履不停
description: how much you wanna risk

八、标签设置、分类设置

• hexo初始是没有标签目录的需要自己创建

$ cd you-site
$ hexo new page tags

• 创建完成后,打开you-site/source/tags的index.md,修改如下

---
title:  #页面主题
date: 2017-08-18 15:00:55 #当前创建文件时间
type: "tags" # 设置页面类型
---

• hexo初始是没有分类目录的需要自己创建

$ cd you-site
$ hexo new page categories

• 创建完成后,打开you-site/source/tags的index.md,修改如下

---
title:  #页面主题
date: 2017-08-18 15:00:55 #当前创建文件时间
type: "categoriess" # 设置页面类型
---

九、设置新建文章自动开启type、categories、copyright

• 设置your site/scaffolds/post.md文件

---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
---

十、侧边栏设置

• 打开主题配置文件,搜索关键字social`,然后添加社交站点名称与地址即可。

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  Weibo: https://weibo.com/your-user-name
  douban: https://douban.com/people/your-user-name
  zhihu: https://www.zhihu.com/people/your-user-name
  # 等等

• 打开主题配置文件文件,搜索关键字social_icons`，添加社交站点名称（注意大小写）图标，Font Awesome图标地址

social_icons:
  enable: true
  icons_only: false
  transition: false
  GitHub: github
  Twitter: twitter
  Weibo: weibo

十一、设置RSS订阅

• 在你Hexo 站点目录下

$ npm install hexo-generator-feed --save

• 打开站点配置文件,添加如下配置

plugin
- hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

十二、浏览页面的时候显示当前浏览进度

• 打开主题配置文件,搜索关键字scrollpercent,把false改为true`

  # Scroll percent label in b2t button
  scrollpercent: true

• 如果想把top按钮放在侧边栏,打开主题配置文件,搜索关键字b2t,把false改为true`

 # Back to top in sidebar
  b2t: true
  # Scroll percent label in b2t button
  scrollpercent: true

十三、代码块添加复制按钮

• hexo中next主题给内容页里的代码块新增**复制按钮

codeblock:
  copy_button:
    enable: true #增加复制按钮的开关
    show_result: true #点击复制完后是否显示 复制成功 结果提示

十四、添加顶部加载条

• 打开themes/next下的_config.yml，搜索关键字pace,设置为true,可以更换加载样式

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替换更换样式

十五、hexo修改文章底部的那个带#号的标签

• 修改模板 /themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

十六、取消动画

• 将motion下的enable参数设置为false即可关闭页面动画

motion:
  enable: false

十七、集成百度统计

• 登录 百度统计， 定位到站点的代码获取页面
• 复制 hm.js? 后面那串统计脚本 id
• 编辑 主题配置文件， 修改字段 baidu_analytics 字段，值设置成你的百度统计脚本 id。

# Baidu Analytics ID
baidu_analytics: xxxxxxxxxxxxxx

十八、设置不蒜子统计

• next6.0新增busuanzi阅读统计

busuanzi_count:
  enable: false  #设true 开启
  total_visitors: true  #总阅读人数 uv数
  total_visitors_icon: user  #阅读总人数的图标
  total_views: true  #总阅读次数 pv数
  total_views_icon: eye  #阅读总次数的图标
  post_views: true #开启内容阅读次数
##   post_views_icon: eye #内容页阅读数的图标

详见：不蒜子|不如

十九、设置每篇文章的阅读时长和字数

• 新增字数统计,阅读时长,先安装插件

$ npm install hexo-symbols-count-time --save

• 主题配置信息如下:

symbols_count_time:
  separated_meta: true  # false 会显示一行
  item_text_post: true  # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
  item_text_total: true #底部footer是否显示字数统计属性文字
  awl: 4 #计算字数的一个设置,没设置过
  wpm: 275 #一分钟阅读的字数

• 站点配置新增如下:

symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

二十、设置评论系统-Valine

• 点击官网leancloud注册账号,获取自己的appid,appkey,在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 ，添加域名

valine:
  enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # if false, comment count will only be displayed in post page, not in home page

二十一、设置标签和分类页取消评论功能

---
title:  #页面主题
date: 2017-08-18 15:00:55 #当前创建文件时间
type: "tags" # 设置页面类型
comments: false
---

二十二、 在文章底部增加版权信息

修改主题配置文件如下：

creative_commons:      #设置版权原创声明的地方
  license: by-nc
  sidebar: false
  post: true