基于Hexo+Next的主题优化总结&踩过的坑

作者: Lois_Huang | 来源:发表于2019-12-17 19:05 被阅读0次

基于Hexo+Next的主题优化总结&踩过的坑
金融类ASO优化，产品上架技巧。
Hexo+Next搭建个人博客
Hive性能优化
kotlin SAM 优化，不注意就会踩坑！
交互设计师所要避免的几个坑
装饰行业从业23年|不想你踩坑
http的KeepAlive详解
7.2-基于Redis实现分布式锁的几种坑你是否踩过《上》—小滴
2017年年终总结，我都写了什么

初始配置

Next主题的一般性配置，参考NexT 使用文档。其“开始使用”、“主题配置”、"第三方服务"这三个版块的内容，基本上涵盖了所有必要的元素。

附加功能

添加文章版权声明

打开主题配置文件（/themes/next/_config.yml），找到creative_commons标签，将post属性值改为true：

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

配置完后，重启服务，效果如图：

添加“阅读全文”按钮

设置首页文章以摘要形式显示，打开主题配置文件（/themes/next/_config.yml），找到auto_excerpt标签，进行如下修改：

auto_excerpt:
  enable: true
  length: 150

其中length代表显示摘要的截取字符长度。

设置favicon图标

选择一个favicon制作网站完成制作，例如：比特虫，制作一个16*16和一个32*32的；
两个不同尺寸大小的文件，重命名为favicon-16x16-next.png和favicon-32x32-next.png；
将重命名的两个图片文件放到博客目录下的themes/next/source/images中（覆盖原来的两个默认的）

重启服务，效果如图：

添加文章阅读量统计&评论功能

参考Hexo博客Next主题添加统计文章阅读量功能配置LeanCloud端。
设置valine评论框，打开主题配置文件（/themes/next/_config.yml），找到valine标签，进行如下修改：

valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid:  # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊!  # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  language: # language, available values: en, zh-cn
  visitor: true # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # if false, comment count will only be displayed in post page, not in home page

其中appid，appkey属性填入LeanCloud应用的app-id与app-key。visitor选项若设置为true，则leancloud_visitors标签可以不用配置。
另外建议将自带的CDN改成第三方CDN，提高加载速度。
文件目录：next/layout/_third-party/comments/valine.swig，将//unpkg.com/valine/dist/Valine.min.js改为//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js，还可以去该网址下载js文件，valine.swig中的地址可指向本地。

设置valine评论区头像

注册gravatar账号，上传头像，实现邮箱账号和头像的映射关系。
若收不到确认邮件，并且在垃圾箱也未找到的话，有可能是直接被拦截，QQ邮箱查看被拦截邮件以及添加到白名单的方法为：QQ邮箱-->右键，收信查询-->查看被系统拦截的邮件-->添加到白名单。
注意头像生效所花的时间可能比较长，属于正常情况。

取消分类、标签等页面的评论框

如果有集成评论服务，每个页面都会带有评论。若需要关闭的话，添加字段 comments 并将值设置为 false，禁用评论示例如下：

title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false

添加字数统计与阅读时长

（1）打开博客目录，运行git bush，安装插件

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

（2）修改博客配置文件，添加以下代码

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

（3）修改主题配置文件，找到标签symbols_count_time，进行如下修改

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

（4）重启服务

添加网站访问量

利用busuanzi统计访问量，打开主题配置文件/theme/next/_config.yml，进行如下修改，便可以看到页脚出现访问量：

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

busuanzi与valine都具有统计阅读次数的功能，若把标签valine下的visitor属性设置为true的话，这里的post_views参数值应修改为false。

修改文章底部带#号的标签

将 # 换成标签图标。
[NexT 7.1.0 Released]修改方法为：
打开模板/themes/next/layout/_macro/post.swig，搜索 rel="tag"，进行如下修改：

<div class="post-tags">
          {% for tag in post.tags %}
            <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
          {% endfor %}
</div>

[NexT 7.2.0 Released]修改方法为：
修改主题配置文件，找到标签tag_icon，进行如下修改：

# Use icon instead of the symblo # to indicate the tag at the bottom of the post
tag_icon: true

定制化css样式

若想自己设置css样式，可添加在/theme/next/source/css/_custom/custom.styl下，如：

// Custom styles.
ul{
    margin-top: -15px;
    margin-bottom: 10px;
}
ol{
    margin-top: -5px;
}
figure.highlight.java{
    margin-top: -15px;
    margin-bottom: 10px;
}
table{
    margin-bottom: 10px;
}

设置文章英文链接

hexo生成的默认文章链接格式为： :year/:month/:day/:title/，这种默认的配置缺点很明显，当文件名是中文的时候url链接里就有中文出现。
可以通过添加urlname字段实现文章的链接为英文，在md文件的Front-matter区域新增urlname属性，值为文章的英文title，参考如下：

---
title: 基于Hexo+Next的主题优化总结
urlname: summary-of-theme-optimization-based-on-hexo&next
date: 2019-07-12 20:01:26
categories:
  - 工具
tags: 
  - Hexo
---

再将博客配置文件下的permalink值改为：

permalink: :year/:month/:day/:urlname/

设置首页背景图片

在/theme/next/source/css/_custom/custom.styl中添加如下代码：

