抗遗忘 | 博客修改记
2025-02-27 17:15:18

记录博客修改内容，也是记录回去的路。

01置顶文章

参考教程：

hexo博客文章置顶功能实现的两种方法

原码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
'use strict';

const pagination = require('hexo-pagination');

module.exports = function(locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);

  posts.data.sort((a, b) => (b.sticky || 0) - (a.sticky || 0));

  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

修改后：

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
'use strict';

const pagination = require('hexo-pagination');

module.exports = function(locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);

    posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章都有top，top大的在前
        if(a.top == b.top)
			return b.date - a.date; // 若top值一样，最新的文章在前面
        else
			return b.top - a.top; // top大的在前面
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; 	//都没有top标签，最新的文章在前面
});

  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

02 添加字数统计

2.1参考教程：

Hexo添加字数统计和阅读统计

注意：

  • 主题配置文件和oranges主题配置文件都放在了后者里，在footer部分。
  • symbols_count_time 不可以在多个地方重复，否则会报错，如下，删除_config.yml文件里重复的就好了。
1
2
FATAL
YAMLException: duplicated mapping key (126:1)

最终主题配置文件添加的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
symbols_count_time:
  symbols: false                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计
  separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
  item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: false   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 4                   # Average Word Length
  wpm: 275                 # Words Per Minute（每分钟阅读词数）
  suffix: mins.

post_wordcount: 		# 字数统计
  item_text: true		# 是否显示文字
  wordcount: true		# 显示字数
  min2read: true		# 显示阅读时间
  totalcount: true		# 显示总数
  separated_meta: true	# 是否分开

似乎不大行，改日再看吧。

2.2修改footer文件

文件themes/oranges/layout/_partial/footer.ejs，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 添加网站统计信息 -->
<div class="footer-stats">
  <p>文章数目: <%= site.posts.length %></p>
  <p>运行时间: <%= Math.floor((new Date() - new Date('2019-01-01')) / (1000 * 60 * 60 * 24)) %> 天</p>
  <p>本站总字数: <%= site.posts.reduce(function(sum, post){ return sum + post.content.length; }, 0) %> 字</p>
  
  <!-- 访客数和浏览量 -->
  <p>本站访客数: <%= site.visitors || '未知' %></p>
  <p>本站总浏览量: <%= site.pageviews || '未知' %></p>

  <!-- 最后更新时间 -->
  <p>最后更新时间: <%= site.updatedAt ? site.updatedAt.toLocaleDateString() : '未知' %></p>
</div>

2.3 Google Analytics

不采用，别安装了：安装 hexo-generator-visitor 插件：

1
npm install hexo-generator-visitor --save

添加谷歌分析，hexo-generator-visitor 插件已经不再维护或不可用，考虑使用Google Analytics：

原来zcheng大人已经写了，我忽略了，原文如下：

First, view Google Analytics to get the gtagkey:

Then, enable gtag in the _config.oranges.yml file:

1
2
3
gtag:
  enable: true
  gtagkey: UA-xxxxxxx-x

我的注册到的就是 GA4版本的，所以gtagkey就是G开头的，似乎之后不支持UA版本了，对应的改一下就可以。

2.4格式修改

内容显示在最左侧，好丑，继续修改：

修改 footer.ejs：

1
2
3
4
5
6
7
8
9
<!-- 添加网站统计信息 -->
<div class="footer-stats">
  <span class="footer-item">文章数目: <%= site.posts.length %></span>
  <span class="footer-item">运行时间: <%= Math.floor((new Date() - new Date('2022-12-25')) / (1000 * 60 * 60 * 24)) %> 天</span>
  <span class="footer-item">本站总字数: <%= site.posts.reduce(function(sum, post){ return sum + post.content.length; }, 0) %> 字</span>
  <span class="footer-item">本站访客数: <%= site.visitors || '未知' %></span>
  <span class="footer-item">本站总浏览量: <%= site.pageviews || '未知' %></span>
  <span class="footer-item">最后更新时间: <%= site.updatedAt ? site.updatedAt.toLocaleDateString() : '未知' %></span>
</div>

**目的是确保每个统计项被放置在一个独立的 <span> 元素中，方便用 CSS 来调整布局。

