Hexo | (二)Next主题个性化设置

2018/07/16 17:06
阅读数 31

NexT is a high quality elegant Hexo theme. It is crafted from scratch, with love.

Live Preview

Installation

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

区分配置文件:

配置文件 路径
站点配置文件 D:/blog/_config.yml
主题配置文件 D:/blog/themes/next/_config.yml

设置RSS

1.安装RSS插件

$ npm install hexo-generator-feed --save

2.编辑站点配置文件,添加以下内容:

#RSS订阅
plugin: 
- hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 0

3.编辑主题配置文件,将rss字段置空。

主题风格

#Scheme 主题风格
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

四个主题风格,自行选择,消去注释即生效。

设置菜单

menu:
  home: / || home                  # 主页
  tags: /tags/ || tags             # 标签
  categories: /categories/ || th   # 分类
  archives: /archives/ || archive  # 归档
  about: /about/ || user           # 关于我
# schedule: /schedule/ || calendar # 安排
# sitemap: /sitemap.xml || sitemap # 站点地图
# commonweal: /404/ || heartbeat   # 404公益

添加[标签]、[分类]、[关于]页面

只有文章(post)支持[标签]和[分类]。

1.添加[tags]、[categoies]、[about]页面:

$ hexo new page "tags"
$ hexo new page "categories"
$ hexo new page "about"

2.在source文件夹中找到新建页面: ①编辑tags.md:添加layout:"tags" ②编辑categories.md:添加layout:"categories" ③编辑about.md,自行发挥。

3.匹配站点配置文件

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories

4.匹配主题配置文件menu

menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about

5.Front-matter中的[tags]写法:

tags:
- tag_1
- tag_2
# 标签之间相互独立

6.Front-matter中的[categories]写法:

categories: 
- 运动
- [运动, 球类运动]
- [运动, 球类运动, 网球]
# 类别存在层级关系

添加自定义页面

1.添加自定义页面:

$ hexo new page "customPage"

2.匹配主题配置文件中的menu

menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about               
  customPage: /customPage    # 键值对匹配

3.在source中找到customPage.md文件,根据需求自行编辑。

##添加更新时间

编辑主题配置文件

post_meta:
  item_text: true
  created_at: true   # 创建时间
  updated_at: true   # 更新时间
  # Only show 'updated' if different from 'created'.
  updated_diff: false # 只使用更新时间
  # If true, post's time format will be hexo config's date_format + ' ' + time_format.
  date_time_merge: false
  categories: true

阅读全文

在文章合适的位置添加<!-- more -->,Hexo推荐使用。

设置favicon图标

1.将favicon.png放到themes\next\image文件夹下

2.主题配置文件更改图片路径:

favicon:
  small: /images/favicon-16x16.png         # 小图标:16x16
  medium: /images/favicon-32x32.png        # 大图标:32x32
  apple_touch_icon: /images/favicon.png    # apple图标大图
  safari_pinned_tab: /images/logo.svg

设置头像

1.将头像图片avatar.png放到themes\next\image文件夹下

2.主题配置文件更改图片路径:

avatar: /images/avatar.png  # avater图片路径

社交账号

编辑主题配置文件,自行添加:

social:
  GitHub: https://github.com/yourname || github-icon
  E-Mail: mailto:youremail || envelope-icon
  Weibo: https://weibo.com/yourname

友情链接

编辑主题配置文件,自行添加:

links_icon: link
links_title: Links
#links_layout: block    #块状布局,选一个注一个
links_layout: inline    #行内布局,选一个注一个
links:
  Github: https://www.github.com
  知乎: https://www.zhihu.com

打赏

编辑主题配置文件

# Reward
reward_comment: 求打赏文本
wechatpay: /images/wechatpay.png  # 微信收款二维码 图片路径
alipay: /images/alipay.png        # 支付宝收款二维码 图片路径
#bitcoin: /images/bitcoin.png     # 比特币

文章版权信息

编辑主题配置文件,启用copyright服务:

post_copyright:
  enable: true

访客&访问量

NexT主题中已经集成了不蒜子统计,直接编辑主题配置文件:

busuanzi_count:
  enable: true              # 开启busuanzi数据统计
  total_visitors: true      # 访客
  total_visitors_icon: user
  total_views: true         # 访问量
  total_views_icon: eye
  post_views: true          # 文章阅读次数
  post_views_icon: eye

百度统计

1.登录百度统计,添加域名。若更换域名,需重新绑定。

2.复制 hm.js? 后面那串统计脚本 id: 百度统计

3.编辑主题配置文件,添加脚本id

# Baidu Analytics ID
baidu_analytics: 脚本id

文章字数统计

1.安装字数统计插件:

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

2.编辑主题配置文件

symbols_count_time:
  separated_meta: true     
  item_text_post: true     # 文章字数
  item_text_total: true    # 本站所有文章字数
  awl: 5
  wpm: 200

评论

来必力

1.登陆 来必力 获取你的 LiveRe UID。

2.编辑主题配置文件,添加LiveRe UID:

livere_uid: #你的LiveRe UID

3.记住将可评论文档的顶部属性中comments: true

分享

jiathis分享

编辑主题配置文件,添加jiathis_uid:

jiathis:
  uid: 2160658

百度分享

编辑主题配置文件,设置baidushare:

baidushare:
  type: button       # type: button | slide

搜索服务

Local Search

1.安装local search插件:

$ npm install hexo-generator-searchdb --save

2.编辑站点配置文件,新增以下内容:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3.编辑主题配置文件,启用local search功能:

local_search:
  enable: true

修改文章底部标签[#]#

1.打开编辑themes\next\layout\_macro\post.swig

2.Ctrl+F找到rel="tag">#

3.将#替换为<i class="fa fa-tag"></i>

文章底部添加"本文结束"

打开编辑themes\next\layout\_macro\post.swig,在文章结束的地方添加如下代码:

{% if not is_index %}
	<div style="text-align:center;color: #ccc;font-size:14px;">
		---------Thanks for your attention---------
	</div>
{% endif %}

本文结束

添加访客&访问量描述

打开编辑themes\next\layout\_third-party\analytics\busuanzi-counter.swig

添加访客&访问量描述

添加Host-by描述

最近,银牌会员的Coding Pages在访问时会加载广告,需要在网站首页任意位置放置「Hosted by Coding Pages」,通过审核将取消广告。

打开编辑themes/next/layout/_partials/footer.swig,在文件末尾添加如下代码,将「Hosted by Coding Pages」置于页面底部。

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <div class="copyright">
    Hosted by <a href="https://pages.coding.me">Coding Pages</a>
    &&nbsp;<a href="https://pages.github.com">GitHub Pages</a>
  </div>
{% endif %}

DaoVoice实现在线联系

1.首先在DaoVoice注册一个账号,注册完成后在[应用设置]-[安装到网站]中找到app_id。

2.打开编辑themes/next/layout/_partials/head/head.swig ,添加如下代码:

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

3.编辑主题配置文件,添加如下代码:

# DaoVoice
daovoice: true
daovoice_app_id: yourapp_id

4.设置DaoVoice页面样式

daovoice

5.在[应用设置]-[添加微信]中绑定微信,关注小程序,即可实时收发消息。

修改Pisces主题宽度

打开编辑themes\next\source\css\_schemes\Pisces\_layout.styl,在底部添加如下代码:

// 以下为新增代码!!
header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

参考资料:next主题|使用文档

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部