记录生活中的点点滴滴

0%

手把手教你搭建你的个人博客网站（保姆级教学）

发表于 Valine：

这篇文章主要介绍如何从零开始搭建我们的个人博客网站。搞技术写博客是必不可少的，也许你喜欢在CSDN上写你的博客、或者简书、掘金等等平台，但如果再加上我们的个人博客网站，那肯定是锦上添花。我用的 nginx 服务器和 hexo 博客框架， hexo 是一个很好、很轻量级的博客框架，适合个人写写博客日记等。搭建完成后，我们只需专注于写好我们的markdown文件，服务器那边会自动去渲染页面，很nice！完完全全的从零开始，博主已经把坑都走完了，来，上车！

前奏——在你的服务器上安装nginx和hexo

我们已经买了服务器，但是通过域名也访问不了它，我们还需借助 nginx 这个web服务器，这样我们就可以直接通过域名访问它了，先安装一下 nginx 服务器。

在此之前，我们要用一个软件去连接我们的服务器终端，我比较推荐 putty 这个软件，它很小，只要800k，下载不用安装直接就可以用了，附上下载地址 putty 打开输入我们的服务器ip就可以了，然后再终端输入root和密码就可以登进去了。

CentOS 7安装nginx

  1. 先下载相关包依赖

    1
    2
    yum -y install gcc gcc-c++ autoconf automake libtool make cmake
    yum -y install zlib zlib-devel openssl openssl-devel pcre-devel

  2. 切换到一个目录，比如我的是/root/download下，下载解压并编译安装nginx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # 在root目录下创建一个文件夹download，以后下载的东西就存在这个文件夹下面
    mkdir download
    #切换到下载的目录
    cd download/
    #下载压缩包
    wget http://nginx.org/download/nginx-1.15.7.tar.gz
    #解压
    tar -zxvf nginx-1.15.7.tar.gz
    #进入nginx目录
    cd nginx-1.15.7
    #下面三个指令都是安装，具体什么意思也比太明白，反正这样安装就可以使用SSL解析了
    #第两个指令执行起来都很炫酷，哈哈
    ./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre
    make
    make install

  3. 默认会安装到/usr/local/nginx/下，下面是常用的命令

    还有一件很重要的事情就是我们阿里云服务器的80端口开放一下，不然怎么搞也出不来，这是个坑。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #启动nginx服务
    /usr/local/nginx/sbin/nginx
    #暂停nginx服务
    /usr/local/nginx/sbin/nginx -s stop
    #重启nginx服务
    /usr/local/nginx/sbin/nginx -s reload
    #查看nginx版本信息
    /usr/local/nginx/sbin/nginx -v
    #测试配置文件是否正常
    /usr/local/nginx/sbin/nginx -t

    如果出现80端口被占用，执行netstat -lnp|grep 80来找到占用80端口的进程，并kill它，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    [root@instance-uc9mvl4p nginx]# netstat -lnp|grep 80
    tcp6       0      0 :::80                   :::*                    LISTEN    4505/node
    udp        0      0 0.0.0.0:68              0.0.0.0:*                           805/dhclient
    [root@instance-uc9mvl4p nginx]# kill 4505
    [root@instance-uc9mvl4p nginx]# netstat -lnp|grep 80
    udp        0      0 0.0.0.0:68              0.0.0.0:*                           805/dhclient
    [root@instance-uc9mvl4p nginx]# /usr/local/nginx/sbin/nginx
    [root@instance-uc9mvl4p nginx]#

    其中测试nginx配置是否正常在安装SSL中会用到，如果配置文件正常的话会出现下面的信息：

    1
    2
    3
    [root@iZbp1b44670a4o3ks27kznZ nginx]# sbin/nginx -t
    nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
    nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

  4. 安装完成后需要配置nginx服务器，配置文件在nginx下的conf目录中的nginx.conf，就是上面那个测试配置文件是否正常指令后输出的第一句话里面那个is ok的文件。我们需要把它第二行注释去掉，把user后面改为root，把http server的server_name后面改为我们的域名，location / 下的root后路径改为我们页面的public路径。具体如下代码： 

    1
    2
    3
    #前几行
    user  root;
    worker_processes  1;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #http的server
    server {
            listen       80;
            #我的域名为www.gaosong.site
            server_name  www.gaosong.site;

            location / {
            	#我的博客的公共目录是/root/blog/public
                root   /root/blog/public;
                index  index.html index.htm;
            }
            
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
            
        }

