Fork me on GitHub

Next主题配置第三方服务集成

发表于 | 分类于 | 阅读次数

前言

上一篇文章我们已经成功的将博客搭建起来。本文将对主题的相关配置以及第三方服务的集成做进一步的介绍。其实Next的文档，已经将配置与服务集成介绍的非常明白。有兴趣的同学可以去查看官方文档,本文将重点介绍本人BLOG使用的第三方服务 。

主题配置

主要的配置文件有两个

  • 站点配置文件：根目录下面的_config.yml文件
  • 主题配置文件：主题根目录下的_config.yml文件

站点信息

站点信息存放在站点配置文件文件中。

1
2
3
4
5
6
title: QuZheng	  #主标题
subtitle:         #副标题
description:      #描述
author: QuZheng   #作者
language: zh-Hans #语言
timezone:

Next目前支持的语言

语言 代码 示例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

如果想将自己的网站设置为多语言版本可参考如下设置

1
2
3
language:
- zh-Hans
- en

菜单

博客的菜单的功能菜单是可以自定义的。菜单的配置在主题配置文件件中。

1
2
3
4
5
6
7
8
menu:
  home: /                    #首页
  categories: /categories/   #分类
  about: /about/             #关于
  archives: /archives/       #归档
  tags: /tags/               #标签
  #sitemap: /sitemap.xml
  #commonweal: /404/

系统初始时，只有home、archives、tags，其它菜单需要手动将注释去掉。并增加相应的页面。

tags页面添加

执行下面命令

1
hexo n page tags

打开source\tags目录下的index.md,添加 type参数

1
2
3
4
5
---
title: tags
date: 2017-09-04 20:14:29
type: "tags"
---

categories页面添加

执行命令

1
hexo n page categories

打开source\categories目录下的index.md,添加 type参数

1
2
3
4
5
---
title: tags
date: 2017-09-04 20:14:29
type: "categories"
---

about页面添加

执行命令

1
hexo n page about

菜单图标

menu_icons配置结点可以设置菜单是否带图标。图标使用的FontAwesome字体

1
2
3
4
5
6
7
8
9
10
11
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat

风格

Next 提供了三种风格供选择

1
2
3
scheme: Muse
#scheme: Mist
#scheme: Pisces

版权信息

版本信息默认是关闭的，可以通过设置enable来打开版本信息。

1
2
3
4
5
# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

插件安装

百度统计

注册百度统计账号

在网站列表中新增网站，填写信息保存后。点击获取代码。将hm.js?后面的ID复制到主题配置文件中

1
2
# Baidu Analytics ID
baidu_analytics: 59***************

保存完毕后，可以执行命令，重新生成发布。

1
hexo g -d

发布成功后，可以到百度统计点击首页代码状态进行测试，测试成功会提示代码安装正确。

Local Search搜索

1 在根目前安装 hexo-generator-searchdb,安装时要使用管理员权限运行命令行工具，切记!!!!!

1
npm install hexo-generator-searchdb --save

2 编辑站点配置文件，添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3 编辑主题配置文件,启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true

百度分享

百度分享需要修改两个地方,这个地方不要按Next官网的教程来，官网的教程有问题。

网站配置文件任意位置 添加

1
baidushare: true

主题配置文件 

1
2
baidushare:
  type: button

配置成功后重新生成文件就可以了，但是发布到github后发现分享不显示。百度后了解是因为百度分享不支持https,参考这两篇文章搞定该问题

百度分享不支持https的解决方案

Hexo+Github搭建个人博客(三)

Gitment 文章评论

添加文章的评论模块，官网提供的几个都得翻墙才能使用。国内的多说、网易云都停止服务了。最终作者选择了Gitment添加评论支持。添加的具体过程参考
为 hexo NexT 添加 Gitment 评论插件
Gitment：使用 GitHub Issues 搭建评论系统
作者花了大概二个小时才将评论模块搭建好。。多参考第一篇文章就可以了，主要是作者对Hexo还不太了解。

打赏功能

1 设置主题配置文件

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.png

2 制作支付图片并上传到主题目录next\source\images文件夹中

3 修改打赏文字，我下载的主题默认的文字是英文的，修改主题目录中的next\layout_macro\reward.swig 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>{{ theme.reward_comment }}</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>赏</span>
  </button>
  <div id="QR" style="display: none;">
    {% if theme.wechatpay %}
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
        <p>微信打赏</p>
      </div>
    {% endif %}
    {% if theme.alipay %}
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
        <p>支付宝打赏</p>
      </div>
    {% endif %}
    {% if theme.bitcoin %}
      <div id="bitcoin" style="display: inline-block">
        <img id="bitcoin_qr" src="{{ theme.bitcoin }}" alt="{{ theme.author }} Bitcoin"/>
        <p>Bitcoin</p>
      </div>
    {% endif %}
  </div>
</div>

404

在主题目录themes\next\source中创建404.html 内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="/"
        homePageName="返回博客主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

总结

折腾了整整一天才将上文的内容搞定，感觉非常的满足。看了一些大神的博客，绝定在对自己的博客进行美化。美化完毕后就不在折腾了。进入技术学习阶段，具体学什么还没想好。但感觉非常好，希望可以一致持续下去。

参考链接

坚持原创技术分享，您的支持将鼓励我继续创作
显示 Gitment 评论