我的网站的搭建配置

我的这个网站使用 Github Page + hexo 搭建的，使用了 NexT 的主题。更多的个性化设置将在下文介绍。

域名 https 支持

参考了 Github 官方博客 Custom domains on GitHub Pages gain support for HTTPS(2018/5/1)

总结步骤：

① 在域名解析商添加解析到 username.github.io 的 CNAME 记录，等待解析完成

② 在 hexo 博客 sources 文件夹下添加 CNAME 文件，内容为你的域名

文件位置：~/blog/sources/CNAMElink

thenorthsea.cn

③ 进入 GitHub 博客所在的 repository，点击 Settings ，勾选 GitHub Page 章节下的 Enforce HTTPS 按钮

设置网站背景

首先，选择你的背景图片，放在根目录下的 themes/next/source/images/background.jpg。

然后，工程目录下的 themes/next/source/css/_custom/coustom.styl 文件添加代码:

// Custom styles.
@media screen and (min-width:1200px) {

    body {
        background-image:url(/images/background.jpg);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 50%;
        background-size: cover;
    }

    #footer a {
        color:#eee;
    }
}

评论功能

LiveRe (正在使用)

参考自 网易云跟帖关闭服务后转移到来必力

1. 注册 LiveRe 账号
2. 新建项目，获得 ID
3. 将 ID 填写到 NexT 主题配置文件

valine

参考自 为你的Hexo加上评论系统-Valine

步骤总结为：

1. 注册 LeanCloud，新建应用，获得 appid 和 appkey
2. 编辑主题配置文件
3. LeanCloud 安全中心中添加 Web 安全域名

NOTE： 注意 next 主题的 _config.yml 配置文件中是 app_id 还是 appid，app_key 还是 appkey，不同版本中不同。

文章阅读统计： leancloud

参考了 Hexo博客-NexT主题：使用leancloud进行页面访客统计

步骤总结为：

1. 配置 LeanCloud 获取 appid 和 appkey，创建 Counter
2. 配置 Hexo
3. LeanCloud 安全中心中添加 Web 安全域名

搜索功能： Local Search

参考了 Local Search

步骤总结为：

1. 安装 hexo-generator-searchdb
2. 编译站点配置文件
3. 编辑主题配置文件

五星好评

参考自 大佬 @reuixiy

① 打开主题配置文件，找到 rating 属性

文件位置：~/blog/themes/next/_config.yml

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:     
  color: f79533

② 打开注释中的网页，注册账号，填写博客信息，左上角有个 ID，填写进主题配置文件

③ 修改界面，添加文字说明：

文件位置：~/blog/themes/next/layout/_macro/post.swig

    {% if theme.rating.enable %}
    <div class="wp_rating">
+      <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;看完记得五星好评哦亲&lt;)</div>
    <div id="wpac-rating"></div>
    </div>
    {% endif %}

④ 检查生成的网页，如果留白不合适，可以执行修改，比如我的修改：

文件位置：~/blog/themes/next/source/css/_custom/_custom.styl

+	// 为五星好评留出空间
+	.post-nav {
+ 	   margin-top: 30px;
+	}

文章置顶

参考了 大佬 @reuixiy 的博客

NexT 主题默认的功能有 bugs，需要做一些修改：

1. 移除默认安装的插件

   npm uninstall hexo-generator-index --save

2. 安装新插件

   npm install hexo-generator-index-pin-top --save

3. 在需要指定的文章的 Front-matter 加属性 top: 2，数值越大置顶越高

写作样式

FontAwesome 图标

FontAwesome 样式可以直接在 markdown 文件中使用。下面给出一些例子，更多请看官网的使用示例。

<i class="fa fa-pencil" aria-hidden="true"></i>  铅笔
<i class="fa fa-car" aria-hidden="true"></i>  汽车
<i class="fa fa-coffee" aria-hidden="true"></i>  咖啡
<i class="fa fa-cube" aria-hidden="true"></i>  立方
<i class="fa fa-cube fa-lg" aria-hidden="true"></i>  立方 放大 33%
<i class="fa fa-cube fa-2x" aria-hidden="true"></i>  立方 两倍大

铅笔
汽车
咖啡
立方
立方 放大 33%
立方 两倍大

代码块的标题设置

​```diff 文件位置：~/blog/_config.yml
highlight:
  enable: true
  line_number: true
# 代码自动高亮
-  auto_detect: false
+  auto_detect: true
​```

文件位置：~/blog/_config.yml

highlight:
  enable: true
  line_number: true
# 代码自动高亮
-  auto_detect: false
+  auto_detect: true

NexT 主题自带的 note 样式标签

参考自 Next 官方文档：内建标签#BC

<div class="note class_name"><p>Content (md partial supported)</p></div>
// or
{% note class_name %} Content (md partial supported) {% endnote %}

class_name 支持以下 6 种：

• default
• primary
• success
• info
• warning
• danger

default

primary

success

info

warning

danger

danger

danger no-icon

NexT 文本居中的引用样式

参考自 Next 官方文档：内建标签#文本居中

示例：

{% cq %}
北冥有鱼，其名为鲲；化而为鸟，其名为鹏。
{% endcq %}

北冥有鱼，其名为鲲；化而为鸟，其名为鹏。

NexT 超宽图片

参考自 NexT 官方文档：内置标签#超宽图片

{% fi /images/theNorthSea.jpg, 北冥, "北冥有鱼，其名为鲲；化而为鸟，其名为鹏" %}

// 或者采用 HTML 来写
<img src="/images/theNorthSea.jpg" class="full-image" />

大佬的优化参考（强烈推荐阅读）

1. 打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化

2. 2017年最新基于hexo搭建个人免费博客——自定义页面样式一