Hexo-Next7.0主题博客优化

基础路径说明

名称	文件	URL
根路径	BLOG_HEXO	BLOG_HEXO/
站点配置文件	_config.yml	BLOG_HEXO/_config.yml
主题配置文件	_config.yml	BLOG_HEXO/themes/next/_config.yml

注：下文中术语以此为准自行匹配

Hexo站点配置

站点基础配置

Site

title: EvanSun Home
subtitle: 记录、分享
description: 男人有实力，才有魅力~
keywords:
author: evansun
language: zh-Hans #指定语言
timezone: Asia/Shanghai #指定时区

URL访问配置

站点配置文件，关键字：URL

url: https://blog.jyusun.com
root: /
permalink: contents/:id.html
permalink_defaults:

指定next主题

克隆next主题到themes文件夹下

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

站点配置文件，关键字：theme
1
theme: next

指定next-Pisces模板

主题配置文件，关键字：Schemes

#scheme: Muse
#scheme: Mist
scheme: Pisces  #打开前面的注释
#scheme: Gemini

部署设置

站点配置文件，关键字：deploy

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:jyusun/blog.git
  branch: master

文章生成位置及名称

站点配置文件，设置文章生成位置及名称，关键字：new_post_name
1
new_post_name: :year:month:day-:title/index.md # File name of new posts
生成效果：20190319-测试文件/index.md

菜单栏设置

设置展示菜单

增加菜单主题/languages/zh-CH.yml，关键字：menu

home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  test: 测试新增

注：由于上面站点基础配置中指定了语言zh-CH，所以本文以此为例。

主题配置文件，关键字：menu打开需要菜单的注释

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  schedule: /schedule/ || calendar
  sitemap: /sitemap.xml || sitemap
  commonweal: /404/ || heartbeat
  about: /about/ || user
  test: /test/ || test

设置文章分类页面

新建分类页面categories
1
$ hexo new page categories
注：根路径下执行此命令
修改页面内容
1
title: 文章分类
date: 2018-07-19 14:08:34
type: “categories”
1
注：使用时在文章标题处指定categories标签即可

站点地图

安装插件，分别适用于谷歌和百度生成站点地图便于爬虫爬取

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

站点配置文件，新增内容

Plugins:
  - hexo-generator-baidu-sitemap
  - hexo-generator-sitemap
baidusitemap:
  path: baidusitemap.xml
sitemap:
  path: sitemap.xml

公益404

待续…

添加站内搜索功能

下载插件

1	$ npm install hexo-generator-searchdb --save

站点配置文件，新增内容

# 设置站内搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题配置文件，关键字：local_search，

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true  #设置为true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

侧边栏设置

设置头像

主题配置文件，关键字：Sidebar Avatar

avatar指定本地图片,把图片放入 themes/next/source/images 下,修改 avatar：
1
2
3
4
5
avatar:
url: /images/touxiang.png
rounded: false
opacity: 1
rotated: false

设置侧边社交连接

主题配置文件，关键字： Social Links，根据需要打开注释，调整为自己的地址

1
2
3

social:
  GitHub: https://github.com/jyusun || github
  E-Mail: mailto:mr.evansun@foxmail.com || envelope

设置侧边栏社交样式

主题配置文件，关键字： social_icons

social_icons:
  enable: true      #`true`显示图标，`false`只显示名称
  icons_only: false  #`true`只展示图标，`false`显示图标及名称
  transition: false

RSS

安装feed插件

1	$ npm install hexo-generator-feed --save

主题配置文件，新增内容

# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png

友情链接

主题配置文件，关键字：Blog rolls

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  开源中国: https://www.oschina.net/
  百度: http://baidu.com/
  搜狗: https://www.sogou.com/

底部设置

推广链接功能

主题/layout/_macro路径下新增advert.swig文件

