Hexo 博客的 Next 主题配置

NexT 主题拥有丰富而简单的配置，结合第三方服务，可以方便快捷地打造个性化的 Hexo 博客

更换主题

下载 Github 上的主题：git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
修改配置文件：通过修改 _config.yml 文件中的 theme: yilia 更改主题
查看主题效果：hexo server，注意每次更改预览之前必须先使用 hexo generate 生成网页

设置阅读全文

推荐方法：通过在文章中手动添加  来进行截断
也可以在主题配置文件中通入如下代码自动生成摘要
1
2
3
auto_excerpt:
enable: false
length: 150

添加统计功能

添加文章阅读量统计
- 在 LeanCloud 中创建名为 Counter 的应用
- 然后将应用的 App ID 和 App Key 填入主题配置文件中，重新生成部署即可
- 注意一定要将自己的网址添加到：设置-安全中心-安全域名

添加站点浏览量统计: 将主题设置文件中的 busuanzi_count 设置为 enable: true，然后分别进行以下配置

busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
  site_uv_header: <i class="fa fa-user"> 本站访客数</i>
  site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
  site_pv_header: <i class="fa fa-eye"> 本站总访问量</i>
  site_pv_footer: 次

自定义站点内容搜索

首先在博客根目录安装插件 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

设置 RSS

首先安装插件 npm install hexo-generator-feed --save

然后在主题配置文件中插入如下代码

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

搜索引擎优化

Google Webmaster Tools
- 登陆Google 的站点管理工具，导航到验证方法，选择 HTML Tag，将会获取一段代码 <meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX" />
- 将 content 里面的内容复制出来，并在主题配置文件中新增字段 google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX，重新编译发布后，到 Google 站点管理工具进行验证即可

百度站长工具
- 进入百度站长工具——官网保护——添加网站
- 然后获取 HTML 标签，参加 Google Webmaster 将相关标签加入主题配置文件中 baidu_site_verification: XXXXXX
- 如果网站验证出现 301 错误，这是因为 https 加密导致重定向失败，此时必须使用 CNAME 验证解析，具体方法是在万网中添加解析，记录类型选择 CNAME，主机记录为百度验证码加域名，记录值为 zz.baidu.com，然后提交即可

为文章添加阴影效果

将 themes/next/source/css/_schemes/Mist/_posts-expanded.styl 文件中的 .post{} 修改为：

.posts-expand {
  ...
  .post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .8);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .8);
   }
   ...   
 }

内置标签

文本居中的引用

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>
<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}
<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

突破容器宽度限制的图片

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="full-image" 是必须的 -->
<img src="/image-url" class="full-image" />
<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}
<!-- 别名 -->
{% fi /image-url, alt, title %}

Bootstrap Callout

class_name 可以是如下几种:

1	{% note class_name %} Content {% endnote %}

default

primary

success

info

warning

danger

Reference

Next 主题官网

Next 主题 Github 主页

Hexo 主题推荐知乎

Hexo 多终端同步管理

利用 Leancloud 添加文章阅读量统计功能

Hexo 集成多说评论 + 多说分享 + 美化多说

为文章添加阴影效果