devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Hexo搭建个人博客网站_hexo utterances

作者：运维做开发 | 2024-07-20 10:28:59

赞

踩

hexo utterances

文章目录

本文较长,也是楼主呕心沥血参考网上各种教程加上自己踩坑完成的,只希望能对你有所帮助。

  • 另外文章长达两万字，大家可以则需阅读。
0.首先介绍一下hexo是怎么搭建的博客?

本地渲染好 HTML 后，上传到服务端，代表作品就是 hexo。
我们在本地写好 markdown 之后，在本地将 markdown 渲染成 HTML，然后将渲染好的 HTML 上传到服务端。

我这里采用hexo+icarus实现的

一、搭建

用 Hexo 搭建，要是有一点点前端 Node 的使用经验更佳，没有当然也没关系，因为与之相关的命令并不多。使用 Hexo 需要提前在电脑上安装好 Node 和 Git ，安装成功后，就可以开始 Hexo 的安装了。步骤如下：
1.安装hexo

npm install -g hexo-cli

  • 1

2.在本地创建一个博客目录

hexo init blog

  • 1

上面这个命令执行完后，会在本地创建一个 blog 目录，这里边就是独立博客所必须的一些文件，然后进入到这个目录中，执行 npm install 命令，安装相关的依赖。
3.安装完成后，会生成如下目录：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这里几个文件/文件夹，我们先来关注其中两个 _config.yml 和 themes 目录， _config.yml 文件中，我们可以做网站的一些基本配置，例如 网站的 title，描述，关键字、图标等，这些配置大都见名知意。如下：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: '王硕个人博客' 
subtitle: '王硕个人博客' 
description: '发表一些技术相关的文章以及自我反思等' 
keywords: 'java,王硕,wsuo,springboot' 
author: '王硕' 
language: zh-CN 
timezone: ''


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

配置完成后，定位到 blog 目录，执行 hexo s 就可以在本地启动项目了，启动成功后，浏览器中输入 http://localhost:4000 就可以看到网站了。

可以参考hexo命令

但是我在这里遇到了两个问题

1.命令行报错:YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 10, column 7:

解决方案: 由于是yml文件,在每一个冒号后面都要加空格,我有一个忘记加了没看到,所以报错

title: '王硕个人博客' 

  • 1

就是上面的冒号后面要加空格

2.登陆博客之后中文乱码

解决方案: 将那个yml文件的编码改成UTF-8格式
我用的是edit-plus打开的,右下角可以直接改,一般的编辑器都可以改的

好了,到目前为止算是有一个有模有样的博客网站了

二、修改主题

一般来说，主题都会自己配置一个，个人感觉 Hexo 的生态还是比较丰富的，有很多可选的主题，Hexo 默认使用的主题是 landscape 。博客在本地跑起来之后，接下来就是修改主题，主题修改的第一步就是先选一个自己认为好看的主题，选好之后，首先将之克隆到 ./themes 目录下，这个目录下原本有有一个 landscape 文件夹，里边放的默认的样式，当然开发者也可以直接将主题文件下载好拷贝进来，但是我还是建议使用 clone ，使用 clone ，假如有一天这个主题更新了，只需要 pull 一下就可以获取到最新样式了。

不会用git的可以参考我的另一篇文章git命令

以 hexo-theme-next 主题为例， clone 命令如下：
cd D:\develop\blog\blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

  • 1
  • 2

克隆成功后，修改 hexo 的 _config.yml 文件，将主题修改为 next，如下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

  • 1
  • 2
  • 3
  • 4

主题创建好之后，接下来就是对主题的配置了，这个比较容易，直接参考官方文档即可。配置完成后，执行如下命令，即可看到新的主题效果：

hexo clean
hexo g
hexo s

  • 1
  • 2
  • 3

三、绑定到GitHub

绑定到 Github 步骤也很简单，首先以 自己的GitHub ID.github.io 为名创建一个 public 仓库，例如我的 ID 为 wsuo，创建的仓库如下：

wsuo.github.io

  • 1

创建成功之后，修改 hexo 的 _config.yml 文件，配置 GitHub 地址，如下：