这样就配置好了nginx，最后最后关键的一步，一定一定一定要重启nginx，不然我们访问我们的域名界面还是welcome to nginx。

重启之后我们在浏览器输入域名就能访问到我们的博客主页了。

ok，nginx服务器已经搭好了，下面我们要开始 hexo 的安装使用了，但是在这之前，还得装一下 git 和 nodejs 这两个东西，很简单的操作。

CentOS 7安装nodejs

1
2
3
4
5
6
7
8
9
10
11
12
13
# 在root下进入download目录下
cd download/
# 从官网下载nodejs到本地
wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.gz
# 解压nodejs
tar -zxvf node-v10.16.3-linux-x64.tar.gz
# 设立软连接，node和npm
ln -s ~/download/node-v10.16.3-linux-x64//bin/node /usr/bin/node
ln -s ~/download/node-v10.16.3-linux-x64//bin/npm  /usr/local/bin/npm
# 检查是否安装成功
node -v
# 若输出 v10.16.3，说明node软连接设置成功，node安装成功，下面的npm同理
npm -v

CentOS 7安装git

1
yum install git

上面确实很简单，让我们开始建 hexo 这个博客框架吧。

CentOS 7安装hexo并初始化

1
2
3
4
5
6
7
8
9
10
# 安装hexo脚手架
npm install -g hexo-cli
# 创建一个文件夹，专门作为我们的网站博客总文件夹
mkdir blog
# 进去主文件夹
cd blog/
# 在主文件夹下初始化一下hexo，如果提示没找到hexo命令，执行一下  ln -s  /root/download/node-v10.16.3-linux-x64/lib/node_modules/hexo-cli/bin/hexo /usr/bin/hexo  设置软连接
hexo init
# 生成一下页面
hexo g

最后去配置一下nginx服务器并重启一下就可以访问了。

间奏——配置hexo并教你在hexo上面写文章

hexo已经装成功了，我们也可以通过域名访问到我们的博客网站了，但是见面好像有点奇怪，我们也不会用这个玩意，下面我们来配置一下它，并学会用它写我们的博客吧，坚持住，兄弟！

Hexo博客常用配置及命令

常用命令

1
2
3
4
5
6
# 创建新的页面，xxx填入我们的标题，会创建对应的xxx.md文件，hexo会帮我们自动转换成html代码显示在博客网站上
hexo new xxx
# 生成页面，每次创建或修改md文件后，需要进行生成，网站才会变化
hexo g
# 清除缓存文件，在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。
hexo clean

hexo博客的项目配置文件在我们的blog主目录下的 _config.yml 文件，用vim打开并进行简单的配置

1
2
3
4
5
6
7
8
# Site
title: Sunの博客
subtitle: 记录生活中的点点滴滴
description: 直到这一刻微笑着说话为止，我至少留下了一公升眼泪
keywords:
author: Gao Song
language: zh-Hans #主题语言
timezone: Asia/Shanghai #中国的时区

hexo博客安装启用Next主题

下载主题
1
2
cd blog     #cd到我们的博客主文件夹中
git clone https://github.com/iissnan/hexo-theme-next themes/next #从git中下载next主题文件
启用主题
1
2
3
vim _config.yml  #vim打开hexo博客的配置文件
## 找到theme字段，后面改成next
theme: next

侧边栏配置

1
2
# 先打开主题配置文件
vim themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
  # ||前面不要用空格，不然页面网址后面会多一个 %20
  home: /|| home    # 首页
  about: /about/||user    # 关于页面
  tags: /tags/|| tags   # 标签
  categories: /categories/|| th    # 分类
  archives: /archives/|| archive   # 归档
  #schedule: /schedule/ || calendar   # 日历
  #sitemap: /sitemap.xml || sitemap   # 站点地图，供搜索引擎爬取
  #commonweal: /404/ || heartbeat     # 腾讯公益404
  
# Schemes 主题样式，推荐最后一个
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
配置关于页面
1
2
3
4
5
6
# 创建一个新页面--“about”，注意是页面，不是博客md文章
hexo new page "about"
# 执行完会提示如下
INFO  Created: ~/blog/source/about/index.md
# 我们打开这个md文件，写入我们的“关于”界面md即可，如下
vim ~/blog/source/about/index.md
1
2
3
4
5
6
7
---
title: 关
date: 2020-07-04 23:45:35
---
个人介绍：
姓名：高松
地区：浙江杭州
1
2
# 生成页面
hexo g