// 添加背景图片
body {
  background: url(https://source.unsplash.com/random/1600x900?wallpapers);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

// 修改内容区域的透明度
.main-inner {
  background: #fff;
  opacity: 0.8;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 0.8;
}

其中background的url也可写成本地的路径，如background: url(/images/background.jpg);

修改内容区域的宽度

NexT 对于内容的宽度的设定如下：

700px，当屏幕宽度 < 1600px
900px，当屏幕宽度 >= 1600px
移动设备下，宽度自适应

如果你需要修改内容的宽度，同样需要编辑样式文件。编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme，关于如何修改 Pisces Scheme 的宽度请参看这个 Issue

ps：我按照这个方法修改...是没有成功的...是在base.styl中修改才成功...

md文档相关

实现文章多级分类

在文章的categories字段中，写入多个类别，示例如下：

categories:
  - 工具
  - hexo

“工具”为“hexo”的上一级。

在Markdown中合并单元格

Markdown语法本身不包含复杂表格的插入，但是可以使用html语法来实现。

水平单元格的合并：基于colspan属性，即使一个单元格占多列的空间
纵向单元格的合并：基于rowspan属性，即使一个单元格占多行的空间

先在word或excel中把表格做好，然后复制到No-Cruft Excel to HTML Table Converter转化为标记对形式，最后删除空标记对，并设置colspan和rowspan属性即可。
如下所示：

<table>
   <tr>
      <td colspan="6"><b>用于定义数据类型的关键字</b></td>
   </tr>
   <tr>
      <td>class</td>
      <td>interface</td>
      <td>byte</td>
      <td>short</td>
      <td>int</td>
      <td>long</td>
   </tr>
</table>

注意，通过html插入表格，可能浏览器页面中会出现过多空白的情况，解决方法是在表格前加上{% raw %}，表格后加上{% endraw %}。
其实通过Html语言可以使页面显示出很多Markdown语法不支持的功能。
如使字体为红色：

<font color="#FF0000">XXX</font>

使字体高亮：

<span style="background-color:#FFF000">XXX</span>

Markdown转义字符

md中用到的主要可能有语法意义的非空白符号有：\ ` * _ { } [ ] ( ) # + - . !
在正常段落中要原样输出以上符号，一般需要加反斜杠\在前（连续两个反斜杠输出一个反斜杠。）

Markdown首行缩进

在段落开头，输入以下字符，然后紧跟着输入文本即可。

&#160; &#160; &#160; &#160;

自定义阅读全文

在文章任意想添加的位置添加以下代码即可。

<!--more-->

取消“文章目录”对标题的自动编号

修改主题配置文件，找到标签toc，进行如下修改：

toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
  max_depth: 6

踩过的坑

接下来是在配置过程中遇到的问题：

修改不了博客配置文件中的author名

原因：从github上clone的Next主题最新版，不稳定，改为了release版。

执行hexo clean命令报错

报错：FATAL can not read a block mapping entry
原因：配置文件中少写了空格，每一个配置项都是<font color="#FF0000">名称+冒号+空格＋设置参数</font>组合而成（血的教训...千万注意

社交链接图标中知乎的font awesome图标无法获取

原因：NexT不同版本对应着不同版本的font awesome，下载的NexT版本中所对应的font awesome版本可能没有知乎图标）。

版权声明中本文链接显示错误

链接显示为：http://yoursite.com/2019/03/14/Blog-test/
原因：未修改博客配置文件/ _config.yml中的url，需要修改为域名。

执行`hexo g`报错

生成文章的时候，报错：

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 31, Column 21]
expected variable end

原因：当文章中有}}时,且这两个括号未被代码块包含，解析会出问题
解决方法：

{% raw %}
 含有双大括号的内容
{% endraw %}

主题升级

用Beyond Compare工具将官方的上个版本与自己配置过的主题比较，查看更改的内容，以免遗漏。

待解决

1、由[NexT 7.1.0 Released]升级为[NexT 7.2.0 Released]后每篇文章的本文字数未统计到。
2、图片点击放大效果
3、相关文章功能，参考https://zuiyu1818.cn/posts/NexT_codewidth.html
4、歌单页面，参考https://www.zhangshenghai.com/playlist/

参考资料

1、为 Hexo 主题 next 添加图片背景
2、Next常见问题

基于Hexo+Next的主题优化总结&踩过的坑
初始配置 Next主题的一般性配置，参考NexT 使用文档。其“开始使用”、“主题配置”、"第三方服务"这三个版块...
金融类ASO优化，产品上架技巧。
给大家分享一下金融理财类应用ASO优化经验，本次分享里面有基础优化方式，也有我自己踩过的一些坑儿、总结的一些经验。...
Hexo+Next搭建个人博客
1. 参考 Hexo官方文档 Next官方文档 Hexo+Next主题优化 2. 环境 Node.js Gi...
Hive性能优化
Hive性能优化 1.概述继续《那些年使用Hive踩过的坑》一文中的剩余部分，本篇博客赘述了在工作中总结Hive的...
kotlin SAM 优化，不注意就会踩坑！
kotlin SAM 优化，不注意就会踩坑！关键字：kotlin，SAM，优化，坑，object，singlet...
交互设计师所要避免的几个坑
前言工作中难免会踩到几个坑，即使现在不踩以后还会踩，只有踩过才会深刻记住，踩过说明爱过！但是踩过的坑必须把坑填满...
装饰行业从业23年|不想你踩坑
装饰行业从业23年 | 不想你踩坑 | 总结业主们踩过的坑现在很多人在买了房子以后，都比较关注装修问题，毕竟...
http的KeepAlive详解
KeepAlive既熟悉又陌生，踩过坑的同学都知道痛。一线运维工程师踩坑之后对于KeepAlive的总结，你不应该...
7.2-基于Redis实现分布式锁的几种坑你是否踩过《上》—小滴
基于Redis实现分布式锁的几种坑你是否踩过《上》简介：基于Redis实现分布式锁的几种坑实现分布式锁可以用...
2017年年终总结，我都写了什么
旧的一年结束，新的一年开始，我的年终总结如下 1，踩过的坑在消费金融迭代过程中踩过了技术坑需求坑。跟进该外包项目与...