基于NexT主题,设置站点统计信息，摘要，更新时间，打赏,sitemap设置，音乐插件…

主题：NexT主题
内容较多，建议点击右边导航栏查看

优化分类

生成新post

生成新文章

生成新文章。默认模板是scaffolds/post.md,由站点配置文件中default_layout参数设置。使用默认模板时，
下面主题可简化为hexo new <title>,当文章名有空格时，需用引号，引起来。
1
hexo new <layout> <title>
查看新文章
1
2
hexo g
hexo s
推送新文章
1
hex d

生成草稿

生成草稿。生成文章在sources/_drafts目录下。
1
hexo new draft <title>
查看草稿。本地预览草稿
1
2
hexo g --draft
hexo s --draft
发布草稿。移动到sources/_post目录下
1
hexo publish draft <titile>

生成新菜单

生成新菜单即生成新目录
1
hexo new page <title>
如何生成一篇新的post

标题信息：字数统计+阅读时长

在根目录下安装 hexo-wordcount,运行：
1
$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

#Post wordcount display settings
#Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

底部信息：字数统计

切换到根目录，运行命令
1
npm install hexo-wordcount --save

然后在themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

底部信息：访问量统计

打开\themes\next\layout_partials\footer.swig文件,将下面代码粘贴在第一行：

1	<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在最后一行添加显示统计的代码：

<div class="theme-info">
  <div class="powered-by"></div>
  <i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">
  本站总访问量:<span id="busuanzi_value_site_pv"></span></span>
</div>

在这里有两种不同计算方式的统计代码：
pv的方式，单个用户连续点击n篇文章，记录n次访问量
1
2
3
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
uv的方式，单个用户连续点击n篇文章，只记录1次访客数
1
2
3
<span id="busuanzi_container_site_uv">
本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>
添加之后再执行hexo d -g，然后再刷新页面就能看到效果

一般把访问量与字数统计放在一起，则有：

<div class="theme-info">
  <div class="powered-by"></div>
  <i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">
  本站总访问量:<span id="busuanzi_value_site_pv"></span></span>
  <span class="post-meta-divider">|</span>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

本文结束显示”感谢阅读”

在路径 \themes\next\layout\_macro 中新建passage-end-tag.swig文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

打开\themes\next\layout\_macro\post.swig文件，在post-body 之后添加如下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

打开主题配置文件theme/next/_config.yml,在末尾添加：
1
2
passage_end_tag:
enabled: true

背景图片：

