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/tagsindex.md,修改如下
---
title:  #页面主题
date: 2017-08-18 15:00:55 #当前创建文件时间
type: "tags" # 设置页面类型
---
  • hexo初始是没有分类目录的需要自己创建
$ cd you-site
$ hexo new page categories
  • 创建完成后,打开you-site/source/tagsindex.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">#,将 # 换成

十六、取消动画

  • 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

你可能感兴趣的:(others)