1193 字

6 分钟

Blog搭建

2025-09-20

hexo

本网站基于 Hexo 构建，采用了 Vivia 主题，是一个风格简洁的个人博客模板。在当前版本中，“返回至顶端”、主页预览博客内容等功能尚不完善或者不符合我的使用习惯，这些都正在改进中改进。总体而言，在美观成都与易用性而言，这个模板表现非常不错。

作为该方向的初学者，我在此次网站搭建过程中基本依赖 AI 协助完成。

完成Blog基础功能的搭建#

#2025年9月4日

在移除“返回至顶端”按钮后，发现主题切换按钮因继承了原按钮的点击方式，导致无法在页面顶端正常使用。为修复此 bug，需要定位相关文件，并将其中的指定代码完全删除。

以下为相关文件路径：

1
Blog\node_modules\hexo-theme-vivia\layout\_partial\back-to-top.ejs

以下为源文件代码（留着以防以后有用）：

1
<div class="back-to-top-wrapper">
2
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
3
        <i class="fa-solid fa-angle-up"></i>
4
    </button>
5
</div>
6

7
<script>
8
    function topFunction() {
9
        window.scroll({ top: 0, behavior: 'smooth' });
10
    }
11
    let btn = document.getElementById('back-to-top-btn');
12
    function scrollFunction() {
13
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
14
            btn.classList.remove('hide')
15
        } else {
16
            btn.classList.add('hide')
17
        }
18
    }
19
    window.onscroll = function() {
20
        scrollFunction();
21
    }
22
</script>

接下来将进行下一步的开发，希望一切顺利。

主页展示方式的修改#

#2025年9月8日

添加abstract#

1
Blog\node_modules\hexo-theme-vivia\source\css\_partial

在上述文件夹中，创建 abstract.styl 文件，文件中代码如下：

1
.abstract-box
2
  border-left 4px solid skyblue
3
  color #000
4
  padding-left 10px
5
  line-height 1.6
6
  margin 16px 0
7
  display block
8

9
html[theme="dark"] .abstract-box
10
  color #fff

修改展示方式#

1
Blog\node_modules\hexo-theme-vivia\layout\_partial\artical.ejs

在上述文件中，将以下部分:

1
<div class="e-content article-entry" itemprop="articleBody">
2
  <% if (post.excerpt && index){ %>
3
    <%- post.excerpt %>
4
  <% } else if (is_home() && !post.excerpt && theme.home.style != 'detail') { %>
5
    <div class="truncate-text">
6
     <% if(description){ %>
7
      <%- strip_html(post.description) %>
8
     <% } else{ %>
9
      <%- truncate(strip_html(post.content), {length: 500}) %>
10
     <% } %>
11
    </div>
12
  <% } else { %>
13
    <%- post.content %>
14
  <% } %>
15
</div>

修改为：

1
<div class="e-content article-entry" itemprop="articleBody">
2
  <% if (is_home() && post.abstract) { %>
3
    <div class="post-abstract abstract-box">
4
      <%= post.abstract %>
5
    </div>
6
  <% } else if (post.excerpt && index) { %>
7
    <%- post.excerpt %>
8
  <% } else if (is_home() && !post.excerpt && theme.home.style != 'detail') { %>
9
    <div class="truncate-text">
10
     <% if(description){ %>
11
      <%- strip_html(post.description) %>
12
     <% } else{ %>
13
      <%- truncate(strip_html(post.content), {length: 500}) %>
14
     <% } %>
15
    </div>
16
  <% } else { %>
17
    <%- post.content %>
18
  <% } %>
19
</div>

在修改之后，若加入了abstract，则会直接显示abstract；否则显示原文内容。

修改About的显示方式#

#2025年9月8日

1
Blog\node_modules\hexo-theme-vivia\layout\_partial\article.ejs

在以上文件路径中，找到以下代码：

1
<div class='meta-info-bar'>
2
  <%- partial('post/date', {class_name: 'meta-info', date_format: null}) %>
3
  <div class="need-seperator meta-info">
4
    <%- partial('post/category') %>
5
  </div>
6
  <div class="wordcount need-seperator meta-info">
7
    <%- symbolsCount(post) %> <%- __('words') %>
8
  </div>
9
</div>

修改为：