配置标签页面
1
2
3
4
5
6
# 创建一个新页面--“tags”
hexo new page "tags"
# 执行完会提示如下
INFO  Created: ~/blog/source/tags/index.md
# 我们打开这个md文件，写入我们的“关于”界面md即可，如下
vim source/tags/index.md

打开文件把第二行title的值修改为标签，并在date后面添加一行：type: tags

为什么要添加这一行？如果不添加这一行的话，它将不会自动显示我们的文章标签

1
2
3
4
5
---
title: 标签
date: 2020-07-05 10:20:59
type: tags
---
1
2
# 生成页面
hexo g

配置分类页面
1
2
3
4
5
6
# 创建一个新页面--"categories"
hexo new page "categories"
# 执行完会提示如下
INFO  Created: ~/blog/source/categories/index.md
# 我们打开这个md文件，写入我们的“关于”界面md即可，如下
vim source/categories/index.md

打开文件把第二行title的值修改为标签，并在date后面添加一行：type: categories

1
2
3
4
5
---
title: 分类
date: 2020-07-05 10:24:21
type: categories
---
1
2
# 生成页面
hexo g

怎样在我们创建的博客中使用标签与分类？

我们每创建一篇博客，当我们用vim打开，它的顶部会有一些title、date、tags等信息，这就是使用的方法。

1
2
3
4
5
# 创建一个测试博客md文件
hexo n 测试
# 会提示 INFO  Created: ~/blog/source/_posts/测试.md
# 用vim打开这篇博客
vim ~/blog/source/_posts/测试.md
1
2
3
4
5
6
7
8
9
---
title: 测试
date: 2020-07-05 10:51:58
tags:
- 测试
- Java
categories: 
- Java
---

如上面所示，标签tags后面我们设置两个标签，分类categories后面分到了Java。看一下实际效果图

但是还有一个小问题，就是我们每次创建新的博客文章的时候，它顶部默认不会有categories这一项，我们要自己去主动写，能不能每次创建后它自动就有呢？

答案是可以的，我们可以修改默认的post模板文件即可。

1
2
# 他就在我们的博客主目录下的scaffolds/post.md
vim scaffolds/post.md
1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

把模板修改成这个样子就可以了！

添加我们的友链

侧栏最下面显示我们的Github或者CSDN账号这些社交账号，会让访客对我们有更深入地了解等，这个感觉还是挺好的。它直接在我们的主题配置文件里面配置就可以了，先用vim打开， vim themes/next/_config.yml ,再搜索 social 关键词，把注释去掉并做如下配置，我就填写我自己的网址了，小伙伴可以根据自身情况修改

1
2
3
4
5
6
7
8
9
10
11
12
social:
  GitHub: https://github.com/gs-ux || github
  #E-Mail: mailto:gaosongsite@foxmail.com || envelope
  CSDN: https://blog.csdn.net/weixin_43742958 || book 
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

CSDN那一行是我自己手动添加的，后面的book是图标样式

解决一下文章太长页面不美观的问题

如果我们博客的文章太长，那么它会在我们的网站主页上显示过长，影响用户体验，所以我们还得学会让那些长的博客显示个开头，再来个阅读全文的提示，提升用户体验。

其实很简单，我能只需要在我们要截断的markdown文件内部添加一行即可，它就会截断，上面的博客会显示，下面的会给用户提示阅读全文。

1
<!--more-->

就是这一行，我们做一下测试，创建一篇博客，并在里面写入文字，在中间添加上面那一行。

删除博客

可能我们创建错了，或者别的原因，肯定会需要删除我们已经创建的博客文章，怎么做呢？

这个应该挺简单的，我们其实只需要把我们写的Markdown文件删除即可，这些文件默认放在我们的博客主目录下的 source/_post/ 下面，我们只需要执行 rm -rf xxx.md 就可以了，然后记得 hexo g 一下，刷新我们的网站就可以看到已经没有了我们删除那篇博客了。

小伙伴们如果还能看见的话，可以 先hexo clean 一下，清一下缓存什么的，在重新生成一下页面。

解决博客中插入图片问题

写博客肯定需要插一些图片进去，由于hexo比较轻量级，没有后台管理界面，我们需要通过一个插件来完成插入图片的功能。