{# Gallery support #}
{% if config.advert %}
<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {% set COLUMN_NUMBER = 3 %}
  {% for advert, link in config.advert %}
	{% if loop.index0 % COLUMN_NUMBER === 0 %}<div class="post-gallery-row">{% endif %}
	  <a class="post-gallery-img fancybox"
		 href="{{ link.split('||')[1] | trim }}" rel="gallery_{{ post._id }}" target="_blank"
		 itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
		<img src="{{ link.split('||')[0] | trim }}" itemprop="contentUrl" alt="{{advert}}"/>
	  </a>
	{% if loop.index0 % COLUMN_NUMBER === 2 %}</div>{% endif %}
  {% endfor %}

  {# Append end tag for `post-gallery-row` when (photos size mod COLUMN_NUMBER) is less than COLUMN_NUMBER #}
  {% if config.advert.length % COLUMN_NUMBER > 0 %}</div>{% endif %}
</div>
{% endif %}

将代码插入主题/layout/_macro/post.swig文件中，关键字：theme.wechat_subscriber.enabled上方

{% if theme.advert.enable and not is_index%}
    <div>
    	{% include 'advert.swig' %}
    </div>
{% endif %}

主题配置文件，新增用于控制推广功能开关
1
2
advert:
enable: true

站点配置文件，新增推广内容

advert:
	天猫618: https://gw.alicdn.com/tfs/TB1p12MsQ9WBuNjSspeXXaz5VXa-440-180.jpg || https://s.click.taobao.com/t?e=m%3D2%26s%3DQ7%2BOxHRJNU8cQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMSjJriMKVvzd5x%2BIUlGKNpUKzRB5pSb%2B3oLgBNn%2Fh8Y9fs5VlYBlFz5kblEZQzGoFcs%2Fhc73tO6KVYo%2BqyT%2FBa1NrKwvDJNPXkIGbLNY5ut4zueC0P1cNS9iw0%2FdWyiVaogaseAKBk0cTbU9KzMTtxpe7auY0HPYWszlTEcWhO9mCmht7GX%2FH9k%3D
	2018年618理想生活狂欢季——聚划算主会场: https://img.alicdn.com/tfs/TB125UMsMmTBuNjy1XbXXaMrVXa-440-180.jpg || https://s.click.taobao.com/t?e=m%3D2%26s%3D2c9N%2F89tPiMcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMXJZeCVJPqDB8sviUM61dt0KzRB5pSb%2B3oLgBNn%2Fh8Y9fs5VlYBlFz5kblEZQzGoFcs%2Fhc73tO6KVYo%2BqyT%2FBa1NrKwvDJNPXkIGbLNY5ut4zueC0P1cNS%2B%2BUEclaRYva8F8WBkZipnv9sOkOOEWZ4E%2FnCA8IhtTQhnqXdg7YFDycSpj5qSCmbA%3D
	2018年618理想生活狂欢节—消费电子主会场: https://img.alicdn.com/tfs/TB1GnfasntYBeNjy1XdXXXXyVXa-440-180.jpg || https://s.click.taobao.com/t?e=m%3D2%26s%3D5xcD%2FIEjdhYcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMUG5eE0BPbCdxq3IhSJN6GQKzRB5pSb%2B3oLgBNn%2Fh8Y9fs5VlYBlFz5kblEZQzGoFcs%2Fhc73tO6KVYo%2BqyT%2FBa1NrKwvDJNPXkIGbLNY5ut4zueC0P1cNS%2B6zThPYvErzhJBFs1%2FyLxVPxey8%2Bhd8pyvTW5l3DCD30V92HL3DKLNSqwyt%2BH6DtO%2FMqT4SeHHMKTHNVRq3ENViYq%2BoOM2USF%2Bn%2B1pvicu6FXll1U39L8dNcwDbqGDeU3JefVee9XDEgxYVk%2BaFSeXxiXvDf8DaRs%3D

文章末尾加上”本文结束”字样

主题/layout/_macro，新增passage-end-tag.swig文件

{% if not is_index %}
    <div>
        <div style="text-align:center;color: #ccc;font-size:14px;">------本文结束------</div>
    </div>
{% endif %}

将代码插入主题/layout/_macro/post.swig文件中，关键字：END POST BODY下方

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

主题配置文件，新增内容

1
2
3

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

底部标签

底部带有#号的标签主题/layout/_macro/post.swig，关键字：post-footer
1
# 替换为 <i class="fa fa-tag"></i>

底部统计

主题/layout/_partials/footer.swig

首页文章样式

主页文章添加阴影效果

新增内容主题/source/css/_custom/custom.styl文件

// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

隐藏文章与文章间分割线

修改内容主题/source/css/_common/components/post/post-eof.styl

.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 0%;
    height: 0px;
    background: $grey-light;
    text-align: center;
  }
}

首页自动形成摘要

主题配置文件，关键字：auto_excerpt，文章前150字
1
2
3
auto_excerpt:
enable: true
length: 150

写作样式

文内图片引用

站点配置文件，关键字：post_asset_folder
1
post_asset_folder: true
执行新建命令时会创建同名文件夹
1
$ hexo n <title>
将图片放入同名文件夹下，文章内图片相对引用
1
{% asset_img 图片名称.jpg 图片描述 %}

文内超链接

文内超链接
1
[TextUrl](https://blog.jyusun.com/)

博客功能

文章浏览显示进度百分比

主题配置文件，关键字： scrollpercent ，将 false 改为 true
1
2
# Scroll percent label in b2t button.
scrollpercent: true
如果想要把百分比在左边显示，关键字：b2t将false改为true
1
2
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true

开启版权声明

主题配置文件下，关键字 creative_commons

creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: zh-CN

打赏功能

文章底部打赏共功能，关键字：Reward。把二维码图片放入 主题/source/images 下
1
2
3
reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

禁止鼠标悬浮二维码上底部文字抖动，主题配置文件：，关键字：animation

# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
  enable: true
  animation: false
  comment: 坚持原创技术分享，您的支持将鼓励我继续创作！

评论功能

在线沟通

主题/layout/_partials/head/，新增文件daovoice.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.appid}}"
    });
  daovoice('update');
  </script>
{% endif %}

主题/layout/_partials/head/head.swig添加引用

1
2
3

{% if theme.daovoice.enable %}
	{% include 'daovoice.swig' %}
{% endif %}

主题配置文件，新增内容

1
2
3

daovoice:
  enable: true
  appid: asdqw5 #你的id

分享功能

主题配置文件，关键字：baidushare

1
2
3

baidushare：
  type: button
  baidushare: true

文章内链接文本样式

修改文件主题/source/css/_common/components/post/post.styl，在末尾添加css样式：

.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

博文压缩

安装gulp

1 2	$ npm install gulp -g $ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

hexo主目录下新建gulpfile.js文件

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。