版本号：

Hexo：5.4.1

Next：8.9.0

寒假在家闲来无事，便萌生了搭个人博客的想法，一方面是觉得确实有必要搭个个人主页，另一方面是感觉这样子很cooooool。但作为一个只会面对百度和google编程的天文系学生，实在是一点儿前端相关的知识都没接触过，幸好有hexo这种现成的框架，可以直接拿来用。这几天磕磕绊绊踩了不少坑后总算把这个blog搞得有模有样了，把踩到的坑记录下来，希望能对后来人有一点帮助。

笔者选用的主题的是大名鼎鼎的Next，有许多功能是现成的，可以直接拿来用，如评论系统、访客统计和本地搜索。

网页搭建

笔者选用的方法是将Hexo生成的静态网页托管在Github仓库上，具体教程很容易搜索到，笔者使用的是以下这篇。

GitHub+Hexo 搭建个人网站详细教程 - 知乎 (zhihu.com)

注意在cmd中对网页进行操作时，要进入到对应的blog文件夹中（使用“cd blog”命令）。

个性化配置

接下来是笔者在对个人博客进行个性化配置中踩到的坑的记录。

Next的文档

如果直接搜索Next的文档，大概首先看到的会是这样网页：

NexT 使用文档 (iissnan.com)

那里面的步骤介绍很详细，而且还是中文，照着上面的教程一步步来完全没问题，但这个文档的最新更新日期是2017年12月。最新的文档应该是下面这个：

Documentation | NexT (theme-next.js.org)

在网页内搜索即可得到相应的教程。

这也说明，因为Next的版本迭代比较快，很多网上与此相关的教程已经与当前Next版本不适配。在查询教程时注意自己所使用的Next与Hexo版本号和作者列出的版本号的差别。如果差别较大，建议先去document中查询Next是否已支持相关功能。

url设置

在博客配置文件中找到已下这几行：

1
2
3
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://example.com

将url这一项修改为博客对应的地址。

笔者就是因为忘了这一个设置，在后续配置中遇到了一堆奇奇怪怪的问题……

中文乱码问题

在配置博客相关信息时，如果输入中文：

1
2
3
4
5
6
7
8
# Site
title: 中文博客标题
subtitle: '这是中文'
description: '这也是中文'
keywords:中文关键词
author: 中文名
language: zh-Hans
timezone: 'Asia/Shanghai'

会发现在网页中变成了乱码。这应该就是博客配置文件的编码问题，将编码改为UTF-8就可以解决了。

图片上传

笔者选用的图片上传方法是云图床，即将图片上传到对应云盘，通过在文章中插入图片对应url的方法插入图片，以节省博客的加载时间。

笔者首先选用了七牛云，但它使用的协议是http，在使用https协议的博客中会被拦截，后面改用Image Upload - SM.MS - Simple Free Image Hosting解决了图片上传问题。

评论系统配置

笔者选用的评论系统是Utterances，该系统配置简单，要求用户使用Github账户登录后才可进行评论，相比Gitalk可自动进行初始化，且要求的权限较少。

配置步骤如下：

  1. 进入GitHub Apps - utterances中给予utterances相应仓库的授权，即使用该仓库的issue作为博客的评论系统。如笔者直接设置的是博客对应仓库。
  2. 在blog文件夹下安装相应插件：
1
npm install --save github:theme-next/hexo-next-utteranc

  1. 进入主题配置文件中，next已预先配置好了utterances，只需找到以下部分修改相应选项即可：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    comments:
      # Available values: tabs | buttons
      style: tabs
      # Choose a comment system to be displayed by default.
      # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
      active: 'utterances'
      
      ....
      
      # Utterances
    # For more information: https://utteranc.es
    utterances:
      enable: true
      repo: DenekoW/DenekoW.github.io
      #这里按照该格式填你已授权的仓库路径。
      # Available values: pathname | url | title | og:title
      issue_term: pathname
      # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light 这些都是评论系统的不同主题，笔者还没尝试过。
      theme: github-light
      cdn: https://utteranc.es/client.js

博客背景设置

单是Next的简约黑白背景可能会有些单调，笔者便尝试更换背景。

更换背景的原理是修改网站对应的css文件，所以只要在对应css文件中写入自定义css样式就行。

  1. 打开博客网页，按F12/右键选择“检查”得到当前网页“body”项对应的css设置，如笔者查询到的是：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    body {
        color: var(--text-color);
        font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 1em;
        line-height: 2;
        min-height: 100%;
        position: relative;
        transition: padding 0.2s ease-in-out;
    }

  2. 在blog文件中找到’blog/theme/source/css/main.styl’文件，在其末尾直接添加上述代码，并加入关于背景设置的相关css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body{
    color: var(--text-color);
    font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 1em;
    line-height: 2;
    min-height: 100%;
    position: relative;
    transition: padding 0.2s ease-in-out;
    background:url(/images/background.jpg);#此处为背景图片的路径
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: 100% 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
}
  1. 考虑到当前在网页上呈现的效果为博客文章将背景直接截断，我们可以适当调整透明度，使读者可以透过文章看到背景，使背景的设置更加自然。只要在上述代码后面直接添加下面这几行即可：
1
2
3
4
// 修改主体透明度
.post-block {
	background: rgba(255,255,255,0.7) none repeat scroll !important;
}

笔者查询到的很多教程是直接新创建一个style.styl文件，在主题配置文件中将#style: source/_data/styles.styl 取消注释。该做法的问题是这个styles文件里不包括原来网站的css设置，而在main这个css文件中把style文件import进去后，styles里的设置会取代原来的设置，导致出来的结果里没有原来的css配置。

参考教程：

Next主题添加背景图片_爱睡懒觉的程序员的博客-CSDN博客

本文只记录了笔者在进行配置过程中参考搜索得到的教程遇到的问题，更多的个性化设置可参考网络上其他教程。