创建一个新的 CSS 文件：themes/oranges/source/css/custom.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 底部容器样式 */
.footer-stats {
  display: flex;  /* 使用 Flexbox 布局 */
  justify-content: center;  /* 使内容居中 */
  flex-wrap: wrap;  /* 当空间不足时换行 */
  gap: 20px;  /* 设置项之间的间距 */
  padding: 0px 0; /* 减少上下的 padding 使底部更紧凑 */
  font-size: 14px;  /* 设置字体大小 */
  background-color: #f1f1f1;  /* 底部背景颜色 */
  color: #333;  /* 字体颜色 */
}

/* 每个统计项的样式 */
.footer-item {
  margin: 5px 10px;  /* 每个项之间的间隔 */
  display: inline-block;  /* 确保它们是行内元素 */
  text-align: center;  /* 确保文字居中 */
}

/* 使每个项目有个小的悬停效果 */
.footer-item:hover {
  color: #007bff; /* 悬停时改变字体颜色 */
  cursor: pointer; /* 悬停时显示指针 */
}

在 themes/oranges/layout/_partial/head.ejs 文件中引入该 CSS 文件：

1
2
<!-- 引入自定义样式 -->
<link rel="stylesheet" href="/css/custom.css">

**目的：将所有自定义样式放在 custom.css 文件中，方便管理。

很好，更丑了。

继续修改

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
/* 底部统计容器样式 */
.footer-stats {
  display: flex;  /* 使用 Flexbox 布局 */
  justify-content: center;  /* 使内容居中 */
  flex-wrap: wrap;  /* 当空间不足时换行 */
  gap: 20px;  /* 设置项之间的间距 */
  padding: 20px 0;
  font-size: 1.4rem;  /* 根据网页字体统一设定 */
  background-color: var(--bg-footer);  /* 底部背景颜色来自全局变量 */
  color: var(--color-text-footer);  /* 字体颜色来自全局变量 */
  font-family: Consolas, "Liberation Mono", Menlo, Monaco, "Source Han Sans CN", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* 统一字体 */
}

/* 每个统计项的样式 */
.footer-item {
  margin: 5px 10px;  /* 每个项之间的间隔 */
  display: inline-block;  /* 确保它们是行内元素 */
  text-align: center;  /* 确保文字居中 */
  font-size: 1.4rem;  /* 统一字体大小，保持一致 */
  line-height: 1.6;  /* 增加行高，保持舒适阅读 */
}

/* 使每个项目有个小的悬停效果 */
.footer-item:hover {
  color: var(--color-hover); /* 悬停时改变字体颜色，使用全局变量 */
  cursor: pointer; /* 悬停时显示指针 */
}

/* 小屏设备下底部样式调整 */
@media (max-width: 768px) {
  .footer-stats {
    font-size: 1.2rem; /* 在小屏幕上稍微缩小字体 */
    padding: 15px 0; /* 调整底部内边距 */
  }
}

修改，被笑到了，单位是rem不是px

03添加RSS

安装RSS：

hexojs/hexo-generator-feed: Feed generator for Hexo.

把主题配置文件中部分取消注释：

1
2
3
name: rss
icon: rss
path: /atom.xml

主题配置文件添加的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
feed:
  enable: true
  type:
    - atom
    - rss2
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:
    - ./source/custom.xml  # 使用自定义模板生成 atom feed
  exclude:
    - 'custom.xml'  # 不将 custom.xml 复制到 public/ 文件夹中

在./source/ 目录下创建一个 custom.xml 文件，内容：

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
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
  <channel>
    <title><%= config.title %></title>
    <link><%= config.url %></link>
    <description><%= config.description %></description>
    <language><%= config.language %></language>

    <!-- 循环输出文章 -->
    <% posts.each(function(post){ %>
      <item>
        <title><%= post.title %></title>
        <link><%= post.permalink %></link>
        <guid><%= post.permalink %></guid>
        <pubDate><%= post.date.toUTCString() %></pubDate>
        <description><%= post.excerpt %></description>
        <content:encoded><![CDATA[<%= post.content %>]]></content:encoded>

        <!-- 你可以在此处添加更多自定义字段 -->
        <!-- 总字数 -->
        <total-words><%= post.content.split(' ').length %></total-words>

        <!-- 起始时间 -->
        <start-time><%= post.date.toISOString() %></start-time>
      </item>
    <% }); %>
  </channel>
</rss>
上一页
2025-02-27 17:15:18
下一页