deploy:
  type: git
  repo: git@github.com:wsuo/wsuo.github.io.git
  branch: master

  • 1
  • 2
  • 3
  • 4

这里根据自己的地址来配置即可，配置完成后，执行如下命令：
在站点目录下还要在 hexo init 的根目录下执行输入下面的插件安装：

npm install hexo-deployer-git --save
然后启动:
hexo g
hexo d

  • 1
  • 2
  • 3
  • 4

执行完成后，就可以将数据上传到 GitHub 了
上传成功后，访问 https://wsuo.github.io 就可以看到自己的个人站点了，这是 GitHub 默认给我们提供的域名。
如果你对 GitHub 提供的域名不满意，也可以自己申请一个域名，分分钟就配置好了。

如果你访问不了你的博客:

登陆GitHub查看仓库的setting,然后往下翻找到github pages,有一个蓝色的网址点击,那个就是了.

每次更新文章需要做:

 hexo clean // 清除
 hexo g (generate)
 hexo d (deploy)

  • 1
  • 2
  • 3

四、配置博客

好了，到现在为止你已经可以正常的访问了，是不是挺开心的，但是有一点就是他看起来太丑了，下面我们呢就来优化一下界面，提升一下它的颜值。

1. blog配置

好了！准备进入正题！下面将带领各位怎么将一个空空如也的blog装饰成博主一样有那么一点起色的网站。博主将从零搭起，所有的操作都将在博主的笔记本上为大家做出示范。

1.1 next主题基本配置

首先我们先下载next主题在这里选择大家需要的版本进行下载。下载完成后，我们的blog便有了两个主要的配置文件，分别是hexo自带的_config.yml文件和next主题自带的_config.yml文件，为了方便，我们将hexo自带的_config.yml文件称为站点配置文件，next主题带的_config.yml文件称为主题配置文件。

首先，第一步我们来更换一下blog的主题，这一步又分为三个小步骤：

  1. 将下载下来的next主题文件夹重命名为 next 。
  2. 将next文件夹移入blog所在的文件夹的themes 文件夹中，在这里，本人是/blog/themes
  3. 修改站点配置文件，在配置文件中搜索theme，将其的值改为next。注意 冒号： 后面一定要有一个空格
    // 站点_config.yml 文件
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

  • 1
  • 2
  • 3
  • 4

现在主题就已经配置好了，接下来我们优化一下：继续修改站点配置文件：
// 站点_config.yml 文件

# Site
title: Eternal_zttz #网站的名字
subtitle: Saty Hungry，Stay Foolish #网站的副标题
description: 个人blog网站 #个人的描述
keywords:
author: Eternal_zttz #博主的名字
language: zh-CN #blog的语言  zh-CN 代表中文
timezone:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

然后我们修改主题配置文件：
// 主题_config.yml 文件 ，搜索Schemes可找到

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

  • 1
  • 2
  • 3
  • 4
  • 5

这是next的基本页面布局，默认为Muse布局，在这里，我们选择第三个Pisces

很好，接下来，我们在终端命令行cd 进入blog所在目录，如我是直接命名为blog，所以cd blog:

接着运行：

hexo s

  • 1

ok，我们的blog已经略有起色，样式已经离我们的最终样式八九不离十了，接下来，我们将对其的各个部分进行优化：

1.2 next主题侧边栏优化
1.2.1 next主题页面生成

我们可以看到，hexo默认生成的页面只有两个，即首页和归档 页面，那么接下来，我们来生成我们所需的页面：

1.2.1.1 页面的生成

首先，我们修改主题配置文件：
// 主题_config.yml 文件 ，搜索menu可找到

menu:
  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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

可以看到，大部分的都是注释掉了的，这里我已经把我需要的页面注释解除了，大家可以自行考虑需要的页面。
在这里，**斜线//**之间的文字是 该页面 的名字，如／about／ ，说明我们要跳转的页面的名字为about , 而||后的文字是这个页面的图标名字.
这时候我们主页上就可以看到这几个页面，接下来实现页面的跳转：

1.2.1.2 生成about页面

终端回到blog的根目录.运行：

hexo new page "about"

  • 1