对了，还有一件事，就是我们可以用 PuTTY 这个软件来连接我们的服务器，进行一些操作，但是如果我们要向服务器里面上传一些文件，如图片等，我们需要借助另外一个软件—WinSCP，下载之后输入我们的服务器ip和用户名及密码登录进去，就可以看到我们服务器的所有文件了。可以在我们本机电脑上，把图片拖拽到服务器中。

  1. 设置站点配置文件的 post_asset_folder: false 改为 true

    1
    vim _config.yml
    1
    2
    # 表示我们每创建一篇博客时会同时在_post文件夹下面创建一个同名的文件夹
    post_asset_folder: true

  2. 安装插件

    1
    npm install https://github.com/CodeFalling/hexo-asset-image -- save

  3. 创建一篇新的博客–图片测试hexo n 图片测试，它会在source/_post/下面也会有一个图片测试的文件夹，我们通过WinSCP软件把一张图片传进去，名字最好写的简单点，就比如 1.png

把这张图片传入进去之后，我们在 图片测试.md 中插入图片地址直接写1.png 就可以了！如下面我写的

1
2
3
4
5
6
7
8
---
title: 图片测试
date: 2020-07-05 13:21:59
tags:
categories:
---
图片测试
![](1.png)

这样的话我们以后通过markdown编辑器写完博客后，记得要把图片传到同名的那个文件夹里面，然后图片地址直接写成 1.png 、2.jpg 等等什么的就可以了！

添加评论功能

参考我的另一篇博客：hexo的next主题添加评论

添加搜索功能

网站添加搜索功能很有利于我们查找我们以前写过的博客文章等，这样无论对用户还是我们自己都是很友好的。

先下载一个插件

1
npm install hexo-generator-searchdb --save

打开hexo站点配置文件 vim _config.yml ，在文章末尾添加如下几行

1
2
3
4
5
6
# 搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

再打开主题配置文件 vim themes/next/_config.yml ，搜索 local_search ，后面设置为true，启用搜索功能

设置网站的图标Favicon

先把我们自己要设置的图标图片用WinSCP传到服务器博客目录下 themes/next/source/images/ 目录下，我的名字为 icon.png，打开主题配置文件 vim themes/next/_config.yml 搜索 favicon 后面那些跟上我们向 images 和它目录下的图片名称，配置完成后重新生成一下页面即可 hexo g 

1
2
3
4
5
6
7
favicon:
  small: /images/icon.png
  medium: /images/icon.png
  apple_touch_icon: /images/icon.png
  safari_pinned_tab: /images/icon.png
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

尾奏——博客网站的美化（直接开花）

恭喜坚持过来，现在我们已经会用 hexo 写文章了，但是网站有一说一，有点太素了，下面我们会讲一些简单的美化，只能算是入门吧，博主也只是个小白，也并不会美化的多么好看，但足够我们入门了。还有一点就是博客网站是让我们来写博客的，我们一定不能忘记了它的本质作用呀！

鼠标点击特效

1
2
3
4
5
6
# cd到next主题的js代码src中
cd themes/next/source/js/src
# 创建一个点击特效的js
touch clicklove.js
vim clicklove.js
# vim打开这个js，填入以下代码
1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

注意一点就是复制过去的话，我这边不知道什么原因，开头会缺少 !functio，小伙伴们注意看一下，开头如果缺少点单词，我们自己注意补上。我找了半天才发现这个原因！

1
2
3
4
5
# cd到next目录下
cd ../../../
# 打开这个文件
vim layout/_layout.swig
# 在这个文件末尾添加以下js代码
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

这样就可以了，我们cd到主目录下，然后hexo g生成一下

侧栏显示头像

首先我们把我们的头像图片文件传到服务器里面，放在博客下的 /themes/next/source/images/ 下面，我放的是 gs.png ,然后打开主题配置文件 vim themes/next/_config.yml ，搜索 avatar ，改为如下

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar:  /images/gs.png

上面的那些注释不用管，注意avatar后面的设置，我的是gs.png。

这样就可以了，但是默认是正方形的，有点难看，如果想变成圆形的接着看下面的。

1
2
# vim打开头像的css代码块，后面添加border-raduis为50%即可
 vim themes/next/source/css/_common/components/sidebar/sidebar-author.styl

打开第一个类 .site-author-image 就是头像框的类，我们把css代码设置成如下就行，其实就是在后面添加border-raduis为50%。

1
2
3
4
5
6
7
8
9
10
11
12
13
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

// 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

记得清一下缓存 hexo clean ，再重新生成一下博客 hexo g 。

博客底部美化

删除Hexo和Next的友链

默认博客底部会显示这些东西，感觉有点多余，我们可以通过修改主题配置文件来不让这个友链显示，打开主题配置文件 # vim themes/next/_config.yml ，搜索 powered ，把三个 true 全部改为 false ，重新生成页面就可以了。

