Hexo Next主题博客功能完善

作者: SilenceZhou | 来源:发表于2018-08-08 18:39 被阅读202次

本篇已同步到个人博客，欢迎常来。

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

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

一、配置问题注意点

1. 文章显示中文

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

2. 首页显示阅读全文

themes/next/_config.yml

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

3. 分享功能

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

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. 添加分类

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. 添加标签

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. 文章侧边栏控制

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

6. 不要Next自动添加序号

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.代码高亮主题色

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

8. 安装与卸载插件

8.1. 安装

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

8.2. 卸载

npm uninstall 插件名称 --save
去掉相应配置(安装时候配置的)

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

9.网页加载动画效果

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

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

10. 如何在首页添加图片

参考链接

每篇文章里面添加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

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: 仅限于博文详情页面显示阅读数，在首页不显示

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:这个插件感觉可添加也可不用添加，用到图片的时候自己上传到七牛服务器就好

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.畅言集成步骤

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

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

遇到的坑：
a. 显示不全

image

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

<div class="comments" id="comments">
      </style>
      <div id="SOHUCS"></div>
    </div>

改完后的代码：

<div class="comments" id="comments">
      <style>
        #comments {
          transform: none !important;
        }
      </style>
      <div id="SOHUCS"></div>
 </div>

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

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

<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方法

<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 解决办法如下

文件: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

方法一：推荐官方教程

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

方法二：民间教程

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. 文字数量和阅读时长

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 参考链接

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: ' '

Hexo Next主题博客功能完善

一、配置问题注意点

1. 文章显示中文

2. 首页显示阅读全文

3. 分享功能

4. 添加分类和标签

4.1. 添加分类

4.2. 添加标签

5. 文章侧边栏控制

6. 不要Next自动添加序号

7.代码高亮主题色

8. 安装与卸载插件

8.1. 安装

8.2. 卸载

9.网页加载动画效果

10. 如何在首页添加图片

二、添加功能插件

1. 图片浏览放大功能fancybox

2. 阅读次数

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

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

4.1.畅言集成步骤

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

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

4.2.2. 来必得集成参考

4.2.3. valine集成参考

5. 本地搜索功能

6. 文字数量和阅读时长

7. 开启RRS订阅

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Hexo Next主题博客功能完善

一、配置问题注意点

1. 文章显示中文

2. 首页显示阅读全文

3. 分享功能

4. 添加分类和标签

4.1. 添加分类

4.2. 添加标签

5. 文章侧边栏控制

6. 不要Next自动添加序号

7.代码高亮主题色

8. 安装与卸载插件

8.1. 安装

8.2. 卸载

9.网页加载动画效果

10. 如何在首页添加图片

二、 添加功能插件

1. 图片浏览放大功能fancybox

2. 阅读次数

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

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

4.1.畅言集成步骤

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

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

4.2.2. 来必得集成参考

4.2.3. valine集成参考

5. 本地搜索功能

6. 文字数量和阅读时长

7. 开启RRS订阅

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

二、添加功能插件