ok,接下来关于页面的markdown自己编写就行。

1.2.1.3 生成tags页面

终端回到blog的根目录.运行：

hexo new page "tags"

  • 1
1.2.1.4 生成categories页面:

终端回到categories的根目录.运行：

hexo new page "categories"

  • 1

tags和categorise页面不用自己布局，会自动根据我们的blog的布局好

1.2.2 站内搜索的实现

文章写多了，想一篇篇的去寻找可不容易，这时候，我们便需要一个站内的搜索功能，即服务别人，也能方便自己。
首先，我们在终端进入blog的根目录下，执行以下命令：

$ npm install hexo-generator-searchdb --save

  • 1

接着，我们进入站点配置文件_config.yml,在最后新增以下内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

  • 1
  • 2
  • 3
  • 4
  • 5

最后，打开主题配置文件_config.yml,搜索local_search,其值改为true：

# Local search
local_search:
  enable: true

  • 1
  • 2
  • 3

ok，现在站内搜索就大功告成了，一切准备就绪～

1.2.3 个人头像设置

要设置自己的侧边栏头像，首先，准备一张头像的图片，命名为header.jpg，然后，将图片放在/blog/themes/next/source/images/文件夹下，接着修改主题配置文件，搜索avatar

avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
   - url: /images/avatar.gif
   + url: /images/header.jpg     #图片的地址
  # If true, the avatar would be dispalyed in circle. 
  rounded: false   #设置图片是否为圆形，当图片为正方形时为圆，否则为椭圆
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1 #图片的透明度
  # If true, the avatar would be rotated with the cursor.
  rotated: false  #设置鼠标移到图片上后头像是否转动

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

将url里面的值改为图片的地址就可以了

1.2.4 点击个人头像回到主页面

首先，我们打开文件/blog/themes/next/layout/_macro/sidebar.swig,然后，修改以下内容：

+ <a href="/">
    <img class="site-author-image" itemprop="image"
       src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
       alt="{{ author }}" />
+ </a>

  • 1
  • 2
  • 3
  • 4
  • 5

ok，重新部署一下，就可以看到效果了

1.2.5 RSS订阅设置

首先，我们在终端命令行进入blog所在的目录，运行：

$ npm install --save hexo-generator-feed

  • 1

接着，打开站点配置文件，在文件的末尾添加：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

  • 1
  • 2
  • 3

然后打开主题配置文件，搜索rss，将其设置成如下所示，注意冒号后要加上一个空格

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

  • 1
  • 2
  • 3
  • 4

OK，all right

但是,你知道RSS是啥吗?

RSS全称为Really Simple Syndication（简易信息聚合） ，是站点用来和其他站点之间共享内容的一种简易方式
，RSS以其方便快捷的工作方式，为广大网编带了工作效率的跨越，但是也助长了信息高速重复
。这是百度百科对其解释，我们可以理解为它是一种描述和同步网站内容的格式，用于定制个性化的内容推送信息服务。在如今信息爆炸的时代，它最大的用处便是按照你自己的意愿，帮助你过滤调不需要阅读的信息，不会漫无目的地阅读。更灵活的一点是，rss订阅是跨平台的，可以按照自己的意愿去订阅不同网站和咨询平台，当然包括你所喜欢的某些个人博客。

在浏览器上使用rss订阅

这里我推荐一个chrome上的一个订阅插件，打开谷歌浏览器，进入谷歌应用商店，搜索rss;

添加安装即可，安装完成后会提示你注册一个账号，按照提示注册完成即可。完成插件安装之后，在浏览博客或者其他网站时，点击rss订阅图标，就可以正常订阅成功。

在浏览器订阅后，假如订阅的站点有更新，插件就会推送和提醒

除了在浏览器订阅的方式，还有在客户端上订阅的使用方式，而且订阅功能更为强大。rss订阅的客户端有很多，各个平台的也都有，Windows、Mac、Android、Ios都用有不少客户端。

1.2.6 社交栏设置

在主题配置文件中，搜索social，定位到如下代码段，把social的注释取消掉，接下来，就看你需要显示什么社交网站，写上网站名+网址就行。

