Hexo Next主题博客功能完善

发表于 | 分类于 |
字数统计: 2.7k | 阅读时长 ≈ 11

前提为你已经搭建好hexo next博客
如果没有，则参考搭建吧😝
注意：下载next地址变了next新地址
博客部署命令可以用&&操作：

  • hexo clean && hexo g && hexo s
  • hexo clean && hexo g && hexo d
    ！！！很多插件安装，网上的如果不行，请直接参考插件官网，最官方

一、配置问题注意点

1. 文章显示中文

1
2
根目录/_config.yml（不是next下面的哈）
language: zh-CN # 是zh-CN 不是zh-Hans

2. 首页显示阅读全文

1
2
3
4
5
themes/next/_config.yml

auto_excerpt:
  enable: true # 设置是否显示阅读全文，文章较多的话，有必要设置为 true
  length: 200 #预览展示多少文字

3. 分享功能

ps:微信图片加载不出来，所以去掉了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Step1

source/lib
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
ps：名字不是随便的needsharebutton


Step2

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Douban,QQZone,Twitter,Facebook

4. 添加分类和标签

官方链接
参考链接

4.1. 添加分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Step1

进入博客所在文件夹
执行 ： hexo new page categories
成功提示 ： INFO  Created: ~/Documents/blog/source/categories/index.md
根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---


新建文章后 hexo new [post] 文章标题
添加categories属性，再部署之后就可以在分类页看到分类了
---
title: hexo next 为文章添加分类
date: 2016-03-16 08:12:43
tags:
categories: 前端
---
或则这样但是分类只能添加一个
---

title: hexo next 为文章添加分类
date: 2016-03-16 08:12:43
tags:
categories: 
- 前端
---

4.2. 添加标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Step1
进入博客所在文件夹
hexo new page tags

成功后提示
INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：
---
title: 标签
date: 2017-05-27 14:22:08
---

添加type: "tags"到内容中，添加后是这样的：

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

Step2
新建文章或者想给某个文件添加tags，则如下操作
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

注意：
1.只有添加了tags: xxx的文章才会被收录到首页的“标签”中。
2.在categories和tags的index.m文件里面添加
comments: false ，把评论关了

细心的朋友可能已经发现，这两个的设置几乎一模一样！是的，没错，思路都是一样的。所以我们可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就有categories:项了。

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。

5. 文章侧边栏控制

1
2
3
# 这个地方控制自动打开文章目录条
# #sidebar: 注释掉则表示一打开详情页不会自动弹出sidebar
    sidebar:

6. 不要Next自动添加序号

1
2
3
4
5
6
7
8
9
10
11
themes/next/_config.yml 修改 number: false

toc:
  enable: true

  # Automatically add list number to toc.
  # 不要next系统添加序号
  number: false #true

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

7.代码高亮主题色

1
2
需要写明语言才会真正有效果
hexo next highlight_theme 设置

8. 安装与卸载插件

8.1. 安装

1
2
npm install xxx –save
做相应配置（官网）

8.2. 卸载

1
2
3
4
5
6
npm uninstall 插件名称 --save
去掉相应配置(安装时候配置的)

例： 卸载hexo s上传图片到的七牛插件（个人安装又卸载了）
npm uninstall hexo-qiniu-sync --save
去掉根目录/_config.yml下配置

9.网页加载动画效果

PS： next 已经集成好动画了，如果对速度有要求的话直接关闭，个人选择关闭,加载太慢了。

1
2
3
# 加载有点慢 关掉
motion:
  enable: false #true

10. 如何在首页添加图片

参考链接

1
2
3
4
5
6
7
8
9
10
11
12
13
每篇文章里面添加photos: —"图片链接"

---
layout: '[post]'
title: Next主题博客功能完善
date: 2018-08-07 00:25:53
tags:
- 博客
- 技巧
categories: 博客搭建
photos: 
    - "http://oz2tkq0zj.bkt.clouddn.com/17-11-9/52323298.jpg"
---

二、 添加功能插件

1. 图片浏览放大功能fancybox

1
2
3
4
5
6
7
8
9
10
11
Step1:

cd next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

ps:注意fancybox和next/_config.uml里面的名字保持一致

step2：
更改next/_config.uml文件

fancybox： true

2. 阅读次数

ps: 仅限于博文详情页面显示阅读数，在首页不显示

1
2
3
4
5
6
7
8
9
10
11
step1
更改next/_config.uml文件enable: true,如下：

busuanzi_count:
  enable: true #false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

3. hexo s 顺便上传图片到七牛云服务器参考

ps:这个插件感觉可添加也可不用添加，用到图片的时候自己上传到七牛服务器就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
step1:
自己注册七牛服务器（目前笔者觉得够用了）

step2:
hexo主目录，下载插件
npm install hexo-qiniu-sync --save