1
<% if (post.layout !== 'page') { %>
2
  <div class='meta-info-bar'>
3
    <%- partial('post/date', {class_name: 'meta-info', date_format: null}) %>
4
    <div class="need-seperator meta-info">
5
      <%- partial('post/category') %>
6
    </div>
7
    <div class="wordcount need-seperator meta-info">
8
      <%- symbolsCount(post) %> <%- __('words') %>
9
    </div>
10
  </div>
11
<% } %>

在修改之后，About界面就不再显示时间、分类与字数。

完善Blog字数的计算#

#2025年9月8日

1
Blog\node_modules\hexo-theme-vivia\languages\zh-CN.yml

以上文件中把 words 中的“词”改为“字”，则主页显示的则为字而不是词。

1
Blog\node_modules\hexo-theme-vivia\scripts

在以上文件夹中添加文件wordcount.js，以下为代码：

1
hexo.extend.helper.register('symbolsCount', function(post) {
2
  let content = post.content || '';
3

4
  // 1. 去掉多行代码块 <pre><code>...</code></pre>
5
  content = content.replace(/<pre.*?>[\s\S]*?<\/pre>/g, '');
6

7
  // 2. 去掉行内代码 <code>...</code>
8
  content = content.replace(/<code.*?>[\s\S]*?<\/code>/g, '');
9

10
  // 3. 去掉 HTML 标签
11
  content = content.replace(/<[^>]*>/g, '');
12

13
  // 4. 去掉空格、换行、制表符
14
  content = content.replace(/\s+/g, '');
15

16
  return content.length;
17
});

修改之后，Blog计数统计就不会计算代码。

PS：因为不支持ejs语法高亮，此处使用的html来添加代码高亮，实际为ejs.

添加Blog评论功能#

#2025年9月18日

本功能基于giscus，简单实用。首先安装giscus app，并按照相关提示完成配置，得到配置代码。

1
Blog\node_modules\hexo-theme-vivia\layout\_partial

在以上路径中创建文件comment.ejs，加入giscus的相关配置代码。

1
Blog\node_modules\hexo-theme-vivia\layout\post.ejs

然后在以上文件中，加入以下代码:

1
<%- partial('_partial/comment') %>

配置完成。

添加友链版块#

#2025年9月20日

很简单，在主题yaml文件中menu中添加Friends，在以下路径中：

1
\Blog\source\friends

创建index.md，以下为相关代码：

1
---
2
title: Friends
3
---
4

5

6
<div class="links-content">
7

8
  <div class="card">
9
    <img class="ava" src="/images/example.png" />
10
    <div class="card-header">
11
      <a href="https://friend1.com">Friend One</a>
12
      <div class="info">个人Blog</div>
13
    </div>
14
  </div>
15

16
</div>
17

18

19

20
<style>
21
.links-content {
22
  margin-top: 2rem;
23
  display: grid;
24
  grid-template-columns: 1fr;
25
  gap: 1.5rem;
26
  padding: 0 1rem;
27
}
28

29
/* 768px为moblile到tablet，1024为tablet到desktop */
30
@media screen and (min-width: 768px) {
31
  .links-content {
32
    grid-template-columns: repeat(2, 1fr);
33
  }
34
}
35

36
.card {
37
  display: flex;
38
  align-items: center;
39
  padding: 16px;
40
  border-radius: 8px;
41
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
42
  background-color: #ffffff;
43
  transition: transform 0.2s ease;
44
}
45

46
.card:hover {
47
  transform: scale(1.02);
48
}
49

50
.ava {
51
  width: 128px;
52
  height: 128px;
53
  border-radius: 50%;
54
  object-fit: cover;
55
  margin-right: 1rem;
56
  flex-shrink: 0;
57
}
58

59
.card-header {
60
  display: flex;
61
  flex-direction: column;
62
  align-items: flex-end;
63
  text-align: right;
64
  flex-grow: 1;
65
}
66

67
.card-header a {
68
  font-weight: bold;
69
  font-size: 1.1rem;
70
  color: #007acc;
71
  text-decoration: none;
72
}
73

74
.card-header a:hover {
75
  color: #005fa3;
76
}
77

78
.info {
79
  color: #666;
80
  font-size: 0.95rem;
81
  margin-top: 4px;
82
}
83
</style>