social:
  GitHub: https://github.com/yourname || github   #网站名：网址 ||图标名
  简书: http://www.jianshu.com || heartbeat
  #E-Mail: mailto:yourname@gmail.com || envelope
  #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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
1.2.7 实现侧边栏页面的圆角
  1. 首先，我们打开/blog/themes/next/source/css/_variables/Pisces.styl文件，里面定义了一些常量，用来定义blog样式表的值。
  2. 然后，找到$border-radius
// Borders
// --------------------------------------------------
$box-shadow-inner                 = initial;
$box-shadow                       = initial;

$border-radius-inner              = initial;
$border-radius                    = initial;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

可以看到默认为初始值，即为0
改变 为$border-radius = 16px;
这时候，下面的一个侧边栏弧度就已经改好了

  1. 接着，打开/blog/themes/next/source/css/_schemes/Pisces/_layout.styl文件
.header-inner {
  position: absolute;
  top: 0;
  overflow: hidden;
  padding: 0;
  width: $sidebar-desktop;
  background: white;
  box-shadow: $box-shadow-inner;
 -border-radius: $border-radius-inner;
 +border-radius: $border-radius;//修改上面的侧边栏的弧度

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
.content-wrap {
  float: right;
  box-sizing: border-box;
  padding: $content-desktop-padding;
  width: $content-desktop;
  background: white;
  min-height: 700px;
  box-shadow: $box-shadow-inner;
 - border-radius: $border-radius-inner;
 + border-radius: $border-radius; //修改整个文章页面的弧度

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

ok 大功告成，到此为止，我们文章的侧边栏就已经优化完毕了，当然，还有更多操作，大家可以去尝试，不过，建议没有把握之前先做好blog的备份。

2. next主题主页面优化

在上面我们已经把侧边栏的优化都已经完成了，不得不说，刚完成这一部分时我还是有很大的成就感的，接下来，我们将对我们blog的主页面进行进一步的优化。

2.1 增加fork me on github 图标

在这里GitHub地址选择一款自己喜欢的图标，然后把图标旁的代码拷贝一份，放到

blog/themes/next/layout/_layout.swig

  • 1

这个文件夹中，注意要放到<div class="headband"></div>的下方
OK,这就大功告成了。

2.2 文章背景出现阴影边框

这个效果实现起来很简单，打开blog\themes\next\source\css\_custom\custom.styl文件，放入以下代码：

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

重新部署一下即可实现。

2.3 “ 阅读全文 ” 按钮改弧度

这个功能和侧边栏改弧度的操作是差不多的，进入文件/blog/themes/next/source/css/_variables/Pisces.styl中，把以下代码修改一下：

// Button
 1. $btn-default-radius           = 2px
 2. $btn-default-radius           = 16px
$btn-default-bg               = white
$btn-default-color            = $text-color
$btn-default-border-color     = $text-color
$btn-default-hover-color      = white
$btn-default-hover-bg         = $black-deep

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
2.4 为文章内容添加统计功能，文字总数+阅读时长
  1. 终端进入blog根目录，执行下面代码：

$ npm install hexo-symbols-count-time --save

  1. 进入站点配置文件，为blog配置统计功能，将以下代码复制到最后：

symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

  1. 进入主题配置文件，搜素symbols_count_time,然后把要显示的改为true.
    更深入的操作大家可以看github上的说明。
    PS：如果大家配置完成，然后检查无误后，打开页面依旧没有显示，不要着急，第一次显示可能会比较慢，可以休息一会。
2.5 为文章中的代码块增加一键复制功能

在next v6.3.0 版本中，这个功能已经是集成了的，我们进入站点配置文件，搜索copy_button。把它的值改为true即可：

# Add copy button on codeblock
  copy_button:copy
    enable: true  #是否开启复制功能
    # Show text copy result
    show_result: true #是否显示提示的复制结果

  • 1
  • 2
  • 3
  • 4
  • 5

接着，将鼠标移动到代码块中，便可以看到结果。默认按钮是中文“复制”，若是想改为英文“copy”，可进入blog/themes/next/languages/zh-CN.yml文件中，将下面部分改了即可：

copy_button: copy
copy_success: succeed
copy_failure: failed
copyright:
   author: 本文作者

  • 1
  • 2
  • 3
  • 4
  • 5

这个文件夹中保留了所有的中英部分的对应关系，大家想改各标签名字的话，可以将这个文件中对应的部分改了即可。

2.6 增加版权信息

博文写好了，怎么说也是作者的一番心血，我们不去抄袭别人的作品，也不希望别人什么都不说带走我们的作品，所以，我们需要在底部做一个版权申明：
next主题中现在已经是集成了这个功能的了，我们只在主题配置文件中搜索copyright,并把enable的值改为true即可.

3. next主题底部优化

3.1为文章增加评论功能

next主题的6.x版里面已经集成了很多评论了，包括Gitment和Valine，大家有兴趣可以去试一试。
安装 utterances
utterances 的安装相当简单，因为出品了一个 Github App。

首先安装这个 App ，选择要关联评论的仓库。可以选择所有仓库，也可以只选择一个仓库。选择一个仓库比较安全。

新建仓库
不过 utterances 没有集成在 NexT 主题中，需要手动添加。

打开主题文件夹，在 layout/_third-party/comments/ 中新建文件 utterances.swig，并添加下面的内容：

{% if theme.utterances.enable %}
  <script src="https://utteranc.es/client.js"
    repo="{{ theme.utterances.repo }}"
    issue-term="{{ theme.utterances.issue_term }}"
    theme="{{ theme.utterances.theme }}"
    crossorigin="anonymous"
    async>
  </script>
{% endif %}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

然后在 layout/_partials/comments.swig 中添加下面的内容：

   {% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
     <div class="comments" id="comments">
     </div>
+
+  {% elseif theme.utterances.enable %}
+    <div class="comments" id="comments">
+      {% include '../_third-party/comments/utterances.swig' %}
+    </div>
   {% endif %}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

最后在主题配置文件中添加如下配置：

utterances:
  enable: true
  repo: # owner/repo
  issue_term: # pathname, url, title, og:title [ISSUE NUMBER] or [SPECIFIC TERM]
  theme: # github-light or github-dark

  • 1
  • 2
  • 3
  • 4
  • 5

三个配置选项都是必填的，第一个是配置 issue 所在的 repo，第二个是如何决定如何寻找对应的 issue，第三个决定采用亮或暗的主题。

然后可以愉快的使用了～

3.2增加在线联系Daovoice

链接
注册完成后会得到一个 app_id

daovoice(‘init’, {
app_id: “*******”
});
daovoice(‘update’);

记下这个app_id的值，然后打开/blog/themes/next/layout/_partials/head/head.swig文件，在如下位置插入代码：

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

接着打开主题配置文件，在最后写下如下代码：

# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

  • 1
  • 2
  • 3
3.3 增加站点访问人数和总访问量

打开主题配置文件，搜索busuanzi，将enable的值改为true即可。

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

五、发表博客

发表文章
注意：如果自己直接新建文件，一定要记得加上文件最上方的参数，即下面的相关内容，还有编码请用 UTF-8。

关于文件最上方的参数，参见 Hexo 官方文档的 Front-matter 和页面变量，下面是我的总结：

# ！！！！！！！！！！
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# ！！！！！！！！！！

title:
# 文章标题，可以为中文

date:
# 建立日期，如果自己手动添加，请按固定格式
# 就算不写，页面每篇文章顶部的发表于……也能显示
# 只要在主题配置文件中，配置了 created_at 就行
# 那为什么还要自己加上？
# 自定义文章发布的时间

updated:
# 更新日期，其它与上面的建立日期类似
# 不过在页面每篇文章顶部，是更新于……
# 在主题配置文件中，是 updated_at

permalink:
# 若站点配置文件下的 permalink 配置了 title
# 则可以替换文章 URL 里面的 title（文章标题）

categories:
# 分类，支持多级，比如：
# - technology
# - computer
# - computer-aided-art
# 则为 technology/computer/computer-aided-art
# （不适用于 layout: page）

tags:
# 标签
# 多个可以这样写 [标签1,标签2,标签3]
# （不适用于 layout: page）

description:
# 文章的描述，在每篇文章标题下方显示
# 并且作为网页的 description 元数据
# 如果不写，则自动取 <!-- more -->
# 之前的文字作为网页的 description 元数据

keywords:
# 关键字，并且作为网页的 keywords 元数据
# 如果不写，则自动取 tags 里的项
# 作为网页的 keywords 元数据

comments:
# 是否开启评论
# 默认值是 true
# 要关闭写 false

layout:
# 页面布局，默认值是 post，默认值可以在
# 站点配置文件中修改 default_layout
# 另：404 页面可能用到，将其值改为 false

type:
# categories，目录页面
# tags，标签页面
# picture，用来生成 group-pictures
# quote？
# https://io-oi.me/tech/hello-world/

photos:
# Gallery support，用来支持画廊╱相册，用法如下：
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/hello-world/

link:
# 文章的外部链接
# https://io-oi.me/tech/hello-world/

image:
# 自定义的文章摘要图片，只在页面展示，文章内消失
# 此项只有参考本文 5.14 节配置好，否则请勿添加！

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好，否则请勿添加！

password:
# 文章密码，此项只有参考教程：
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节，配置好，否则请勿添加！
# 发现还是有 bug 的，就是右键在新标签中打开
# 然后无论是否输入密码，都能看到内容

  • 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
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90

六、还有一些问题

1.Hexo之next主题设置首页不显示全文(只显示预览)

next是Hexo的一个博客主题，这个主题 ，首页显示的文章列表，每一遍都是全文，不方便概览。

进入hexo博客项目的themes/next目录
用文本编辑器打开_config.yml文件
搜索"auto_excerpt",找到如下部分：

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

  • 1
  • 2
  • 3
  • 4
  • 5

2.头像设置

打开/blog/themes/next/source/images,找到你想设置为头像的图片,然后打开主题配置文件,我的是在154行的位置

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/header.jpg

  • 1
  • 2
  • 3
  • 4

修改为你头像的路径就好了

后话：后来还是没有显示出来，我费尽周折想起了一个解决方案：

我是这样解决的，既然他总是显示默认的头像图片，那他肯定有路径，我不需要知道路径在哪里配置，只需要找到那个默认头像然后用我想要的图片把它给替换掉，同名同路径肯定能显示，于是我照做了，成功了！！！自底向上解决问题，另外默认头像的位置是themes\next\source\images\avatar.gif

3.侧边栏社交小图标设置

图标库,将名字复制在配置文件的相关位置即可

social:
  GitHub: https://github.com/wsuo || github	#网站名：网址 ||图标名
  E-Mail: mailto:ws2821@yeah.net || envelope
  #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

social_icons:
  enable: true
  icons_only: false
  transition: false

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.设置网站的图标 Favicon

把你的图片（png 或 jpg 格式，不是 favicon.ico）放在themes\next\source\images里，然后打开 主题配置文件 找到favicon，将small、medium、apple_touch_icon三个字段的值都设置成\images\图片名.jpg就可以了，其他字段都注释掉。

favicon:
  small: /images/header.jpg
  medium: /images/header.jpg
  apple_touch_icon: /images/header.jpg
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

5.侧边栏推荐阅读

打开 主题配置文件 修改成这样就行了 (links 里面写你想要的链接):

# Blog rolls
links_icon: link
links_title: 联系我
links_layout: block
#links_layout: inline
links:
  wsuo的CSDN博客: https://blog.csdn.net/weixin_43941364


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

6.在网站底部加上访问量

第一种方法：
打开\themes\next\layout\_partials\footer.swig文件, 在 copyright 前加上这句话，我是在文章的开头也就是第一行添加的：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#

  • 1
  • 2
  • 3

然后再合适的位置添加显示统计的代码，我是在45行左右：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
-->
{% endif %}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

如果你使用了上面的方法就不要在使用下面的这个方法了，因为两个都用会出错，下面介绍第二种方法。

第一种引入脚本的方法适用于任何类型的个人站点，如果你使用的主题是NexT，那么你可以很方便的进行不蒜子的访客统计设置，仅仅只需要一步：

打开主题的配置文件/theme/next/_config.yml，找到如下配置：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
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: 访客数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 总访问量
  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:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

将enable的值由false改为true，便可以看到页脚出现访问量

7.增加本站运行时间

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("02/02/2020 20:02:02");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

  • 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

在原next主题版本信息的下方增加上面的代码，代码在不同的位置会有不同的效果。

8.next主题如何添加动态背景

如果next主题在5.1.1以上的话就不用我这样设置，直接在主题配置文件中找到canvas_nest:
false，把它改为canvas_nest: true就行了（注意分号后面要加一个空格）

打开 next/layout/_layout.swig
在 < /body>之前添加代码(注意不要放在< /head>的后面)

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

  • 1
  • 2
  • 3

打开 /next/_config.yml,在里面添加如下代码：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

七、补充内容

博客截图
到目前为止如果你跟着我一步一步的做的话我们的博客已经很棒了，但是并不是说不能继续优化了，追求完美是每个人的目标，所以我们继续

1.增加网易云音乐

音乐是不应该被辜负的，所以，我们可以在侧边栏加上网易云的音乐外链，具体方法为：

打开网易云音乐网页版，选择自己想要放上去的音乐。
在播放页面选择外链播放器，选择一个自己喜欢的样式。
复制其中的代码
打开/blog/themes/next/layout/_macro/sidebar.swig 文件，将代码复制到适合的位置，例如，我是在约161-162行增加

{% endif %}
         {% include custom_sidebar %}
       </div>
     </section>

 +  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=5079881&auto=0&height=32"></iframe>

     {% if display_toc and toc(page.content).length > 1 %}
     <!--noindex-->
       <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
         <div class="post-toc">

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

就只用加带加号的那一行

如果你去网易云发现大部分的歌都有版权不让你使用外链的话，也可以直接使用我的代码，就是我的歌。

2.修改界面宽度

之后我发现主页太短了，以至于两边有大量的空白区域，这里让他们更宽一些，看起来更美观，因为现在很多显示屏都是宽屏的，尤其是台式机配的屏幕，比例比横宽比例比笔记本要大很多，这样一来就导致了next主题默认的配置中，文章的两侧留白太多，阅读体验不好。可以通过修改next主题的文章页面宽度来解决。

解决方案：
请看我的另一篇文章，里面还有很多问题：传送门

2020年4月3日21:36:23 更新：

八、部署到阿里云

1、部署到服务器

大家部署完了就会发现实在是太卡了，几乎都进不去页面，解决办法就是要么使用 CDN 加速，要么部署到阿里云上面，我这里两个都用了。

由于文章篇幅实在是太长了，关于部署到阿里云的请移步：部署阿里云。

2、增加插入图片功能

将网站部署在阿里云上，更期望的是将网站的图片资源如文章中的图片也直接放在阿里云的机器上，而不是到处找图床生成外链。在这里需要安装一个 hexo 的图片处理插件 hexo-asset-image，在本地网站目录下执行：

npm install hexo-asset-image --save

  • 1

并修改 _config.yml 使之生效：

post_asset_folder: true

  • 1

使用 hexo n 新建文章的时候，不仅会在 _posts 下生成该新建文章的 md 文件，还会生成一个与 md 文件名一致的文件夹，这个文件夹就是用来存放该文章所需图片的地方。

如本文的第一张头部图片（cover.jpg）放在同名的文件夹后，在文章中通过以下语法引用：

![](title/cover.jpg)

  • 1

可以看到只需要引用该图片的相对位置，剩下的此插件会在 md 文件生成 html 文件时自动使用绝对路径引用该图片资源。

结语

第一篇两万字的博客，终于码完了，虽然最后很多功能我自己也没有实现，因为很多用不到来的功能，但是为了方便大家也都列出来了，如果你对我的文章感兴趣，欢迎留言或者私信我.

我的个人网站地址:
https://wsuo.top 欢迎访问

参考文章：
1.hexo高阶教程next主题优化
2.hexo的next主题个性化教程:打造炫酷网站
3.Hexo搭建博客的个性化设置
4.打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
5.hexo next主题优化，打造个人精致网站

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/856367
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号