打开themes\next\source\css/_custom/custom.styl。这是一个自定义设置样式的文件，这里的css设置可以覆盖主题原来的。
1
2
3
4
5
6
body {
background:url(/uploads/background3.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
把图片添加到目录themes\next\source\uploads下，如果没有,新建一个。或者采用CDN引用。

设置阅读全文显示摘要图片

摘要配图，文章也有

在文章中使用手动进行截断

<div id="zhaiyao" style="width: 735px;height: 372px;">
<img src="image.jpg" style="width: 100%;height: 100%" alt="wechat_jump_game" align=center />
</div>
摘要内容
<!-- more -->

参考：阅读全文

摘要配图，文章没有

在custom.styl(hexo/themes/next/source/css/ _custom/custom.styl)里设计一个专有容器

//图片外部的容器方框 
.out-img-topic {
  display: block;
  margin-bottom: 24px;
}
//图片
img.img-topic {
  width: 100%;
}

修改/themes/next/layout/ _macro/post.swig，在if is_index与if post.description and theme.excerpt_description
之间添加以下代码:

{% if post.images %}
    <div class="out-img-topic">
        <img src={{ post.images }} class="img-topic">
    </div>
{% endif %}

在front-matter中加一个images字段
1
images: "/images/摘要配图/"
参考：博客摘要配图
备注：我的博客于2018/1/29删除此设置

取消power,theme

在主题配置文件，设置powered为false,enable为false即可：

# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: false

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: false

添加来必力评论

在主题配置文件_config.yml 中添加如下配置：

1
2
3

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

uid在安装后可获得

添加jiathis分享

在主题配置文件中，设置jiathis为true。
1
jiathis: true
尝试没成功

添加打赏

reward_comment: 说不定手滑呢！
wechatpay: http://res.cloudinary.com/chenfengkg/image/upload/v1514352686/blog/wechat.png
alipay: http://res.cloudinary.com/chenfengkg/image/upload/v1514352691/blog/alipay.jpg
#bitcoin: /images/bitcoin.png

添加搜索

安装hexo-generator-searchdb。在站点的根目录下执行以下命令：
1
npm install hexo-generator-searchdb --save

配置站点配置文件，新增以下内容到任意位置：

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

配置主题配置文件
1
2
3
# Local search
local_search:
enable: true
配置完先hexo clean，再hexo generate

添加菜单

hexo new page “photography” //新建摄影菜单
在主题配置文件中menu下添加photography: /photography || 图标名，图标名在FontAwesome上找，/photography是访问路径,修改为http://www.baidu.com 则直接跳转到百度。
在hexo>theme>next>languages>zh-Hans.yml中，在menu下添加photography: 摄影
参考：添加菜单分类

添加更新时间

在主题文件设置display_updated: true
在文章开头增加updated: 2015-12-13 20:18:54
参考：文章更新时间设置

使用MathJax

启用mathjax

1
2
3

mathjax:
  enable: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

如果出现字符识别错误，在前面手动加\来escape它。

生成站点地图

googlesitemap

安装插件npm install hexo-generator-sitemap --save
打开站点配置文件，添加
1
2
sitemap:
path: sitemap.xml
输入 hexo g -d,然后输入chenfengkg.cn/sitemap.xml可看到生成的文件
登陆Webmaster Central,点击ADD A PROPERTY输入博客网址
验证网页所有权，使用HTML tag验证。将元数据添加到theme/next/layout/_partial/head.swig这个文件下，然后hexo g -d,然后点击Verify验证。
点击提交网页，点击sitmap,然后点击ADD/TEST SITMAP输入sitemap.xml的地址，然后点击提交。
参考：如何向google提交sitemap

百度sitemap

安装插件npm install hexo-generator-baidu-sitemap
打开站点配置文件，添加
1
2
baidusitemap:
path: baidusitemap.xml
输入 hexo g -d,然后输入chenfengkg.cn/baidusitemap.xml可看到生成的文件
登录百度站长平台，点击网页抓取-> 链接提交，在自动提交中选择 sitemap，输入域名+ baidusitemap.xml。
推送方式，自动推送。在主题配置文件中修改：
1
baidu_push: true
然后等待
参考：提交 sitemap 及解决百度爬虫无法抓取 GitHub Pages 链接问题
 让Baidu和Google收录Hexo博客

添加robot.txt

登录百度站长平台 , 点击网页抓取->Robots-> 检测并更新。这样百度爬虫会检测并更新 robots.txt,
并会在新的 ip 地址上抓取内容，不然还是会抓取原来的 GitHub 上的 ip 地址，导致抓取失败。更新完成
后，我们再次在抓取诊断中测试，这时应该就会抓取成功了。
tips:如果之前已经上传过 robots.txt 导致更新不成功的话，可以试着删除 robots.txt, 重新上传。

在sources目录下创建robots.txt文件

在robots.txt中添加：

User-agent: *
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Sitemap: http://chenfengkg.cn/sitemap.xml
Sitemap: http://chenfengkg.cn/baidusitemap.xml

hexo g -d提交
参考：hexo优化
 Sitemap和Robots.txt SEO优化技巧

小技巧

插件生成的 sitemap 的文章链接，都是以站点配置文件中的 url 为基础的，如果将博客绑定了域名，最好将 url 字段填写为绑定的域名。
不想生成 sitemap 的页面，可在页面最上方以 —- 分割的区域内，即 Front-matter 中，添加代码 sitemap: false。

文章链接优化

去除URL中的时间
Hexo 默认的文章链接形式为 domain/year/month/day/postname，分级较多，造成 URL较长，不利于搜索引擎检索。编辑站点配置文件_config.yml,将 permalink 字段改为 permalink: :title/。将其改为 domain/postname的形式。也可以将permalink字段改为 permalink: :year-:month-:day/:title/，变成domain/year-month-day/postname 形式。

添加音乐

网易云音乐。网易云音乐->某首歌曲->生成外链播放器，在layout\_macro\sidebar.swig文件,在<section></section>标签下添加：

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

使用html标签

<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

使用插件
安装插件npm install hexo-tag-aplayer --save，在文章中添加

1	{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

歌单：

{% aplayerlist %}
{
    "autoplay": false,
    "showlrc": 3,
    "mutex": true,
    "music": [
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        },
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}

加密文件

安装加密插件npm install hexo-bolg-encrypt --save
启用插件。在站点配置文件中添加
1
2
3
4
# Security
##
encrypt:
enable: true

加密文章。

---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsafsdaf
password: Mike         
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---

在首页隐藏指定的文章

修改文件。修改文件theme/next/layout/index.swig,定位修改 post_template.render(post, true)为：
1
2
3
{% if post.visible !== 'hide'%}
{{ post_template.render(post, true) }}
{% endif %}

设置文章

title: 关于Hexo next主题如何在首页隐藏指定的文章
date: 2016-05-08 22:21:29
tags:
…
…
categories: Notes-随笔
visible: hide 这里如果加上hide则该文章就不会在文章首页显示，如果留空则表示默认显示

关于Hexo next主题如何在首页隐藏指定的文章

设置cnd加速前端

在主题配置文件theme/next/_config.yml,修改vendor:

vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib
  # Internal version: 2.1.3
  jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
  # Internal version: 2.1.5
  # Fancybox: http://fancyapps.com/fancybox/
  fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
  # Internal version: 1.0.6
  fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
  # Internal version: 1.9.7
  lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
  # Internal version: 1.2.1
  velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js
  # Internal version: 1.2.1
  velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js
  # Internal version: 0.7.9
  ua_parser: //cdn.bootcss.com/UAParser.js/0.7.12/ua-parser.min.js
  # Internal version: 4.4.0
  # http://fontawesome.io/
  fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

hexo博客next主题修改静态资源为CDN

添加留言板

打开主题配置文件，即 Hexo/themes/next/_config.yml 在 menu 下添加board 字段:
1
board: /board/ || book
执行hexo new page board
在hexo>theme>next>languages>zh-Hans.yml中，在menu下添加board: 留言
参考：hexo怎么添加留言板?

网站分析

添加google analytics，在主题配置文件中设置：
1
google_analytics: your track id
博客分析

添加豆瓣阅读，电影

安装npm install hexo-douban --save

设置，将下面的配置写入站点的配置文件_config.yml里(不是主题的配置文件).

douban:
  user: mythsman
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000 #optional

user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，就可以在这个URL里看到你的ID了: “https://www.douban.com/people/xxxxxx/“.
title: 该页面的标题.
quote: 写在页面开头的一段话,支持html语法.
timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

显示,如果上面的配置都没问题，就可以在生成站点之后打开 //yourblog/books 和 //yourblog/movies, //yourblog/games, 来查看结果.

菜单,如果上面的显示没有问题就可以在主题的配置文件_config.yml里添加如下配置来为这些页面添加菜单链接.

menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page
  Games: /games   #This is your games page

修改文字，打开theme/hexo-theme-next/languages/zh-Hans.yml,在menu下添加：
1
2
3
Movies: 电影
Books: 书籍
Games: 游戏
github地址
 作者博客

实践问题

图片存放地点

解决办法：采用CDN引用，CDN选择cloudinary
参考：Hexo博客搭建之在文章中插入图片

CNAME重定向无效

原因：CNAME文件位置放错
解决：将CNAME文件放在sources/目录下，与_posts目录并列

百度无法抓取github上的文章

原因：github拒绝百度的抓取
解决方法：同时部署到github和coding

注册coding,新建项目，配置SSH

在站点配置文件修改部署配置：

deploy:
- type: git
  repo: https://github.com/chenfengkg/chenfengkg.github.io.git
  branch: master
- type: git
  repo: https://git.coding.net/chenfengk/blog-my.git
  branch: master

hexo clean,hexo g-d将博客部署到coding上
点击项目中的pages服务页面，部署来源选择master分支，与站点文件要一致,然后填写自定义域名。
DNS配置，登陆阿里云,点击用户名下管理控制找到云解析服务。
在解析codingnet时选择默认，解析github时选择世界
修改主题目录下layout/_partials/footer.swig文件，去除广告。
1
2
3
4
<div class="theme-info">
{{ __('Hosted by') }}
<a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a>
</div>
还需要在coding主页项目page页面设置，勾选已放置Hosted by Coding Pages。可查看coding帮助文档。
将博客同时部署到 github 与 coding
coding.net绑定自定义域名
 hexo部署远程库
 coding帮助文档

百度链接提交抓取失败，ip为以前githubip

原因：以前博客放在github上，现在采用coding.net作为国内访问，github作为国外访问。
解决办法：用抓取诊断工具抓取，ip出错点击报错。
参考：百度站点ip变更

hexo git部署警告 warning： LF will be replaced by CRLF

Git会把LF替换为CRLF，不重要, 可以禁用此功能。在MinGW窗口中输入：

1	git config --global core.autocrlf false

参考：Windows git “warning: LF will be replaced by CRLF”

摘要图按比例缩放，图片不一样，各摘要大图片小不一样

解决方法,添加一个div,用image填充div：

<div id="zhaiyao" style="width: 735px;height: 372px;">
<img src="image.jpg" style="width: 100%;height: 100%" alt="wechat_jump_game" align=center />
</div>
摘要内容
<!-- more -->

参考：用image填充div