1
2
3
4
5
6
7
powered: false

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: false
底部增加人数与阅读量

编辑主题配置文件 vim themes/next/_config.yml ，搜索 busuanzi_count ，做如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 本文总阅读量
  page_pv_footer: 次

还要去修改一下一个html文件代码，因为默认那个不蒜子域名不对，更换成别的域名了。

1
2
# 打开这个html文件
vim themes/next/layout/_third-party/analytics/busuanzi-counter.swig

找到第三行的那个 <script>xx</script> 代码块，如下

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

修改成下面的代码块

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

这样的话，网站下面就会有 本站访问数 x 人 和 本站总访问量 x 次，还会在每一篇博客上面显示阅读量。

重新生成一下网站就可以看到了，效果如下所示

代码块美化

改变代码块背景颜色

默认代码块背景颜色为白色，我们也可以把它设置为暗黑色等，它也可以在主题的配置文件下面设置。

打开主题配置文件 vim themes/next/_config.yml ，搜索 highlight_theme ，默认为normal，还有night等，小伙伴们可以都试一试，记得改完之后，要清一下缓存 hexo clean ，再重新生成一下 hexo g

1
2
3
4
5
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night  # normal | night | night eighties | night blue | night bright
增加一个代码块复制的按钮

改变博客内链接的样式

我们写博客内默认的链接样式，说实话，有点丑，我们可以将它修改一下，变得好看一些。

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

颜色可以自定义，记得清一下缓存 hexo clean 和重新生成一下页面 hexo g

添加字数统计及阅读时长

先在博客根目录安装一个插件

1
npm install hexo-wordcount --save

打开主题配置文件 vim themes/next/_config.yml ，搜索 post_wordcount ，按如下设置

1
2
3
4
5
6
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

这样其实就可以了，每篇博客最上面都会显示一下字数统计和阅读时长

网站最下面也会显示博客总字数，但是这个是英文的，底部基本上都是中文，这样不太美观，我们可以通过下面的操作自定义显示的文字，先看一下效果

先打开底部模板html文件， vim themes/next/layout/_partials/footer.swig ，搜索 post-meta-item-text ，这是一个span标签，原来是这样的 

1
<span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>

我们把它里面内容改成如下

1
<span class="post-meta-item-text">博客全站总字数&nbsp;</span>

再看一下这个文件，这个span后面还有个span标签，有个title属性为 post.totalcount ，我们在这个span的结束标签后面新增加一行，再写入一个span标签，对应网站上就是为了显示 字 这个字，新添加的span标签如下

1
<span class="post-meta-item-text">&nbsp;字</span>

为了让小伙伴们能看清楚添加的位置，我放一张截图上来

最后还是老样子，记得清一下缓存和重新生成一下页面即可

添加顶部加载条

先看一下效果图

具体实现方法

打开 /themes/next/layout/_partials/head.swig 文件，添加红框上的代码，就是第三行后面，我们新插入一行，添加如下代码

1
2
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码，接在我们刚添加的两行代码后面

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

设置背景图片

我们可以通过简单的html、css代码为网站设置背景图片，这个取决于我们个人吧，设置了背景图片的话，网站的响应时间肯定会增大，影响用户体验。这里也写一下吧。

首先通过WinSCP向博客目录下 /theme/next/source/images/ 目录下传入我们的背景图片，暂且为它起个名字– bg.jpg ，打开配置的css文件， vim themes/next/source/css/_custom/custom.styl ，在最后面添加下面一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//背景图片
body {
  background:url(../images/bg.jpg) no-repeat center center;
  background-size:cover;  /* 让背景图基于容器大小伸缩 */
   background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    //此条属性必须设置否则可能无效/
   background-color: #DCE2F1;   /* 设置背景颜色，背景图加载过程中会显示背景色 */
}
//透明度修改
.main-inner{
	opacity: 0.8;
}
.header-inner{
	opacity: 0.8;
	z-index: 10;
}

清除一下缓存，重新生成一下网站即可，要做好等待一段时间的准备，这个还是挺影响用户体验的！

到此应该结束了，谢谢您的阅读，这个过程可能会出现很多问题，但不用怕，多多百度，去上网查看问题并解决它们，既能提升我们的满足感，也会学到不少东西，人生本来就不是一条直线，加油吧兄弟！这上面如果出现了错误，或者小伙伴们有解决不掉的问题，欢迎与博主沟通交流，一起进步，关于界面有我的联系方式。