step3:
配置next/_config.yml
#七牛云存储设置
##offline       是否离线. 离线状态将使用本地地址渲染
##sync          是否同步
##bucket        空间名称.
##access_key    上传密钥AccessKey
##secret_key    上传密钥SecretKey
##secret_file   秘钥文件路径，可以将上述两个属性配置到文件内，防止泄露，json格式。绝对路径相对路径均可
##dirPrefix     上传的资源子目录前缀.如设置，需与urlPrefix同步 
##urlPrefix     外链前缀.
##up_host      上传服务器路径,如选择华北区域的话配置为http://up-z1.qiniu.com
##local_dir     本地目录.
##update_exist  是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
##image/js/css  子参数folder为不同静态资源种类的目录名称，一般不需要改动
##image.extend  这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/ 
##              可使用基本图片处理、高级图片处理、图片水印处理这3个接口。例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图
qiniu:
  offline: false
  sync: true
  bucket: bucket_name
  secret_file: sec/qn.json or C:
  access_key: AccessKey
  secret_key: SecretKey
  dirPrefix: static
  urlPrefix: http://bucket_name.qiniudn.com/static
  up_host: http://upload.qiniu.com
  local_dir: static
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css
    
    
step4:
在hexo目录下,运行一下hexo s，图片直接上传到七牛云存储上去了

注意:备份发布系统代码不会上传hexo-qiniu-sync，不过在重新下载了部署系统，则直接运行npm install hexo —save就好,不需要再次执行 npm install hexo-qiniu-sync --save 因为在第一次下载的时候已经在配置文件记录了

4. 畅言评论插件集成参考

功能：博客下面进行各种登陆评论，首页及详情页顶部评论量显示

4.1.畅言集成步骤

1
2
3
4
5
6
7
step1：
注册畅言:http://changyan.kuaizhan.com/
获取畅言评论的APP ID 和APP KEY
ICP备案：自己有最好,网上随便找一个

step2：
集成就不详叙，直接参考：https://www.jianshu.com/p/5888bd91d070

遇到的坑 ：
a. 显示不全

解决办法：
更改next/layout/_partials/comments.swig代码
原来的代码： 34行处

1
2
3
4
<div class="comments" id="comments">
      </style>
      <div id="SOHUCS"></div>
    </div>

改完后的代码：

1
2
3
4
5
6
7
8
<div class="comments" id="comments">
      <style>
        #comments {
          transform: none !important;
        }
      </style>
      <div id="SOHUCS"></div>
 </div>

b. 首页显示评论出现问题参考解法

解决办法：
next/layout/_mavro/post.swig:175～178行

1
2
3
<a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
                 <span id="url::{{ post.permalink }}" class="cy_cmt_count" data-xid="{{ post.path }}" itemprop="commentsCount" ></span>
               </a>

将post.permalink这个值包一层encodeURI方法

1
<span id="url::{{ encodeURI(post.permalink) }}" class="cy_cmt_count" data-xid="{{ post.path }}" itemprop="commentsCount" ></span>

4.2. 我为什么最终选畅言而不其他评论插件，其他评论插件我都集成过？

（ps:下面的言论不代表其余的评论插件做的不行，很可能是我的集成姿势不对）

先说说我集成评论系统的要求：
登陆评论方便、首页/详情页评论数显示正确

4.2.1. gitment集成参考: id获取问题导致如果同时发布两篇文章，两篇文章下显示的评论都是两篇文章的总合

Error：validation failed 解决办法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
文件:themes\next\layout_third-party\comments\gitments.swig
替换 id: window.location.pathname,
方法一：id: '{{ page.date }}’,
方法二：id: (window.location.pathname.length < 50) ? window.location.pathname : '<%= page.date %>',

function renderGitment(){
    var gitment = new {{CommentsClass}}({
        id: window.location.pathname,
        owner: '{{ theme.gitment.github_user }}',
        repo: '{{ theme.gitment.github_repo }}',
        {% if theme.gitment.mint %}
            lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,
            {% endif %}

4.2.2. 来必得集成参考

插件集成最简单，但是因为是韩国的所以加载比较慢，首页没有评论数量显示所以没
用。

4.2.3. valine集成参考

集成也挺简单，但是评论的时候让用户直接选择留下联系方式，然后没有首页显示评论数量所以没用，且评论管理不知道在哪里管理；

5. 本地搜索功能

local_search

方法一：推荐官方教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Step1: 
cd 到博客根目录
npm install hexo-generator-searchdb --save

Step2:
根目录/_config.yml 文件下添加下面代码
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
Step3:
next/_config.yml 文件下更改以下代码:改false为true
local_search:
  enable: true #false

方法二：民间教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
step1： 安装插件

插件管理方法一：自己管理
cd next/source/lib
git clone https://github.com/theme-next/hexo-generator-searchdb.git local_search 
ps:local_search名字和里面对应

方法二：直接让npm给你管理插件-- 推荐
npm install hexo-generator-searchdb --save



Step2
your root _config.yml 添加：
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
step3
/next/_config.yml 改local_search为true
local_search:
  enable: true

6. 文字数量和阅读时长

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Step1
npm install hexo-symbols-count-time --save



  
Step2

your root _config.yml
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  
  
/next/_config.yml 不用动

7. 开启RRS订阅

ps:Next主题默认就支持插件git 参考链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Step1
cd博客根目录安装 RSS 插件
npm install hexo-generator-feed --save

Step2
开启网站 RSS 支持

编辑网站根目录下的 _config.yml，添加以下代码开启

# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
------------- End Thank For Your Reading -------------