大道至简：快速搭建博客与文档站点的终极指南1.0

本文最后更新于：1 个月前

写在前面

我们演示使用 Hexo 静态站点生成器快速搭建个人博客，并使用 Gitee / GitHub 托管静态站点。

2024 年 8 月 9 日

自从昨天晚上优化完毕博客所有首页图片之后，都由不得每天想点开多看两眼这全新的博客界面。

建站五百多天，也是时候给这篇博客栏目添加一些新鲜血液了，从来没有正式介绍过我的个人博客 - Memory‘s Blog。

我是从去年六月初开始在个人博客上着手记录个人生活的，到现在也有十四个月了，时间过得真快。

一年多的生活记录，每天的日常生活我都会尽量记录在《我的编程生活之旅》栏目中，事无巨细。

简直无法想象没有成功搭建个人博客之前，我的生活到底是怎样的。

有太多有趣的事情没有记录下来，有太多值得纪念的瞬间慢慢在脑海中消散，而自己对此却全然不知。

遗憾是人生之常事，但如果选择忘记甚至是丢弃自己曾经拥有过的那些快乐时光，那无疑是最大的遗憾。

我在今年一月份创建的全新栏目《岁月如歌：我的人生回忆录》，那天早上我第一次意识到原来我的过去也是那么精彩，那么值得回味。

仅仅是因为那些是过去的事情就不值得怀恋了吗，恰恰是那些曾经我经历过的事情，才最终成就了今天完整的我。

上个月应该是九号左右的某个晚上，在我兄弟的陪伴下，我躺在床上梦呓般地回顾了我短暂又精彩绝伦的上半年。

又过了半个多月，我俩又不禁回忆起过去十几年的岁月，同上学时期经常聊起小时候那般，我来聊起了上学的那段时光。

为什么当时不能主动点呢，我简直受不了三五年前唯唯诺诺的我自己，我兄弟也是一样的。

现在回忆起以前那些受尽“苦难”的生活，有时候竟会觉得滑稽可笑，看来只要时间过得足够久，连自己都没那么容易相信和理解自己了。

但那些日子又何尝不精彩呢，我恨不得用现在就用文字把它们记录下来，把我身上发生过的所有故事都写下来，因为那才是真正的我啊。

整理成册，在我老去的时候，在一个平平无奇的下午茶时间，拉出一把躺椅躺上去慢慢翻看，回顾我这短暂又充实的一生。

写下去吧，这个信念要贯穿几十年的岁月。

希望在十年后某一个闲适的下午，我还能坐在电脑桌前，用心品读自己曾经写下的平凡故事。

翻看一篇文章，续写下去，看看十年的岁月是否让我的初心改变。

十年后的我已然不在年轻，十年后的我可能对生活缺少了更多的激情，十年后的我也许找到的生活全新的意义。

十年的岁月不会改变我的初心，更不会消磨我的勇气。

二零二四年八月九日下午三点三分，我热烈期盼那一天的到来。

期待那一天的到来。

正文

博客搭建

前言

常见的博客站点生成器有很多，最主要的有俩：Hexo 和 Hugo

那我们就先使用 Hexo 来搭建了

Hexo 是一个静态博客站点生成工具，可以把 Markdown 格式的文档转换成静态页面，非常适合用来作个人技术博客

其实所有的搭建流程上官网就能找到，跟着文档一步一步来也能完成，那我们这个笔记就是要教会你快速完成初始搭建

先放几个辅助资源：

各站点生成器的入口：Static Site Generators - Top Open Source SSGs | Jamstack

Hexo 官网：建站 | Hexo

准备工作

使用 Hexo 搭建博客前要做的准备（这里不细讲）

也没别的，就两点：Node.js 和 Git

有关 Node.js 环境安装及相关知识，可以移步至《配置指南-掌握 Node-js 配置》一文中进行相关了解

有关 Git 基础知识，可以移步至《入门指南：掌握 Git 的基本操作及进阶学习》一文中进行相关了解

建站

  • 全局安装 hexo-cli（这玩意儿是个构建工具，就是用来安装 hexo 的）
1
npm install --save hexo-theme-fluid
  • 在指定文件路径下初始化 hexo
1
2
hexo init
npm install
  • 如你所见，_config.yml 就是全局配置文件，我们建议复制一个_config.fluid.yml 拷贝初始配置，然后在_config.yml 里大刀阔斧地修改
image-20230528000510407
  • 至此，基本的 hexo 博客站点搭建完成
  • 主题不好看，接下来我们着手配置主题

主题配置

默认主题

这里可以在 hexo 官方文档里详细了解，修改默认主题定制特色主题

第三方主题

这里推荐一个 Hexo 搭建个人博客教程：Hexo 全过程记录 从 Centos 到 Fluid - IRIDIUM-SUB - 博客园 (cnblogs.com)

这个教程超级详细，从博客的搭建到主题配置介绍一应俱全，非常值得一看

比起默认主题，我会更加建议使用第三方主题，更加优秀和美观

这里会简单地涉及到如何安装各式各样的主题，详细的主题配置请前往《大道至简：快速搭建博客与文档站点的终极指南 3-0》一文中学习

各站点生成器的入口：Static Site Generators - Top Open Source SSGs | Jamstack

在这个网站下，进入 Hexo 主题选择（都是人家写好的，会拉下来，拿来用就行），这里拿 fluid 主题举例

看文档，按部就班地走就行：

  • 安装 fluid 主题
1
npm install --save hexo-theme-fluid
  • 修改_config.yml 下的 theme
1
theme: fluid  # 指定主题
  • 新建个关于页 about（可选）
1
hexo new page about
  • 执行下以下命令，成功访问到 fluid 主题的博客页面了，效果如下：
1
2
hexo g			# 生成静态站点
hexo s			# 本地开启服务

image-20230802125458256

  • 这个静态页面是由 Hexo 帮我们在本地搭建了一个 Web 服务，来支持我们访问的，适用于开发环境下的调试
  • 实际生产过程中，我们需要把它部署到 Nginx 服务器上，方法也非常简单，
  • 每个主题都有好多配置，那我们总要配置自己的特色主题吧？改成我们自己喜欢的，那就执行下面这行命令：
1
npm update --save hexo-theme-fluid
  • 这时 theme 文件夹下找到一个_config.yml 文件（往下找几层），这里我们就能自由配置、定制主题了

image-20230703101737475

  • 详细的页面配置、主题配置在《大道至简：快速搭建博客与文档站点的终极指南 3-0》一文中有所介绍，可跳转阅读
  • 下面放上我的博客访问地址以及具体的页面效果：
  • Memory’s blog (gitee.io)

image-20230527235802901

image-20230527235830531

image-20230527235851110

image-20230528000012337

image-20230528000031027

image-20230802130230543

  • 使用 Hexo 搭建个人博客站点教程结束（2023/05/27 晚）

2024 年 4 月 11 日

一年时间一晃而过，这么快就 2024 年四月份了，我的个人博客网站也在不断地充实。

截至二零二四年二月二十七日，下午四时四十五分，我的个人博客共有七十余篇博文，总计九百余张图片、五十余万文字

我的个人博客网站博文更新到七十五篇了！

再展示一下现在的博客吧：s

晚风几许撩人意，夕阳半刻醉人心

image-20240411145740498

image-20240411145723552

image-20240411145801951

image-20240411145826060

image-20231111114437428

image-20231111114448636

2024 年 8 月 8 日

一晃又是四个多月，截至今晚：

二零二四年八月八日晚十点十三分，所有八十三篇博文首页图片配置工作圆满结束，值得留念。

这项工作拖欠很长时间了，今晚总算完成，感觉整个博客都焕然一新。

放几张截图留念一下吧：

image-20240808221749290

image-20240808221816852

image-20240808221841795

image-20240808221900094

image-20240808221915253

image-20240808221938013

上面几张是首页图，上个月中旬那会儿就已经更新完毕了，再展示一下现在的文章列表：

image-20240808222040043

image-20240808222056316

image-20240808222113491

image-20240808222130413

image-20240808222149697

有没有焕然一新的感觉呢，这些都是我最喜欢的图片呢。

这次的文章首页整顿就先到这里，下次再见。

站点生成

前言

准备工作

  • 那必然是提前配置好 Node.js 环境了，这里不详细阐述，如有需请移步至文章：《配置指南-掌握 Node.js 配置》

建站

VuePress

推荐阅读：（2023/11/27 晚）

Getting Started | VuePress (vuejs.org)

VuePress 起步 - VuePress 中文网 (caibaojian.com)

快速上手 | VuePress (vuejs.org)

  • 跟着官网操作，简简单单（手动安装和快速安装二选一即可，前者能更好的清楚执行每一条命令的目的，后者则是一键安装）：
  • 快速安装在指定目录下，执行一条命令
1
yarn create vuepress-site [optionalDirectoryName]
  • 执行这条语句后，会报错：

image-20230624230135176

1
mkdir vuepress-starter && cd vuepress-starter
  • 使用首选包管理器初始化
1
yarn init
  • 在本地安装 VuePress
1
yarn add -D vuepress
  • 创建您的第一个文档
1
mkdir docs && echo '# Hello VuePress' > docs/README.md
  • 在 package.json 下添加如下配置
1
2
3
4
5
6
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  • 本地开启文档站点
1
yarn docs:dev

image-20230704120752939

  • 本地开启文档站点成功！效果如下：

image-20230704120855402

VuePress（新的尝试）

  • 哎，全局安装 Vuepress 不支持了，本来挺好用的：
1
yarn init / npm init
1
yarn global add vuepress / npm install -g vuepress
  • 直接在 Github 下载了官方文档源码，呃，还是局部安装吧

下载地址：vuejs/vuepress at v1.9.10 (github.com)

  • 拉取代码后执行依次以下命令，即可成功在本地部署文档站点：
1
yarn install
1
yarn dev
  • 效果如下：

image-20231127233627342

  • 这两天在研究这个 Vuepress，感觉比 VitePress 更成熟、更好用
  • 等我把局部安装的配置搞清楚之后，再来此处作详细记录（2023/11/27 晚）

Vdoing

  • 这里先简单记录下最近遇到的语法吧：
1
2
3
[超链接](http://www.baidu.com)

[Markdown](https://xugaoyi.com/pages/ad247c4332211551/)
  • 链接前添加http或https，这样就可以展示超链接后的图标了：（2023/12/14 晚）

image-20231215001924122

VitePress

1
npm install -D vitepress
1
pnpm add -D vitepress
1
yarn add -D vitepress
  • 注意，如若使用后两条命令来安装 vitepress，请确保 pnpm 和 yarn 包管理器已正确安装
  • 有兴趣了解这方面内容的话，请转移至《理解 npm、pnpm 和 yarn：选出最适合你的包管理器》一文中查看
  • 我们选择使用 yarn 来安装，效果如下：

image-20230704113352687

  • 等待安装完成后，方可执行下一步操作：
  • 初始化构建工具 vitepress
  • 当然，选择执行以下其中一条命令即可：
1
npx vitepress init
1
pnpm dlx vitepress init
  • 执行效果如下：
image-20230704114248112
  • 执行命令后，会提示你输入初始化路径、项目名、项目描述和主题配置等等，我们这里就全部设置为默认
  • 这一步执行完毕后，会在本地指定路径生成 VitePress 文档站点目录，效果如下：

image-20230704114539011

  • 有关该目录下文件作用以及相关配置，将会在《大道至简：快速搭建博客与文档站点的终极指南 3-0》一文中详细讲解到，接下来我们在本地启动文档站点
  • 在该目录下，执行以下命令中的其中一条：
1
npm run docs:dev
1
pnpm run docs:dev
1
yarn docs:dev
  • 文档站点在本地启动成功！效果如下：

image-20230704114926261

image-20230704115516440

image-20230704185140665

  • 我们可以看到，整个页面的结构和排版都是默认主题样式的

主题配置

默认主题

第三方主题

1
pnpm create vuepress-theme-hope hope-project		#该目录下直接下载安装主题
1
pnpm create vuepress-theme-hope add .				#空目录下下载安装主题
  • 执行命令，安装过程中会有提示，我们这里都选择默认，如图所示：

image-20230704175808597

  • 安装完成，在 hope-project 目录下执行以下任意一条命令，在本地开启文档站点服务
1
npm run docs:dev
1
pnpm run docs:dev
1
yarn docs:dev
  • 效果如下：

image-20230704201042950

image-20230704201106296

  • 基本的文档站点主题配置完成！

站点生成器

  1. vuepress（支持 vue 语法、插件丰富）（2023/08/22 午）
  2. docsify（简单易用、插件多、轻量）
  3. hugo（主题略少）
  4. hexo（主题略少）
  5. vitepress
  6. storybook（展示组件库）
  7. wordpress（搭建个人博客）
  8. docute
  9. dumi（React 展示项目文档，展示组件库）
  10. jekyll
  11. gatsby

评论功能

2024 年 7 月 17 日

🌭 推荐阅读：

Hexo 博客添加评论功能 - eagle.supper - 博客园 (cnblogs.com)

Hexo giscus 配置评论功能_hexo 博客 giscus-CSDN 博客

hexo 博客的评论功能-腾讯云开发者社区-腾讯云 (tencent.com)

Hexo 博客添加 GitHub 评论功能-阿里云开发者社区 (aliyun.com)

为使用 hexo 搭建的博客加入评论系统 gitalk - 简书 (jianshu.com)

Hexo 搭建博客系列：（五）Hexo 添加不蒜子和 LeanCloud 统计无标题文章 - 简书 (jianshu.com)

hexo 魔改 | 添加 Valine 评论系统_hexo butterfly valine 评论-CSDN 博客

🍖 尤其推荐下面这篇文档，因为我使用的 Hexo 建站主题是 Fluid ，不同主题的评论插件相关配置还是有些许出入。

hexo-fluid 添加 valine 评论记录-腾讯云开发者社区-腾讯云 (tencent.com)

基本实现

2024 年 7 月 17 日

介绍 | Valine 一款快速、简洁且高效的无后端评论系统。

image-20240717104524454

我们使用 Valine 无后端评论系统，这篇文档写的相当详细了，跟着教程走就行。

LeanCloud

这个网站下注册登陆账号，再经过实名制和邮箱验证之后，创建的应用就可以正常使用了。

进入控制台后点击左上角创建应用：

创建应用：

image-20240717104432947

image-20240717105115111

应用创建好以后，进入刚刚创建的应用，选择左边的设置>应用凭证，然后就能看到你的AppID和AppKey了：

image-20240717105433523

image-20240717105403514

然后在博客主题的 _config.yml 下做好相关评论插件的配置：

1
2
3
4
5
6
7
8
# 评论插件
# Comment plugin
comments:
  enable: true
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  type: valine

搜索 valine，可看到如下，将 enbled:true, 并填写 appid， appkey和 REST API 服务地址。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
  appId: T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz
  appKey: XFkgzzvzNo3J3uNCbBiSOFKc
  path: window.location.pathname
  placeholder:
  avatar: "retro"
  meta: ["nick", "mail", "link"]
  requiredFields: []
  pageSize: 10
  lang: "zh-CN"
  highlight: false
  recordIP: false
  serverURLs: https://t1huhh9k.lc-cn-n1-shared.com
  emojiCDN:
  emojiMaps:
  enableQQ: false

还需要设置安全域名，用来维护数据安全，不过暂时我用不到的：

image-20240717114125237

再次尝试部署博客，可以看到博文的评论功能已经开启了：

image-20240717114301853

可以自由选择评论昵称，邮箱地址，输入评论信息就能直接在文章下发表评论了。

我叫来我的好兄弟测试了一番，评论功能一切正常，我这个站主还能删评论的，真不错：

image-20240717114525124

在网页中引入无后端的 valine 评论系统，使用 leancloud 作为免费存储和评论管理 - 简书 (jianshu.com)

image-20240717114554410

样式美化

2024 年 7 月 17 日

把 valine.ejs 下的这段代码，粘贴到 about.ejs 最后，就能实现关于页面的评论功能了：

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
<% if (theme.valine.appId && theme.valine.appKey) { %>
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('<%= url_join(theme.static_prefix.valine, 'https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js') %>', function() {
        var options = Object.assign(
          <%- JSON.stringify(theme.valine || {}) %>,
          {
            el: "#valine",
            path: <%= theme.valine.path %>,
            master: "<%= theme.valine.master%>",
            friends: "<%= theme.valine.friends%>",
            tagMeta: ["博主","友人","访客"],
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          var imgSelector = '#valine .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>
<% } %>

Hexo’s Fluid 主题私人定制（持续更新） - Eren の 宇宙船 (erenship.com)

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
<div id="vcomments"></div>
<script type="text/javascript">
  function loadValine() {
    addScript(
      "https://cdn.staticfile.org/valine/1.4.14/Valine.min.js",
      function () {
        new Valine({
          el: "#vcomments",
          app_id: "T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz",
          app_key: "XFkgzzvzNo3J3uNCbBiSOFKc",
          placeholder: "留下点什么叭... ᶘ ᵒᴥᵒᶅ（自行修改）",
          path: window.location.pathname,
          avatar: "monsterid",
          meta: ["nick", "mail", "link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "https://t1huhh9k.lc-cn-n1-shared.com",
        });
      }
    );
  }
  createObserver(loadValine, "vcomments");
</script>
<noscript
  >Please enable JavaScript to view the
  <a
    href="https://valine.js.org"
    target="_blank"
    rel="nofollow noopener noopener"
    >comments powered by Valine.</a
  ></noscript
>

MD5 在线加密 - MD5 加密工具 - MD5 在线生成 (bmcx.com)

研究了一中午，评论功能不需要优化了，本来就是为了无需登录而设置的，允许读取 QQ 信息头像也不错的。

自定义背景：

在 themes/next/layout/_partials/footer.ejs 中引入：

1
2
3
4
5
6
7
8
9
10
11
<!-- 评论框美化 -->
<style>
    #comments .veditor{
        min-height: 10rem;
        background-image: url(http://blog.memory-life.icu/bradge.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-color: rgba(255,255,255,0);
        resize: none;}
</style>

image-20240717192732453

浏览量

2024 年 7 月 17 日

Hexo-fluid 主题设置统计博客阅读量_hexo-theme-fluid 字数统计-CSDN 博客

Hexo 搭建博客系列：（五）Hexo 添加不蒜子和 LeanCloud 统计无标题文章 - 简书 (jianshu.com)

1
2
3
4
5
6
7
8
9
# 浏览量计数
# Number of visits
views:
  enable: true
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: "leancloud"
  format: "{} 次"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
# LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
leancloud:
  appId: T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz
  appKey: XFkgzzvzNo3J3uNCbBiSOFKc
  # REST API 服务器地址，国际版不填
  # Only the Chinese mainland users need to set
  server_url: https://t1huhh9k.lc-cn-n1-shared.com
  # 统计页面时获取路径的属性
  # Get the attribute of the page path during statistics
  path: window.location.pathname
  # 开启后不统计本地路径( localhost 与 127.0.0.1 )
  # If true, ignore localhost & 127.0.0.1
  ignore_local: false

配置完成后，部署博客。从部署的过程就能看出来，访问次数统计其实已经生效了：

image-20240717120705254

image-20240717120837928

好像还不管用。。。

介绍 | Valine 一款快速、简洁且高效的无后端评论系统。

1
2
3
4
5
<!-- id 将作为查询条件 -->
<span id="<Your/Path/Name>" class="leancloud_visitors" data-flag-title="Your Article Title">
<em class="post-meta-item-text">阅读量 </em>
<i class="leancloud-visitors-count">1000000</i>
</span>

身份标识

2024 年 7 月 17 日

Hexo’s Fluid 主题私人定制（持续更新） - Eren の 宇宙船 (erenship.com)

MD5 在线加密 - MD5 加密工具 - MD5 在线生成 (bmcx.com)

分别加密自己的邮箱号和好友的邮箱号，得到 MD5 字符串：

image-20240717205234041

更新配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
  appId: T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz
  appKey: XFkgzzvzNo3J3uNCbBiSOFKc
  path: window.location.pathname
  placeholder: 填取QQ邮箱号后评论，支持读取头像以及新消息提醒，留下点什么叭... ᶘ ᵒᴥᵒᶅ
  avatar: Gravatar
  meta: ["nick", "mail", "link"]
  requiredFields: []
  pageSize: 10
  lang: "zh-CN"
  highlight: true
  recordIP: false
  serverURLs: https://t1huhh9k.lc-cn-n1-shared.com
  emojiCDN:
  emojiMaps:
  enableQQ: true
  master: 8c9b6d6637904da62d74d019cc6982de # 你邮箱的md5加密(百度md5在线加密)
  friends: 0188229a9cfc284176ea9135cb9514cc # 好友邮箱的md5加密
  visitor: 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
<% if (theme.valine.appId && theme.valine.appKey) { %>
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('<%= url_join(theme.static_prefix.valine, 'https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js') %>', function() {
        var options = Object.assign(
          <%- JSON.stringify(theme.valine || {}) %>,
          {
            el: "#valine",
            path: <%= theme.valine.path %>,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar: "<%= theme.valine.avatar %>",

 		   ............................................

            master: "<%= theme.valine.master%>",
            friends: "<%= theme.valine.friends%>",
            tagMeta: ["博主","友人","访客"],
            visitor: <%= theme.valine.visitor %> // 阅读量统计
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          var imgSelector = '#valine .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>
<% } %>

这样，博主、友人和访客的身份就能成功区分了：

image-20240717202230250

自定义背景

2024 年 7 月 17 日

Hexo NexT 评论系统 Valine 的使用_hexo next valine-CSDN 博客

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

<!-- 评论框美化 -->
<style>
    #comments .veditor{
        min-height: 11rem;
        background-image: url(http://blog.memory-life.icu/pathway0716.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-color: rgba(255,255,255,0);
        resize: none;}
</style>

image-20240717202505652

顺便了解下 CSS 基础语法，font-size 字体大小自适应：

CSS 字体大小怎么实现自适应屏幕 - 问答 - 亿速云 (yisu.com)

  1. 使用rem实现自适应屏幕：
1
2
3
4
5
6
html {
  font-size: 16px; /* 可根据需要设置根元素的字体大小 */
}
h1 {
  font-size: 2rem; /* 相对于根元素的字体大小，此处为32px */
}

复制代码

  1. 使用em实现自适应屏幕：
1
2
3
4
5
6
body {
  font-size: 16px; /* 可根据需要设置父元素的字体大小 */
}
h1 {
  font-size: 2em; /* 相对于父元素的字体大小，此处为32px */
}

复制代码

  1. 使用vw实现自适应屏幕：
1
2
3
h1 {
  font-size: 5vw; /* 相对于视口宽度的百分比，此处为屏幕宽度的5% */
}

2024 年 7 月 22 日

关于页评论背景失败，不搞了就这样子吧。

1
2
3
4
5
6
7
8
9
10
11
<!-- 评论框美化 -->
<style>
    #valine{
        height: 20vh;
        background-image: url(http://blog.memory-life.icu/pathway0716.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right 6vh;
        background-color: rgba(255,255,255,0);
        resize: none;}
</style>

image-20240722111843833

自定义表情

2024 年 7 月 17 日

自定义表情 | Valine 一款快速、简洁且高效的无后端评论系统。

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
// 设置Bilibili表情包地址
            emojiCDN: '//i0.hdslb.com/bfs/emote/',
            // 表情title和图片映射
            emojiMaps: {
                "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
                "tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
                "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
                "tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
                "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
                "tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
                "tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
                "tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
                "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
                "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
                "tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
                "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
                "tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
                "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
                "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
                "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
                "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
                "tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
                "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
                "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
                "tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
            },

2024 年 7 月 22 日

继续来 B 站抓取更多表情：

image-20240722112223584

邮箱提醒

2024 年 7 月 17 日

zhaojun1998/Valine-Admin: 一个 Valine 的拓展应用，用来增强 Valine 的邮件通知。 (github.com)

自定义页面

2024 年 7 月 17 日

我直到今晚才发现，使用 Hexo 搭建的静态博客站点本质上还是前端三件套构成的，有很高的自由度来重构页面。

我开始尝试去了解各个页面对应的代码位置，再用我贫瘠的 HTML + CSS 基础去美化页面，实现自定义页面。

中台前端框架 AntDesignPro document.ejs 文件详解-CSDN 博客

页脚优化

2024 年 7 月 17 日

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="footer-inner">
  <% if (theme.footer.content) { %>
    <div class="footer-content">
      <%- theme.footer.content %>
    </div>
  <% } %>
  <% if (theme.footer.statistics.enable) { %>
    <%- partial('_partials/footer/statistics.ejs') %>
  <% } %>
  <% if(theme.footer.beian.enable) { %>
    <!-- 备案信 ICP for China -->
    <%- partial('_partials/footer/beian.ejs') %>
  <% } %>
  <% if(theme.web_analytics.cnzz) { %>
    <!-- cnzz Analytics Icon -->
    <span id="cnzz_stat_icon_<%= theme.web_analytics.cnzz %>" style="display: none"></span>
  <% } %>
</div>
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
<footer class="text-center mt-5 py-3">

  <%- theme.footer.content %>
  <!-- 添加网站运行时间 -->
  <div class="footer-content">
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script>
      var now = new Date();
      function createtime(){
          var grt= new Date("04/03/2020 00:00:00");//此处修改你的建站时间或者网站上线时间
          now.setTime(now.getTime()+250);
          days = (now - grt ) / 1000 / 60 / 60 / 24;
          dnum = Math.floor(days);
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
          hnum = Math.floor(hours);
          if(String(hnum).length ==1 ){
              hnum = "0" + hnum;
          }
          minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
          mnum = Math.floor(minutes);
          if(String(mnum).length ==1 ){
                    mnum = "0" + mnum;
          }
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
          snum = Math.round(seconds);
          if(String(snum).length ==1 ){
                    snum = "0" + snum;
          }
          document.getElementById("timeDate").innerHTML = "🚀 &nbsp"+dnum+"&nbsp天";  //此次自定义显示内容
          document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
      }  //此次自定义显示内容
      setInterval("createtime()",250);
      </script>
    </div>
  </div>
  <!-- 统计访问量信息 -->
  <%- partial('_partial/statistics.ejs') %>
  <!-- 个人和备案信息 -->
  <div>©2020-2021<a href="https://clearlight.blog.csdn.net/">ClearlightY</a> <a href="http://beian.miit.gov.cn/">冀ICP备19019307号-2</a></div>
   <!-- <%- partial('_partial/beian.ejs') %> -->
  <% if(theme.web_analytics.cnzz) { %>
    <!-- cnzz Analytics Icon -->
    <span id="cnzz_stat_icon_<%- theme.web_analytics.cnzz %>" style="display: none"></span>
  <% } %>
</footer>

<!-- SCRIPTS -->
<%- partial('_partial/scripts.ejs') %>

首页优化

2024 年 7 月 17 日

Hexo Fluid 主题 细节优化_hexo-fluid 标签页优化-CSDN 博客

Hexo’s Fluid 主题私人定制（持续更新） - Eren の 宇宙船 (erenship.com)

页脚优化不打紧的，谁没事会去看页脚，所以我把页脚下的建站时间显示，放在了博客首页中，效果如下：

image-20240717131937567

只需要编辑 banner.ejs 文件即可：

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
<%
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha)
var subtitle = page.subtitle || page.title
%>
<div id="banner" class="banner" <%- theme.banner && theme.banner.parallax && 'parallax=true' %>
     style="background: url('<%- url_for(banner_img) %>') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">

    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)">
      <div class="banner-text text-center fade-in-up">

        <div class="h2">
          <% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %>
            <span id="subtitle" data-typed-text="<%= subtitle %>"></span>
          <% } else { %>
            <span id="subtitle"><%- subtitle %></span>
          <% } %>
        </div>


        <% if (is_post()) { %>
          <%- inject_point('postMetaTop') %>
        <% } %>

        <!-- 添加网站运行时间 -->
        <div class="footer-content">
          <div>
            <span id="timeDate"></span>
            <span id="times"></span>
            <script>
            var now = new Date();
            function createtime(){
                var grt= new Date("03/07/2023 00:00:00");//此处修改你的建站时间或者网站上线时间
                now.setTime(now.getTime()+250);
                days = (now - grt ) / 1000 / 60 / 60 / 24;
                dnum = Math.floor(days);
                hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
                hnum = Math.floor(hours);
                if(String(hnum).length ==1 ){
                    hnum = "0" + hnum;
                }
                minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
                mnum = Math.floor(minutes);
                if(String(mnum).length ==1 ){
                          mnum = "0" + mnum;
                }
                seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
                snum = Math.round(seconds);
                if(String(snum).length ==1 ){
                          snum = "0" + snum;
                }
                document.getElementById("timeDate").innerHTML = "🚀 &nbsp"+dnum+"&nbsp天";  //此次自定义显示内容
                document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
            }  //此次自定义显示内容
            setInterval("createtime()",250);
            </script>
          </div>
        </div>

      </div>


      <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404') { %>
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      <% } %>
    </div>
  </div>
</div>

简直像是打开了新世界，这样的话，我的博客可优化的地方还很多，而且相对来说更加自由了。

曲线救国，把文章内容页面的建站时间显示删除了：

1
2
3
if (!window.location.href.includes("/20")) {
  setInterval("createtime()", 250); // 只有当URL不包含'specific-page'时，才调用createtime
} //此次自定义显示内容

image-20240718112111679

博文排版

2024 年 7 月 31 日

今年四月底那会儿就执手优化过部分博客，可惜这项工作没有做到位。

五月初 Gitee Pages 服务停用，在那之后一个多月的时间里我的博客是没有更新的，准确的说没有同步本地到线上。

好在六月初初步解决了这个问题，六月下旬最终完善博客访问链接，六月底最终完成七牛云图床整合实现图片正常显示。

七月份中旬，我新增了博客评论功能，首页展示博客建站时间以及友情链接优化，更加深入理解了 Hexo 生成静态站点的自定义多样性。

这会儿总算能静下心来，重新排版布局这八十二篇博客的排列顺序，以及对应的博文封面图了。

日常

技术

转载

其他

公告栏

2025 年 5 月 28 日

模仿搜索页面，自定义公告栏弹窗。

1
2
3
4
5
6
7
8
<% if(theme.search.enable) { %>
     <li class="nav-item" id="search-btn">
       <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
         <i class="iconfont icon-search"></i>
       </a>
     </li>
     <% import_js(theme.static_prefix.internal_js, 'local-search.js') %>
   <% } %>

主要修改点：

  1. 将 <i class="iconfont icon-search"></i> 替换为 公告栏 文字
  2. 将 id="search-btn" 改为 id="notice-btn" 以更符合新功能
  3. 保留了原有的模态框触发功能（data-toggle="modal" 和 data-target="#modalSearch"）
1
2
3
4
5
6
7
8
<% if(theme.search.enable) { %>
     <li class="nav-item" id="notice-btn">
         <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
             公告栏
         </a>
     </li>
     <% import_js(theme.static_prefix.internal_js, 'local-search.js') %>
 <% } %>
属性值 功能 必备配合属性/类 典型场景
data-toggle="modal" 打开弹窗 data-target="#id" 弹窗、对话框
data-toggle="collapse" 展开/折叠内容 .collapse + data-target 手风琴、折叠菜单
data-toggle="dropdown" 下拉菜单 .dropdown + .dropdown-menu 导航下拉选项
data-toggle="tab" 切换标签页 .nav-tabs + .tab-content 多标签内容切换
data-toggle="tooltip" 提示框 title + JS 初始化 按钮提示 
1
2
notice:
  enable: true # 启用公告栏
1
2
3
4
5
6
notice:
  enable: true # 启用公告栏
  title: "网站公告" # 弹窗标题
  content: |
    <p>2024-02-01：系统维护通知</p>
    <p>2024-01-15：新增公告栏功能</p>

image-20250528174424683

控制台测试弹窗，执行结果表明 HTML 未渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 临时插入模态框
$("body").append(`
<div class="modal fade" id="modalNotice">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">测试弹窗</div>
    </div>
  </div>
</div>
`);

// 尝试显示
$("#modalNotice").modal("show");

image-20250528174629364

明白了显示原理，那就是页面未渲染成功，全局搜索search.ejs页面在哪里被引用，最终定位到layout.ejs博客布局页面。

1
2
3
<% if (theme.search.enable) { %>
  <%- partial('_partials/search.ejs') %>
<% } %>
1
2
3
<% if (theme.search.enable) { %>
    <%- partial('_partials/notice.ejs') %>
<% } %>

这样子调整，公告栏终于成功显示：

image-20250528175345043

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="modal fade"
     id="modalNotice"
     tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">公告</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                "这里是公告内容"
            </div>
        </div>
    </div>
</div>

实现公告栏弹窗自动弹出。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if(!localStorage.getItem('hexoAnnounceShown')) {
      $('#modalNotice').modal('show');
      localStorage.setItem('hexoAnnounceShown', 'true');

      // 可选：设置24小时后重新显示
      setTimeout(() => {
        localStorage.removeItem('hexoAnnounceShown');
      }, 86400000);
    }
  });
</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
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
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查是否首次访问（使用更安全的存储键名）
    if (!sessionStorage.getItem('hasShownPopup')) {
        // 创建弹窗HTML结构
        const popupHTML = `
        <div class="popup-overlay" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        ">
            <div class="popup-content" style="
                background: white;
                padding: 20px;
                border-radius: 5px;
                max-width: 80%;
            ">
                <h3>重要公告</h3>
                <p>欢迎访问我们的网站！</p>
                <button class="close-btn" style="
                    padding: 5px 10px;
                    background: #007bff;
                    color: white;
                    border: none;
                    border-radius: 3px;
                    cursor: pointer;
                ">我知道了</button>
            </div>
        </div>
        `;

        // 插入到页面
        document.body.insertAdjacentHTML('beforeend', popupHTML);

        // 添加关闭事件
        document.querySelector('.popup-overlay .close-btn').addEventListener('click', function() {
            document.querySelector('.popup-overlay').style.display = 'none';
            // 标记为已显示（使用sessionStorage关闭浏览器后失效）
            sessionStorage.setItem('hasShownPopup', 'true');
        });
    }
});
</script>

image-20250528181435257

。。这是个什么效果，够难看的，不过基本实现了，现在需要替换这个难看的页面。

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
<script>
  // 页面加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    // 检查是否首次访问
    if (!localStorage.getItem('hasShownPopup')) {
      // 动态加载notice.ejs内容
      fetch('_partials/notice.ejs')  // 替换为实际路径
        .then(response => response.text())
        .then(html => {
          // 插入到页面body末尾
          document.body.insertAdjacentHTML('beforeend', html);

          // 手动初始化Bootstrap模态框
          $('#modalNotice').modal('show');

          // 标记为已显示
          localStorage.setItem('hasShownPopup', 'true');

          // 监听关闭事件
          $('#modalNotice').on('hidden.bs.modal', function () {
            // 可选的后续处理
          });
        })
        .catch(error => {
          console.error('加载公告栏失败:', error);
          // 备用方案：显示简单弹窗
          const fallbackHTML = `
                <div class="modal-backdrop" style="/* 样式 */">
                    <div class="modal-content">/* 内容 */</div>
                </div>`;
          document.body.insertAdjacentHTML('beforeend', fallbackHTML);
        });
    }
  });
</script>

效果不错。

iconfont-阿里巴巴矢量图标库

1
2
3
4
5
6
7
8
9
<% if(theme.search.enable) { %>
      <li class="nav-item" id="search-btn">
          <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalNotice" aria-label="Search">
              <i class="iconfont icon-book"></i>
              <span>公告</span>
          </a>
      </li>
      <% import_js(theme.static_prefix.internal_js, 'local-search.js') %>
  <% } %>

在zh-CH.yml配置中，编写公告基本配置。

1
2
3
notice:
  title: "公告"
  content: "公告内容"
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
<!-- 博客 - 公告栏 -->
<div
        class="modal fade"
        id="modalNotice"
        tabindex="-1"
        role="dialog"
        aria-labelledby="ModalLabel"
        aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">
                    <%= __('notice.title') %>
                </h4>
                <button
                        type="button"
                        id="local-search-close"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                >
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-5">
                    <input
                            type="text"
                            id="local-search-input"
                            class="form-control validate"
                    />
                    <label data-error="x" data-success="v" for="local-search-input"
                    ><%= __('notice.content') %></label
                    >
                </div>
                <div class="list-group" id="local-search-result"></div>
            </div>
        </div>
    </div>
</div>

image-20250528183857628

新的公告栏。

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!-- 博客 - 公告栏 -->
<div class="modal fade" id="modalNotice" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content" style="
      background: linear-gradient(135deg, #fff9f0 0%, #fff3e0 100%);
      border: 1px solid #e6d8b5;
      box-shadow: 0 5px 20px rgba(0,0,0,0.15);
      border-radius: 10px;
      overflow: hidden;
    ">
      <!-- 公告头部 -->
      <div class="modal-header text-center" style="
        background: #8b6d3b;
        color: white;
        border-bottom: 2px solid #7a5f32;
        padding: 15px 20px;
      ">
        <h4 class="modal-title w-100 font-weight-bold" style="
          font-family: 'Microsoft YaHei', sans-serif;
          letter-spacing: 1px;
          text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        ">
          <i class="fas fa-bullhorn mr-2"></i>
          <%= __('notice.title') || '站点公告' %>
        </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;">
          <span aria-hidden="true" style="font-size: 1.5em;">&times;</span>
        </button>
      </div>

      <!-- 公告内容区 -->
      <div class="modal-body" style="padding: 25px;">
        <!-- 静态公告列表 -->
        <div class="announcement-list" style="margin-bottom: 20px;">
          <div class="announcement-item mb-3 p-3" style="
            background: white;
            border-left: 4px solid #8b6d3b;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
          ">
            <h5 style="color: #5c4d3d; font-weight: 600;">
              <i class="fas fa-calendar-check mr-2"></i>系统维护通知
            </h5>
            <p class="mb-0" style="color: #666; line-height: 1.6;">
              站点将于本周六凌晨2:00-4:00进行例行维护，期间可能出现短暂无法访问的情况。
            </p>
            <div class="text-right mt-2" style="color: #999; font-size: 0.85em;">
              <i class="far fa-clock mr-1"></i>2023-11-15
            </div>
          </div>

          <div class="announcement-item mb-3 p-3" style="
            background: white;
            border-left: 4px solid #6b8b3b;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
          ">
            <h5 style="color: #4d5c3d; font-weight: 600;">
              <i class="fas fa-book-open mr-2"></i>阅读体验升级
            </h5>
            <p class="mb-0" style="color: #666; line-height: 1.6;">
              我们优化了文章排版和字体渲染，夜间模式现已支持自定义色调调节功能。
            </p>
          </div>
        </div>

        <!-- 动态搜索区（保留原有结构） -->
        <div class="md-form mb-4">
          <input type="text" id="local-search-input" class="form-control validate" placeholder="搜索公告..." style="
            border-radius: 20px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
          ">
        </div>

        <!-- 公告搜索结果 -->
        <div class="list-group" id="local-search-result" style="
          max-height: 300px;
          overflow-y: auto;
          border-radius: 8px;
        "></div>
      </div>

      <!-- 公告页脚 -->
      <div class="modal-footer" style="
        background: #f8f5ee;
        border-top: 1px solid #e6d8b5;
        padding: 12px 20px;
        justify-content: space-between;
      ">
        <small style="color: #8b6d3b;">
          <i class="fas fa-info-circle mr-1"></i>公告更新于 <%= new Date().toLocaleDateString() %>
        </small>
        <button type="button" class="btn btn-sm" data-dismiss="modal" style="
          background: #8b6d3b;
          color: white;
          border-radius: 4px;
          padding: 5px 15px;
          border: none;
        ">
          <i class="fas fa-check mr-1"></i>我知道了
        </button>
      </div>
    </div>
  </div>
</div>

image-20250528184504151

这个效果确实有点一言难尽，不过仍有可取之处。

1
2
3
4
5
<div class="modal-body">
      <div class="md-form">
          <label data-error="x" data-success="v" for="local-search-input"><%= __('notice.keyword') %></label>
      </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 静态公告列表 -->
           <div class="announcement-list" style="margin-bottom: 20px;">
               <div class="announcement-item mb-3 p-3">
                   <h5 style="color: #d38532; font-weight: 600;">
                       <i class="fas fa-calendar-check mr-2"></i>系统维护通知
                   </h5>
                   <p class="mb-0" style="line-height: 1.6;">
                       站点将于本周六凌晨2:00-4:00进行例行维护，期间可能出现短暂无法访问的情况。
                   </p>
               </div>

               <div class="announcement-item mb-3 p-3">
                   <h5 style="color: #6cc70b; font-weight: 600;">
                       <i class="fas fa-book-open mr-2"></i>阅读体验升级
                   </h5>
                   <p class="mb-0" style=" line-height: 1.6;">
                       我们优化了文章排版和字体渲染，夜间模式现已支持自定义色调调节功能。
                   </p>
               </div>
           </div>

image-20250528190107431

基本调整完毕。

1
2
3
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;">
    <span aria-hidden="true" style="font-size: 1.5em;">&times;</span>
</button>
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
<!-- 博客 - 公告栏 -->
<div class="modal fade" id="modalNotice" tabindex="-1" role="dialog" aria-hidden="true"
     style="font-family: 'Ma Shan Zheng', cursive; /* 需引入此中文字体 */color: #ffffff;">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
        <div class="modal-content" style="border-radius: 6px;">
            <!-- 公告头部 -->
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold"
                    style="font-family: 'Microsoft YaHei', sans-serif;letter-spacing: 1px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);color: #ffffff">
                    <i class="fas fa-bullhorn mr-2"> <%= __('notice.title') || '站点公告' %></i>
                </h4>
            </div>

            <!-- 公告内容区 -->
            <div class="modal-body" style="padding: 25px;">
                <!-- 静态公告列表 -->
                <div class="announcement-list" style="margin-bottom: 20px;">
                     <div class="announcement-item mb-3 p-3">
                        <h5 style="color: #d38532; font-weight: 600;">
                            <i class="fas fa-calendar-check mr-2"></i>系统维护通知
                        </h5>
                        <p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            站点将于本周六凌晨2:00-4:00进行例行维护，期间可能出现短暂无法访问的情况。
                        </p>
                    </div>

                    <div class="announcement-item mb-3 p-3">
                        <h5 style="color: #6cc70b; font-weight: 600;">
                            <i class="fas fa-book-open mr-2"></i>阅读体验升级
                        </h5>
                        <p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            我们优化了文章排版和字体渲染，夜间模式现已支持自定义色调调节功能。
                        </p>
                    </div>
                </div>

                <!-- 公告页脚 -->
                <div class="modal-footer"
                     style="border-top: 1px solid #ffffff;padding: 12px 20px;justify-content: space-between;">
                    <small style="color: #ffffff;">
                        <i class="iconfont icon-pen"></i>
                        <i class="fas fa-info-circle mr-1"></i>芒种前夕 · 旅途第813天
                        · <%= new Date().toLocaleDateString() %>
                    </small>
                    <button id="confirm-btn" type="button" class="btn btn-sm" data-dismiss="modal" style="background: #a0a0a0;color: #ffffff;border-radius: 4px;padding: 5px 15px;border: none;">
                        <i class="fas fa-check mr-1" style="color: #ffffff;font-size: medium">心已阅</i>
                    </button>
                </div>
            </div>
        </div>
    </div>

image-20250528195214641

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
<!-- 公告内容区 -->
            <div class="modal-body" style="padding: 25px;">
                <!-- 静态公告列表 -->
                <div class="announcement-list" style="margin-bottom: 20px;">
                    <div class="announcement-item mb-3 p-3">
                        <h2 style="color: #d38532; font-weight: 600;">
                            <i class="fas fa-calendar-check mr-2"></i>系统维护通知
                        </h2>
                        <p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            你们好！
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            建站后的第813天，在百忙之中总算又能抽出时间来，对整个博客站点功能做整体的规划及优化完善。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            在刚刚过去的几年时间里，往事皆以笔墨挥毫于时光素笺之上，数百天如一日，故事的书写从未间断过。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            时光悠悠，日月如流，过往的蹉跎岁月总在不经意间在心间回眸。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            俯仰之间，轻舟已过万重山。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            蹉跎之处，往事皆成云烟散。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            这几年的时光过得太快了，好像过去这段岁月里的所有事情都发生在一瞬间。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            这几年的时光同样太久了，久到那些时日里仿佛囊括了自己的整个前半生。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            八百余个昼夜，当时只道是地久天长，如今回望，不过浮光掠影间的一瞬。
                        </p>
                    </div>
                    <div class="announcement-item mb-3 p-3">
                        <h2 style="color: #6cc70b; font-weight: 600;">
                            <i class="fas fa-book-open mr-2"></i>阅读体验升级
                        </h2>
                        <p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            言简意赅，简明扼要，即刻值此记录下本站点今日以来的功能调整，更新日志以及后续的扩展规划。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            1、新增博文“溯源计划”，旨在用先进的数字技术留住过去的旧时光，让家族的记忆在数字云端生长发芽，全站博文数量已达90+。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            2、自去年夏天站点新增了“评论回复”功能后，至今时隔十余月，在芒种前夕本站久违地上线“围栏告示”功能，本公告栏会不定时更新，持续跟进记录最新站点功能调整日志，更多精彩内容请敬请期待。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            3、最近几周时间里，考虑到图文流量费用收取问题，暂时关闭了七牛云对象存储私有空间访问权限，故博文内的图文无法正常预览，择日考虑开启访问权限。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            4、后续计划实现壁纸下载功能，均为个人收集的共150+超高分辨率精美壁纸，提供在线预览以及下载功能。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            5、规划完善文章内分页功能，并提供“最近更新”的文章列表，计划收录更新率较高的文章，譬如：阳台日记、叙事之外、岁月如歌、游戏人生等等，尽可能多的提升在线浏览和阅读体验。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            6、持续优化完善友链页面，整理归档个人常用的高质量网站合集，无偿分享给有缘人。
                        </p><p class="mb-0" style="color: #ffffff; line-height: 1.6;">
                            此公告最后更新于：2025/05/28晚。
                        </p>
                    </div>
                </div>

image-20250528231020442

看着总感觉怪怪的。

1
2
3
<small style="display: block; font-family: 'STKaiti', serif; font-size: 0.6em; color: #a0a0a0; margin-top: 3px;">
            旧梦轻拾 · 谨识
        </small>
1
2
3
4
<span style="position: absolute; right: 0; bottom: 0; font-family: 'STKaiti';
       color: #c12c1f; font-size: 0.8em; transform: rotate(-5deg);">
    旧梦轻拾
</span>
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
91
<!-- 公告内容区 -->
          <div class="modal-body" style="padding: 2rem; max-height: 70vh; overflow-y: auto; width: 800px;">
              <!-- 图片容器（保持宽高比自适应） -->
              <div class="announcement-hero" style="margin-bottom: 2rem;">
                  <img src="https://img1.baidu.com/it/u=958843530,3826099174&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                       alt="时光溯洄题图"
                       style="width: 100%; max-height: 400px; object-fit: cover;
              border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"
                       loading="lazy"
                       srcset="
          https://example.com/path/to/2k-image.webp 2048w,
          https://example.com/path/to/1k-image.webp 1024w,
          https://example.com/path/to/mobile-image.webp 640w
       "
                       sizes="(max-width: 768px) 100vw, 80vw">
              </div>
              <!-- 静态公告列表 -->
              <div class="announcement-list">
                  <div class="announcement-item mb-4 p-4"
                       style="background: rgba(255,255,255,0.05); border-radius: 8px;">
                      <h2 style="color: #d38532; font-weight: 600; font-size: 1.5rem; margin-bottom: 1.2rem; letter-spacing: 0.5px;">
                          <i class="fas fa-calendar-check mr-2"></i>时光溯洄
                          <small style="display: block; font-size: 0.6em; color: #b8b8b8;text-align: right;">——
                              关于本站那些被数字化的晨昏</small>
                      </h2>
                      <div style="color: #e0e0e0; line-height: 1.8; font-size: 1.05rem; letter-spacing: 0.3px;">
                          <p style="margin-bottom: 1rem; text-indent: 2em;">你们好！</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em;">
                              建站后的第813天，在百忙之中总算又能抽出时间来，对整个博客站点功能做整体的规划及优化完善。</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em;">
                              在刚刚过去的几年时间里，往事皆以笔墨挥毫于时光素笺之上，数百天如一日，故事的书写从未间断过。</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em; font-style: italic; color: #b8b8b8;">
                              时光悠悠，日月如流，过往的蹉跎岁月总在不经意间在心间回眸。</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em; font-weight: 500; color: #ffffff;">
                              俯仰之间，轻舟已过万重山。</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em; font-weight: 500; color: #ffffff;">
                              蹉跎之处，往事皆成云烟散。</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em;">
                              这几年的时光过得太快了，好像过去这段岁月里的所有事情都发生在一瞬间。</p>
                          <p style="margin-bottom: 1rem; text-indent: 2em;">
                              这几年的时光同样太久了，久到那些时日里仿佛囊括了自己的整个前半生。</p>
                          <p style="margin-bottom: 0; text-align: right; font-size: 0.95rem; color: #a0a0a0;">——
                              八百余个昼夜，当时只道是地久天长，如今回望，不过浮光掠影间的一瞬。</p>
                      </div>
                  </div>

                  <div class="announcement-item mb-4 p-4"
                       style="background: rgba(255,255,255,0.05); border-radius: 8px;">
                      <h2 style="color: #6cc70b; font-weight: 600; font-size: 1.5rem; margin-bottom: 1.2rem; letter-spacing: 0.5px;">
                          <i class="fas fa-book-open mr-2"></i>墨痕新注
                          <small style="display: block; font-size: 0.6em; color: #b8b8b8;text-align: right;">——
                              功能迭代和未完成的书写</small>
                      </h2>
                      <div style="color: #e0e0e0; line-height: 1.8; font-size: 1.05rem; letter-spacing: 0.3px;">
                          <p style="margin-bottom: 1.2rem;">
                              言简意赅，简明扼要，即刻值此记录下本站点今日以来的功能调整，更新日志以及后续的扩展规划。</p>

                          <ul style="padding-left: 1.8rem; margin-bottom: 1.5rem;">
                              <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                  <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                  新增博文"溯源计划"，旨在用先进的数字技术留住过去的旧时光，让家族的记忆在数字云端生长发芽，全站博文数量已达90+。
                              </li>
                              <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                  <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                  自去年夏天站点新增了“评论回复”功能后，至今时隔十余月，在芒种前夕本站久违地上线“围栏告示”功能，本公告栏会不定时更新，持续跟进记录最新站点功能调整日志，更多精彩内容请敬请期待。
                              </li>
                              <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                  <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                  最近几周时间里，考虑到图文流量费用收取问题，暂时关闭了七牛云对象存储私有空间访问权限，故博文内的图文无法正常预览，择日考虑开启访问权限。
                              </li>
                              <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                  <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                  后续计划实现壁纸下载功能，均为个人收集的共150+超高分辨率精美壁纸，提供在线预览以及下载功能。
                              </li>
                              <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                  <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                  规划完善文章内分页功能，并提供“最近更新”的文章列表，计划收录更新率较高的文章，譬如：阳台日记、叙事之外、岁月如歌、游戏人生等等，尽可能多的提升在线浏览和阅读体验。
                              </li>
                              <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                  <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                  持续优化完善友链页面，整理归档个人常用的高质量网站合集，无偿分享给有缘人。
                              </li>
                          </ul>

                          <p style="margin-bottom: 0; text-align: right; font-size: 0.9rem; color: #8a8a8a;">
                              此公告最后更新于：<span style="color: #6cc70b;">2025/05/28晚</span>
                          </p>
                      </div>
                  </div>
              </div>
          </div>

基本完善。

【哲风壁纸】动漫-夕阳铁轨

2025 年 5 月 29 日

保留昨晚的源码。

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- 博客 - 公告栏 -->
<div class="modal fade" id="modalNotice" tabindex="-1" role="dialog" aria-hidden="true"
     style="font-family: 'Ma Shan Zheng', cursive; /* 需引入此中文字体 */color: #ffffff;">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document"
         style="font-family: 'Ma Shan Zheng', cursive;">
        <div class="modal-content" style="border-radius: 6px;">
            <!-- 公告头部 -->
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold"
                    style="font-family: 'Microsoft YaHei', sans-serif;letter-spacing: 1px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);color: #ffffff">
                    <i class="fas fa-bullhorn mr-2"> <%= __('notice.title') || '站点公告' %></i>
                    <small style="display: block; font-family: 'STKaiti', serif; font-size: 0.6em; color: #a0a0a0; margin-top: 3px;">
                        旧梦轻拾 · 谨识
                    </small>
                </h4>
            </div>

            <!-- 公告内容区 -->
            <div class="modal-body" style="padding: 2rem; max-height: 70vh; overflow-y: auto; width: 800px;">
                <!-- 图片容器（保持宽高比自适应） -->
                <div class="announcement-hero" style="margin-bottom: 2rem;">
                    <img src="http://blog.memory-life.icu/%E3%80%90%E5%93%B2%E9%A3%8E%E5%A3%81%E7%BA%B8%E3%80%91%E5%8A%A8%E6%BC%AB-%E5%A4%95%E9%98%B3%E9%93%81%E8%BD%A8.jpg"
                         alt="时光溯洄题图"
                         style="width: 100%; max-height: 400px; object-fit: cover;
                border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"
                         loading="lazy"
                         srcset="
            https://example.com/path/to/2k-image.webp 2048w,
            https://example.com/path/to/1k-image.webp 1024w,
            https://example.com/path/to/mobile-image.webp 640w
         "
                         sizes="(max-width: 768px) 100vw, 80vw">
                </div>
                <!-- 静态公告列表 -->
                <div class="announcement-list">
                    <div class="announcement-item mb-4 p-4"
                         style="background: rgba(255,255,255,0.05); border-radius: 8px;">
                        <h2 style="color: #d38532; font-weight: 600; font-size: 1.5rem; margin-bottom: 1.2rem; letter-spacing: 0.5px;">
                            <i class="fas fa-calendar-check mr-2"></i>时光溯洄
                            <small style="display: block; font-size: 0.6em; color: #b8b8b8;text-align: right;">——
                                关于本站那些被数字化的晨昏</small>
                        </h2>
                        <div style="color: #e0e0e0; line-height: 1.8; font-size: 1.05rem; letter-spacing: 0.3px;">
                            <p style="margin-bottom: 1rem; text-indent: 2em;">你们好！</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em;">
                                建站后的第813天，在百忙之中总算又能抽出时间来，对整个博客站点功能做整体的规划及优化完善。</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em;">
                                在刚刚过去的几年时间里，往事皆以笔墨挥毫于时光素笺之上，数百天如一日，故事的书写从未间断过。</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em; font-style: italic; color: #b8b8b8;">
                                时光悠悠，日月如流，过往的蹉跎岁月总在不经意间在心间回眸。</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em; font-weight: 500; color: #ffffff;">
                                俯仰之间，轻舟已过万重山。</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em; font-weight: 500; color: #ffffff;">
                                蹉跎之处，往事皆成云烟散。</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em;">
                                这几年的时光过得太快了，好像过去这段岁月里的所有事情都发生在一瞬间。</p>
                            <p style="margin-bottom: 1rem; text-indent: 2em;">
                                这几年的时光同样太久了，久到那些时日里仿佛囊括了自己的整个前半生。</p>
                            <p style="margin-bottom: 0; text-align: right; font-size: 0.95rem; color: #a0a0a0;">——
                                八百余个昼夜，当时只道是地久天长，如今回望，不过浮光掠影间的一瞬。</p>
                        </div>
                    </div>

                    <div class="announcement-item mb-4 p-4"
                         style="background: rgba(255,255,255,0.05); border-radius: 8px;">
                        <h2 style="color: #6cc70b; font-weight: 600; font-size: 1.5rem; margin-bottom: 1.2rem; letter-spacing: 0.5px;">
                            <i class="fas fa-book-open mr-2"></i>墨痕新注
                            <small style="display: block; font-size: 0.6em; color: #b8b8b8;text-align: right;">——
                                功能迭代和未完成的书写</small>
                        </h2>
                        <div style="color: #e0e0e0; line-height: 1.8; font-size: 1.05rem; letter-spacing: 0.3px;">
                            <p style="margin-bottom: 1.2rem;">
                                言简意赅，简明扼要，即刻值此记录下本站点今日以来的功能调整，更新日志以及后续的扩展规划。</p>

                            <ul style="padding-left: 1.8rem; margin-bottom: 1.5rem;">
                                <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                    <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                    新增博文"溯源计划"，旨在用先进的数字技术留住过去的旧时光，让家族的记忆在数字云端生长发芽，全站博文数量已达90+。
                                </li>
                                <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                    <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                    自去年夏天站点新增了“评论回复”功能后，至今时隔十余月，在芒种前夕本站久违地上线“围栏告示”功能，本公告栏会不定时更新，持续跟进记录最新站点功能调整日志，更多精彩内容请敬请期待。
                                </li>
                                <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                    <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                    最近几周时间里，考虑到图文流量费用收取问题，暂时关闭了七牛云对象存储私有空间访问权限，故博文内的图文无法正常预览，择日考虑开启访问权限。
                                </li>
                                <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                    <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                    后续计划实现壁纸下载功能，均为个人收集的共150+超高分辨率精美壁纸，提供在线预览以及下载功能。
                                </li>
                                <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                    <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                    规划完善文章内分页功能，并提供“最近更新”的文章列表，计划收录更新率较高的文章，譬如：阳台日记、叙事之外、岁月如歌、游戏人生等等，尽可能多的提升在线浏览和阅读体验。
                                </li>
                                <li style="margin-bottom: 0.8rem; position: relative; list-style-type: none;">
                                    <span style="position: absolute; left: -1.8rem; color: #6cc70b;">◆</span>
                                    持续优化完善友链页面，整理归档个人常用的高质量网站合集，无偿分享给有缘人。
                                </li>
                            </ul>

                            <p style="margin-bottom: 0; text-align: right; font-size: 0.9rem; color: #8a8a8a;">
                                此公告最后更新于：<span style="color: #6cc70b;">2025/05/28晚</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 公告页脚 -->
            <div class="modal-footer"
                 style="border-top: 1px solid #ffffff;padding: 12px 20px;justify-content: space-between;">
                <small style="color: #ffffff;">
                    <i class="iconfont icon-pen"></i>
                    <i class="fas fa-info-circle mr-1"></i>芒种前夕 · 旅途第813天
                    · <%= new Date().toLocaleDateString() %>
                </small>
                <button id="confirm-btn" type="button" class="btn btn-sm" data-dismiss="modal"
                        style="background: #a0a0a0;color: #ffffff;border-radius: 4px;padding: 5px 15px;border: none;">
                    <i class="fas fa-check mr-1" style="color: #ffffff;font-size: medium">心已阅</i>
                </button>
            </div>
        </div>
    </div>
</div>

适配移动端，概览。

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<div class="modal fade" id="modalNotice" tabindex="-1" role="dialog" aria-hidden="true"
     style="font-family: 'Ma Shan Zheng', cursive; color: #ffffff;">
    <div class="modal-dialog modal-dialog-scrollable" role="document"
         style="font-family: 'Ma Shan Zheng', cursive;">
        <div class="modal-content" style="border-radius: 6px;">
            <!-- 公告头部 - 响应式设计 -->
            <div class="modal-header text-center" style="padding: 1rem 1.5rem;">
                <h4 class="modal-title w-100 font-weight-bold"
                    style="font-family: 'Microsoft YaHei', sans-serif;letter-spacing: 1px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);color: #ffffff;
                           font-size: 1.5rem; /* 默认PC端大小 */
                           /* 移动端适配 */
                           @media (max-width: 768px) {
                               font-size: 1.2rem;
                           }">
                    <i class="fas fa-bullhorn mr-2"> <%= __('notice.title') || '站点公告' %></i>
                    <small style="display: block; font-family: 'STKaiti', serif; font-size: 0.6em; color: #a0a0a0; margin-top: 3px;">
                        旧梦轻拾 · 谨识
                    </small>
                </h4>
            </div>

            <!-- 公告内容区 - 响应式设计 -->
            <div class="modal-body"
                 style="padding: 2rem; /* PC端 */
                        max-height: 70vh;
                        overflow-y: auto;
                        /* 移动端适配 */
                        @media (max-width: 768px) {
                            padding: 1rem;
                            max-height: 60vh;
                        }">
                <!-- 图片容器（响应式设计） -->
                <div class="announcement-hero"
                     style="margin-bottom: 2rem; /* PC端 */
                            /* 移动端适配 */
                            @media (max-width: 768px) {
                                margin-bottom: 1rem;
                            }">
                    <img src="http://blog.memory-life.icu/%E3%80%90%E5%93%B2%E9%A3%8E%E5%A3%81%E7%BA%B8%E3%80%91%E5%8A%A8%E6%BC%AB-%E5%A4%95%E9%98%B3%E9%93%81%E8%BD%A8.jpg"
                         alt="时光溯洄题图"
                         style="width: 100%;
                                max-height: 400px; /* PC端 */
                                object-fit: cover;
                                border-radius: 4px;
                                box-shadow: 0 2px 12px rgba(0,0,0,0.1);
                                /* 移动端适配 */
                                @media (max-width: 768px) {
                                    max-height: 30vh;
                                }"
                         loading="lazy">
                </div>

                <!-- 静态公告列表 - 响应式设计 -->
                <div class="announcement-list">
                    <div class="announcement-item"
                         style="margin-bottom: 2rem; /* PC端 */
                                padding: 2rem;
                                background: rgba(255,255,255,0.05);
                                border-radius: 8px;
                                /* 移动端适配 */
                                @media (max-width: 768px) {
                                    margin-bottom: 1rem;
                                    padding: 1rem;
                                }">
                        <h2 style="color: #d38532;
                                  font-weight: 600;
                                  font-size: 1.5rem; /* PC端 */
                                  margin-bottom: 1.2rem;
                                  letter-spacing: 0.5px;
                                  /* 移动端适配 */
                                  @media (max-width: 768px) {
                                      font-size: 1.2rem;
                                      margin-bottom: 1rem;
                                  }">
                            <i class="fas fa-calendar-check mr-2"></i>时光溯洄
                            <small style="display: block; font-size: 0.6em; color: #b8b8b8;text-align: right;">——
                                关于本站那些被数字化的晨昏</small>
                        </h2>
                        <div style="color: #e0e0e0;
                                  line-height: 1.8; /* PC端 */
                                  font-size: 1.05rem;
                                  letter-spacing: 0.3px;
                                  /* 移动端适配 */
                                  @media (max-width: 768px) {
                                      line-height: 1.6;
                                      font-size: 0.95rem;
                                  }">
                            <!-- 内容保持不变 -->
                            <p style="margin-bottom: 1rem; text-indent: 2em;">你们好！</p>
                            <!-- 其余段落内容... -->
                        </div>
                    </div>

                    <!-- 第二个公告项 - 响应式设计 -->
                    <div class="announcement-item"
                         style="margin-bottom: 2rem; /* PC端 */
                                padding: 2rem;
                                background: rgba(255,255,255,0.05);
                                border-radius: 8px;
                                /* 移动端适配 */
                                @media (max-width: 768px) {
                                    margin-bottom: 1rem;
                                    padding: 1rem;
                                }">
                        <h2 style="color: #6cc70b;
                                  font-weight: 600;
                                  font-size: 1.5rem; /* PC端 */
                                  margin-bottom: 1.2rem;
                                  letter-spacing: 0.5px;
                                  /* 移动端适配 */
                                  @media (max-width: 768px) {
                                      font-size: 1.2rem;
                                      margin-bottom: 1rem;
                                  }">
                            <i class="fas fa-book-open mr-2"></i>墨痕新注
                            <small style="display: block; font-size: 0.6em; color: #b8b8b8;text-align: right;">——
                                功能迭代和未完成的书写</small>
                        </h2>
                        <div style="color: #e0e0e0;
                                  line-height: 1.8; /* PC端 */
                                  font-size: 1.05rem;
                                  letter-spacing: 0.3px;
                                  /* 移动端适配 */
                                  @media (max-width: 768px) {
                                      line-height: 1.6;
                                      font-size: 0.95rem;
                                  }">
                            <!-- 列表内容 - 响应式设计 -->
                            <ul style="padding-left: 1.8rem; /* PC端 */
                                      margin-bottom: 1.5rem;
                                      /* 移动端适配 */
                                      @media (max-width: 768px) {
                                          padding-left: 1.5rem;
                                          margin-bottom: 1.2rem;
                                      }">
                                <li style="margin-bottom: 0.8rem; /* PC端 */
                                         position: relative;
                                         list-style-type: none;
                                         /* 移动端适配 */
                                         @media (max-width: 768px) {
                                             margin-bottom: 0.6rem;
                                         }">
                                    <span style="position: absolute;
                                               left: -1.8rem; /* PC端 */
                                               color: #6cc70b;
                                               /* 移动端适配 */
                                               @media (max-width: 768px) {
                                                   left: -1.5rem;
                                               }">◆</span>
                                    新增博文"溯源计划"，旨在用先进的数字技术留住过去的旧时光...
                                </li>
                                <!-- 其余列表项... -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 公告页脚 - 响应式设计 -->
            <div class="modal-footer"
                 style="border-top: 1px solid rgba(255,255,255,0.2);
                        padding: 1rem 1.5rem; /* PC端 */
                        justify-content: space-between;
                        /* 移动端适配 */
                        @media (max-width: 768px) {
                            padding: 0.8rem;
                        }">
                <small style="color: #ffffff;
                            font-size: 0.9rem; /* PC端 */
                            /* 移动端适配 */
                            @media (max-width: 768px) {
                                font-size: 0.8rem;
                            }">
                    <i class="iconfont icon-pen"></i>
                    <i class="fas fa-info-circle mr-1"></i>芒种前夕 · 旅途第813天
                    · <%= new Date().toLocaleDateString() %>
                </small>
                <button id="confirm-btn" type="button" class="btn btn-sm" data-dismiss="modal"
                        style="background: #a0a0a0;
                               color: #ffffff;
                               border-radius: 4px;
                               padding: 0.5rem 1.2rem; /* PC端 */
                               border: none;
                               font-size: 0.9rem;
                               /* 移动端适配 */
                               @media (max-width: 768px) {
                                   padding: 0.3rem 0.8rem;
                                   font-size: 0.85rem;
                               }">
                    <i class="fas fa-check mr-1" style="color: #ffffff;">心已阅</i>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    /* 响应式模态框宽度 */
    @media (min-width: 992px) {
        #modalNotice .modal-dialog {
            max-width: 800px;
        }
    }
    @media (max-width: 991px) {
        #modalNotice .modal-dialog {
            margin: 0.5rem auto;
        }
    }
</style>

全局字体

2025 年 5 月 28 日

1
2
3
4
5
6
7
# 主题字体配置
# Font
font:
  font_size: 16px
  font_family:
  letter_spacing: 0.02em
  code_font_size: 85%
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
# ===== 主题字体配置 =====
font:
  # 基础字号（黄金比例衍生值）
  font_size: 16.5px # 1.618×基准单位

  # 全局字体栈（中英混排优化）
  font_family:
    - "HarmonyOS Sans SC" # 华为鸿蒙字体（现代简约）
    - "Noto Sans SC" # 思源黑体（泛用性强）
    - "PingFang SC" # 苹方（macOS优雅显示）
    - "Microsoft YaHei" # 微软雅黑（Windows兼容）
    - "Helvetica Neue" # 西文字体优先级
    - "Arial"
    - "sans-serif" # 最终回退

  # 字间距（视觉呼吸感）
  letter_spacing: 0.03em # 较默认稍宽松

  # 代码区块字体配置
  code:
    font_size: 87% # 稍小于正文字号
    font_family:
      - "JetBrains Mono" # 开发首选等宽字体
      - "Fira Code" # 连字符优化
      - "Consolas"
      - "monospace"
    line_height: 1.6 # 代码行高增强可读性

  # 标题特殊配置
  headings:
    font_scale: 1.2 # 标题递增系数
    letter_spacing: -0.015em # 标题稍紧凑
    font_weight: 450 # 中等粗细（非bold的现代选择）

  # 日夜间模式字体微调
  dark_mode:
    font_weight: 350 # 夜间模式稍细
    contrast_ratio: 1.8 # 明暗对比优化

2025 年 5 月 31 日

这样的字体看着挺不赖的，这么久了换一种风格也好。

1
KaiTi,"Microsoft YaHei",Georgia, sans, serif
1
2
3
4
5
6
7
# 主题字体配置
# Font
font:
  font_size: 16px
  font_family: KaiTi,"Microsoft YaHei",Georgia, sans, serif
  letter_spacing: 0.02em
  code_font_size: 85%

image-20250531140614212

We’re not a CDN - highlight.js (highlightjs.org)

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
# 代码块的增强配置
# Enhancements to code blocks
code:
  # 是否开启复制代码的按钮
  # Enable copy code button
  copy_btn: true

  # 代码语言
  # Code language
  language:
    enable: true
    default: "TEXT"

  # 代码高亮
  # Code highlight
  highlight:
    enable: true

    # 代码块是否显示行号
    # If true, the code block display line numbers
    line_number: true

    # 实现高亮的库，对应下面的设置
    # Highlight library
    # Options: highlightjs | prismjs
    lib: "highlightjs"

    highlightjs:
      # 在链接中挑选 style 填入
      # Select a style in the link
      # See: https://highlightjs.org/static/demo/
      style: "atom-one-light"
      style_dark: "atom-one-dark"

代码高亮调整完毕，这下看起来舒服多了。

分页阅读

2025 年 5 月 29 日

音乐餐厅

2025 年 5 月 29 日

安装插件。

1
npm install hexo-tag-aplayer hexo-theme-cafe --save

插入音乐 | 🔥 一个比较特别的 Hexo 主题 (nexmoe.com)

image-20250529211247556

插入音乐

本教程使用 hexo-tag-aplayer 插件来达到在 Hexo 文章中插入音乐的效果

在你的 Hexo 程序根目录（与_config.yml 同目录）下执行：

1
npm install --save hexo-tag-aplayer

引入 MetingJS 后，播放器将支持对于 QQ 音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

在 Hexo 配置文件 _config.yml 中设置：

1
2
3
aplayer:
  meting: true # 启用 MetingJS 支持
  asset_inject: false # Fluid 主题需关闭自动注入，避免冲突

Hexo 博客增加歌单播放想到要为自己的 Hexo 博客添加播放音乐的功能，首先就是去搜索查询一些大佬们是怎么实现的，在大佬们 - 掘金 (juejin.cn)

hexo 博客 fluid 主题添加 aplayer 组件_hexo aplayer-CSDN 博客

Hexo 主题插入音乐之 aplayer 音乐播放器_hexo-tag-aplayer-CSDN 博客

Hexo-Tag-APlayer 项目教程-CSDN 博客

1
2
3
4
5
6
aplayer:
  meting: true
  asset_inject: false # Fluid主题必须关闭自动注入！
  cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
  style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
  meting_cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js

项目首页 - hexo-tag-aplayer:Embed aplayer in Hexo posts/pages - GitCode

Hexo 添加全局吸底 Aplayer 音乐播放器教程_哔哩哔哩_bilibili

1
2
3
4
5
6
aplayer:
  meting: true
  asset_inject: false # 关闭自动注入，避免与Fluid内置资源冲突
  cdn: # 手动指定CDN（确保资源加载）
    js: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
    css: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css
1
2
3
4
5
# 关闭主题自带的音乐插件（防止冲突）
plugins:
  aplayer: false
# 启用自定义脚本注入（关键！）
custom_js: /js/activate-aplayer.js

废了，没用。

2025 年 5 月 30 日

往事随风 (alec-97.github.io)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div
        class="aplayer"
        data-id="754708245"
        data-server="netease"
        data-type="playlist"
        data-fixed="true"
        data-listfolded="true"
        data-autoplay="false"
        data-order="list"
        data-volume="0.5"
        data-theme="#1da496"
        data-preload="auto"></div>

<!-- 优化样式 --- 觉得默认的不太好看 -->
<!-- 发现歌词出现在了播放器外，可能设计是这样的，但是我想把它放到播放器内部进度条位置 -->
<style>
  .aplayer.aplayer-fixed .aplayer-lrc,
  .aplayer.aplayer-fixed .aplayer-body {
    position: absolute !important;
    z-index: 999 !important;
  }
</style>
1
2
3
4
5
6
7
# 主题字体配置
# Font
font:
  font_size: 16px
  font_family:
  letter_spacing: 0.02em
  code_font_size: 85%

在 fluid 的主题配置文件中，提供了自定义 html 的位置，因此直接在主题配置文件中添加 html 代码

1
2
3
4
5
6
7
custom_html: '
 <!--音乐-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
'

在主题配置文件下添加这么个配置，主页直接插入了音乐播放器，就是样式有点糟糕，这不是我想要的。

image-20250530094338806

或者选择用配置分别引入 js 和 css 依赖，实现的效果同上是一样的。

1
2
3
4
5
6
7
8
custom_js:
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js #/APlayer#/APlayer依赖
  - //cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js #/APlayer依赖

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css #/APlayer依赖

image-20250530100633515

1
https://deng-2022.atomgit.net/blog/assets/js/APlayer.min.js
1
2
url: https://test.atomgit.net/blog
root: /blog
1
2
3
<% if (theme.custom_js) { %>
  <%- js(theme.custom_js) %>
<% } %>
1
2
3
4
5
<% if (theme.custom_js) { %>
  <% theme.custom_js.forEach(function(url) { %>
    <script src="<%= url.startsWith('/') ? '/blog' + url : '/blog/assets/' + url %>"></script>
  <% }); %>
<% } %>

image-20250530114947096

1
2
3
console.log(window.APlayer, window.Meting);
VM11822:1 ƒ e(t){if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options=(0,s.default)(t),this.container=this.options.container,this.paused=!0,this.pl… undefined
undefined

一套流程总算解决了加载本地资源报错的问题，目前仅加载 cdn 资源路径。

第一步：彻底禁用主题的默认加载

在 _config.fluid.yml 中添加：

1
2
3
4
5
6
7
8
aplayer:
  enable: false # 完全关闭主题内置的播放器逻辑
  asset_inject: false # 禁止自动注入资源

# 强制使用你的CDN配置
custom_js:
  - https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
  - https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js

第二步：清理冗余请求

  1. 删除以下文件（如果存在）：

    1
    2
    source/assets/js/APlayer.min.js
    themes/fluid/source/assets/js/APlayer.min.js

  2. 清除浏览器缓存后测试：

    1
    hexo clean && hexo g && hexo s

第三步：验证全局变量

在浏览器控制台输入：

1
2
// 应该看到函数定义，而非 undefined
console.log("APlayer:", window.APlayer, "Meting:", window.Meting);

结果是同样的，现在需要解决 Meting.js 为何渲染失败。

1
npm uninstall hexo-tag-aplayer
1
npm install aplayer@1.10.1 meting@3 --save
1
2
3
4
5
6
<script>
  if (window.APlayer && !window.Meting) {
    console.error('MetingJS 未加载！正在重试...');
    document.write('<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"><\/script>');
  }
</script>
1
hexo clean && hexo g && hexo s

Markdown 标签语法 Markdown 内嵌 HTML 标签 对于 Markdown 涵盖范围之外的标签，都可以直接 - 掘金 (juejin.cn)

Plugins | Hexo

1
http://localhost:4000/blog/img/artical/mountain0414.jpg
1
http://localhost:4000/blog/music/OneDay.flac
1
(索引):321  Uncaught ReferenceError: APlayer is not defined

中午两点半，搞出来一个基本的音乐播放器，选择直接硬编码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

<div id="aplayer-sRJbrprR"></div>

<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  new APlayer({
    element: document.getElementById("aplayer-sRJbrprR"),
    music: {
      title: "One Day",
      author: "Mayrain",
      url: "/blog/music/WindyHill.mp3",  // 注意去掉空格
      pic: "/blog/img/artical/mountain0414.jpg" // 修正拼写
    }
  });
});
</script>

image-20250530143137688

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% if (theme.aplayer.enable){ %>
  <script defer>
    window.__aplayerQueue = window.__aplayerQueue || [];
    // 将初始化函数存入队列
    window.__aplayerQueue.push(function(){
      new APlayer({ /* 配置 */ });
    });

    // 资源加载完成后执行队列
    function fireAplayer() {
      window.__aplayerQueue.forEach(fn => fn());
    }
    document.addEventListener('APlayerReady', fireAplayer);
  </script>
<% } %>
1
2
3
4
5
6
aplayer:
  enable: true # 完全关闭主题内置的播放器逻辑
  asset_inject: false # 禁止自动注入资源
  cdn: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
  style_cdn: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css
  preload: true # 关键参数，强制同步加载

这一招绝了，我直接手动提前加载，整体还是使用标签引入，不暴力手写代码引入。

1
2
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
{% aplayer "One Day" "Mayrain" "/blog/music/WindyHill.mp3" "/blog/img/artical/mountain0414.jpg" %}

image-20250530144321907

十六个小时连续不断地尝试，就连晚上睡觉做梦都在迷迷糊糊想办法，总算搞出来一个像样的文内音乐播放器。

下载插件。

1
npm install --save hexo-tag-aplayer

固定 Aplayer 以及 Meting 版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"dependencies": {
  "aplayer": "^1.10.1",
  "hexo": "^5.0.0",
  "hexo-deployer-git": "^4.0.0",
  "hexo-generator-archive": "^1.0.0",
  "hexo-generator-category": "^1.0.0",
  "hexo-generator-index-pin-top": "^0.2.2",
  "hexo-generator-tag": "^1.0.0",
  "hexo-renderer-ejs": "^1.0.0",
  "hexo-renderer-marked": "^4.0.0",
  "hexo-renderer-stylus": "^2.0.0",
  "hexo-server": "^2.0.0",
  "hexo-tag-aplayer": "^3.0.4",
  "hexo-theme-fluid": "^1.9.4",
  "hexo-theme-landscape": "^0.0.3",
  "meting": "^2.0.1"
}

展示下相关配置，主题配置：

1
2
3
aplayer:
  enable: false # 完全关闭主题内置的播放器逻辑
  asset_inject: false # 禁止自动注入资源
1
2
3
4
5
6
7
custom_html: '
 <!--音乐-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
'
1
2
3
4
5
6
7
8
9
10
11
12
13
# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:
  - https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
  - https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css #/APlayer依赖

博客全局配置：

1
2
3
aplayer:
  meting: true
  asset_inject: false

接下来调整下单一歌曲音乐播放器的样式。

hexo-tag-aplayer/docs/README-zh_cn.md at master · MoePlayer/hexo-tag-aplayer · GitHub

Windy Hill-羽肿-mp3 免费在线下载播放-放屁网-全网音乐 MP3 高品质在线免费下载、在线免费播放 (fangpi.net)

他妈的这 meting 版本还限制挺低：

1
2
3
4
5
6
7
custom_html: '
 <!--音乐-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
'

搞定了。

以下是完整的音乐播放器代码，阴差阳错之间匹配成功。

1
2
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

image-20250530153220450

来个官网插件参数翻译。

实现一个简单的加载动画。

1
2
3
4
5
6
7
8
## Favorite

<div id="loading" style="text-align:center; padding:20px;">   正在加载歌单，请稍候...   <!-- 可以在这里添加加载动画 -->   <div class="spinner"></div> </div>

<style> .spinner {   border: 4px solid rgba(0, 0, 0, 0.1);   width: 36px;   height: 36px;   border-radius: 50%;   border-left-color: #31C27C;   animation: spin 1s linear infinite;   margin: 10px auto; }  @keyframes spin {   0% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } } </style>

<script> // 无论播放器是否加载完成，3秒后都隐藏加载动画
    setTimeout(function() {   document.getElementById('loading').style.display = 'none'; }, 3000); // 3000毫秒 = 3秒 </script>

Markdown 如何分页操作_markdown 分页符-CSDN 博客

保存下第一版音乐餐厅页面：

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<div class="music-container">
  <!-- 页面标题和介绍 -->
  <div class="music-header">
    <h1>我的音乐收藏</h1>
    <p class="intro-text">
      这里收藏了我精心挑选的两份歌单，包含不同风格的音乐作品。点击播放按钮即可开始欣赏，也可以将喜欢的歌曲加入你的收藏~
    </p>
  </div>

  <!-- 加载动画 -->

  <div id="loading" class="loading-animation">
    <div class="spinner"></div>
    <p>正在加载音乐资源，请稍候...</p>
  </div>

  <!-- 第一个歌单 -->

  <div class="playlist-card">
    <div class="playlist-info">
      <h2>🎵 清新民谣精选</h2>
      <p class="playlist-desc">
        这个歌单收录了温暖治愈的民谣作品，适合午后小憩或夜晚放松时聆听。包含陈粒、房东的猫、赵雷等歌手的代表作。
      </p>
      <div class="stats">
        <span>📅 更新时间: 2025.5</span>
        <span>🎶 歌曲数量: 506</span>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

  {% meting "8647467106" "tencent" "playlist" "mutex:false"
  "listmaxheight:400px" "preload:none" "theme:#31C27C" %}

  <div style="page-break-after: always;"></div>

  <!-- 第二个歌单 -->

  ------

  <div class="playlist-card">
    <div class="playlist-info">
      <h2>🎧 治愈纯音乐</h2>
      <p class="playlist-desc">
        充满未来感的电子音乐合集，适合工作专注、运动健身或派对场景。包含The
        Chainsmokers、Alan Walker等艺术家的热门曲目。
      </p>
      <div class="stats">
        <span>📅 更新时间: 2025.05</span>
        <span>🎶 歌曲数量: 477</span>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

  {% meting "8181427733" "tencent" "playlist" "mutex:false"
  "listmaxheight:400px" "preload:none" "theme:#2D8CF0" %}

  <!-- 页面底部引导 -->

  <div class="music-footer">
    <p class="feedback">有什么建议或想听的音乐类型？<a href="#">告诉我</a></p>
  </div>
</div>

<style>
  /* 全局样式 */
  .music-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
  }
  /* 头部样式 */
  .music-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .music-header h1 {
    color: #31c27c;
    font-size: 2.2em;
    margin-bottom: 10px;
  }
  .intro-text {
    color: #666;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
  }
  /* 歌单卡片样式 */
  .playlist-card {
    display: flex;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    overflow: hidden;
  }
  .playlist-info {
    flex: 1;
    padding: 25px;
    min-width: 250px;
  }
  .player-wrapper {
    flex: 1;
    min-width: 300px;
  }
  .playlist-card h2 {
    color: #444;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
  }
  .playlist-desc {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: #888;
    font-size: 0.9em;
  } /* 加载动画 */
  .loading-animation {
    text-align: center;
    padding: 30px;
    margin: 20px 0;
  }
  .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #31c27c;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } /* 底部样式 */
  .music-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }
  .social-share {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
  }
  .share-btn {
    background: #f0f0f0;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .share-btn:hover {
    background: #e0e0e0;
  }
  .feedback {
    color: #999;
    font-size: 0.9em;
  }
  .feedback a {
    color: #31c27c;
    text-decoration: none;
  } /* 响应式设计 */
  @media (max-width: 768px) {
    .playlist-card {
      flex-direction: column;
    }
    .player-wrapper {
      min-width: 100%;
    }
  }
</style>

<script>
  // 加载完成后隐藏动画
  function hideLoader() {
    document.getElementById("loading").style.display = "none";
  } // 设置3秒超时隐藏
  setTimeout(hideLoader, 3000);
  // 如果播放器提前加载完成也隐藏
  function checkPlayers() {
    const players = document.querySelectorAll(".aplayer");
    if (players.length === 2) {
      // 确保两个播放器都加载完成
      hideLoader();
    } else {
      setTimeout(checkPlayers, 100);
    }
  }
  checkPlayers();
</script>

image-20250530190142335

不论怎么优化都不大好看。。

简约些。

友情链接

2025 年 5 月 31 日

昨天晚上八点钟前，花了一个多小时总算搞定了音乐餐厅的最终页面，花了整整二十四小时才总算交稿，真不算容易。

重新更换了首页导航栏的一部分封面大图，看起来更加美观大气了，上周收集下载的精美壁纸总算派上了用场，不过现在文章顺序被打乱了。

插入音乐 | 🔥 一个比较特别的 Hexo 主题 (nexmoe.com)

文章页

2025 年 6 月 1 日

1
一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是在流浪。
1
每一片落叶都承载着岁月的痕迹，而飘落的瞬间，也是新生的开始。
1
每一次跌倒都是成长的垫脚石，让我们站得更高，看得更远。
1
人生如逆旅，我亦是行人，但心中有爱，便不觉孤单。
1
梦想，是心灵的灯塔，照亮我们前行的道路，让我们在黑暗中也能找到方向。
1
真正的富有，不在于物质的堆砌，而在于精神的富足与内心的宁静。
1
每一次的回首，都是对过往的温柔告别，也是对未来勇敢前行的期许。
1
梦想是心灵的指南针，无论身处何方，都能指引我们找到回家的路。
1
人生如诗，不在于辞藻的华丽，而在于情感的真挚与深邃，每一行都是心灵的独白。
1
每一次的选择，都是对未来的期许，让我们在不确定中寻找到属于自己的方向。
1
以前总谈理想，现在只想睡个好觉。
1
每一颗心都是一座孤岛，但爱能搭建桥梁，让我们彼此相连，共同抵御风雨。
1
在这纷扰的世界里，愿你的心如一片宁静的湖泊，波澜不惊，温柔以待每一个晨曦与黄昏。
1
每一次的离别，都是为了更好的重逢，让我们珍惜每一次的相聚时光，铭记于心。
1
人生就像一场舞台剧，我们都是自己的导演与演员，用心演绎每一个角色，活出自己的精彩。
1
让我们以一颗平和的心，去面对生活的起起伏伏，因为内心的宁静才是最大的力量。
1
岁月悠悠，带走了青春的容颜，却留下了更加成熟与深邃的灵魂。
1
就像花朵需要阳光和雨露，你的心也需要被爱和关怀滋养，才能绽放出最灿烂的笑容。
1
生活的每一个瞬间都是独一无二的，让我们用心去感受，去珍惜。
1
当你感到迷茫时，不妨放慢脚步，听听内心的声音，它会指引你找到属于自己的方向。
1
无论遇到多大的困难，都请相信，时间会带走一切伤痛，留下的是更加坚韧和成熟的自己。
1
就像大海包容每一滴水珠，愿你的胸怀也能如此宽广，接纳世间万物，包括那些不完美的自己。
1
每一次呼吸都是宇宙间最温柔的拥抱，提醒我们，无论身处何方，都不孤单。
1
就像春天的花朵，无论经历了多少寒冬的洗礼，都会在春风的吹拂下绽放出最灿烂的笑容。
1
每一个夜晚的降临，都是为了让心灵得到休息，让明天的你更加充满活力和希望。
1
给自己一些温柔的时光，去聆听内心的声音，去感受那份宁静与平和。
1
当你感到疲惫时，记得抬头看看星空，那无尽的宇宙正温柔地告诉你：你比想象中更加坚强和美丽。
1
生命因未知而精彩，每一步都踏着成长的节拍。
1
真正的勇气，不是不感到害怕，而是即便害怕也选择前行。
1
明明是为了生活而工作，却为了工作而疏远了生活。
1
人生如戏，我们都是自己故事的主角，用心演绎，精彩纷呈。
1
心怀希望，即使在最深的黑暗中也能找到光明。
1
真正的智慧，在于认识到自己的无知，并持续学习，不断进步。
1
真正的智慧，在于认识到自己的无知，并持续学习，不断进步。
1
生命的旅程就像一场冒险，每一步都充满了未知与惊喜。
1
每一次告别都是为了更好的重逢，让我们学会珍惜，也学会放手。
1
每一个梦想都值得我们去追逐，无论多远，都要坚持到底。
1
心怀善念，世界将回馈以温暖；心怀感恩，生活将充满阳光。
1
每一场旅程都是一次自我超越，让我们不断前行，不断探索。
1
勇气不是不感到害怕，而是即便颤抖也选择站出来。
1
心若向阳，无谓悲伤，微笑面对，生活自会报以温暖。
1
岁月漫长，然而值得期待，因为美好总在不经意间到来。
1
每一个黎明都带来新的希望，让我们满怀信心地迎接每一个新的开始。
1
不要因为结束而哭泣，要因为它发生过而欣喜。
1
无论风雨，无论晴天，愿你我都能以一颗平和的心，走过人生的四季。
1
每一次的相遇都是久别重逢，珍惜身边人，因为缘分不易。
1
人生如茶，初尝或许苦涩，但细品之后，回甘无穷。
1
每个人的心中都有一片未被发现的海洋，勇敢地去探索吧。
1
每次归程，都是为了更好出发；每次停歇，都是为了积攒力量
1
人生如戏，我们都是自己故事的主角，用心演绎，精彩纷呈。
1
每一次的选择，都塑造了今天的自己，未来的路，因选择而不同。
1
生命中的每一次相遇，都是命运的安排，珍惜每一次的邂逅，因为那可能是你生命中的贵人。
1
人生就像一场马拉松，重要的不是瞬间的爆发，而是途中的坚持与信念。
1
心态决定命运，用积极的心态去面对生活，生活也会以同样的方式回应你。
1
真正的幸福，不是拥有多少财富和地位，而是内心的充实与满足，以及身边人的陪伴与关爱。
1
真正的幸福，不在于外界的评价和物质的丰富，而在于内心的平和与满足。
1
梦想再大也不嫌大，追梦的人再小也不嫌小，因为心中有梦，就有无限可能。
1
生活不在于拥有多少，而在于感知多少，用心去感受，幸福其实就在身边。
1
耗尽所有期待，风止意也平。
1
无论未来的路有多么漫长和艰难，只要心中有光，就能照亮前行的每一步。
1
人生就像一杯茶，初尝或许苦涩，但细细品味，便能感受到其中的甘甜与清香。
1
梦想如同夜空中最亮的星，虽远必达，引领我们穿越黑暗，找寻心中的光明。
1
每个人的生命故事中，都有那么几个章节，让人难以忘怀，成为永恒的回忆。
1
岁月可以带走青春的容颜，但带不走内心的热忱与对生活的热爱。
1
每一天醒来，都是宇宙给予的新礼物，让我们带着感恩的心，去拥抱每一个可能
1
生活的美好，往往藏在细微之处，一颗感恩的心，足以让平凡变得非凡。
1
每一次呼吸，都是与世界的温柔对话，提醒我们要珍惜这份生命的奇迹。
1
每一个夜晚的结束，都是新希望的开始，让我们带着梦想，迎接每一个黎明。
1
人生如戏，我们都是自己故事的主角，用心演绎，才能收获属于自己的精彩。
1
每一次的放手，都是为了更好的拥有，让我们学会放下，迎接更加美好的未来。
1
岁月或许会改变我们的容颜，但那份对生活的热爱与追求，却会愈发坚定。
1
渐渐喜欢上了现在的生活没有惊喜，也没有意外。
1
梦想是心灵的指南针，无论身处何方，都能指引我们找到回家的路。
1
真正的朋友，是在你需要时伸出援手，无需多言，一个眼神便能读懂彼此的心。
1
有时候，放慢脚步，才能更好地欣赏沿途的风景，感受生活的真谛。
1
心灵是一片广袤的田野，播种善良与希望，便能收获幸福与喜悦。
1
真正的强大，不是从不跌倒，而是在每次跌倒后都能勇敢地站起来，继续前行。
1
漫漫征途，岁月因青春慨然以赴而更加静好，世间因少年挺身向前而更加瑰丽。
1
人生就像一场旅行，重要的不是目的地，而是沿途的风景以及看风景的心情。
1
岁月是一本厚重的书，记录着我们的成长与变迁，也教会我们珍惜与感恩。
1
不知道少了什么感觉，没有以前快乐。

晚八点钟前，总算整理完毕，文章页面封面图，去掉插图及心灵寄语。

微图册

2025 年 6 月 5 日

免费制作电子图册-相册分享展示平台-微图册 (wtuce.com)

image-20250605233222633

像这样的云服务还是挺多的，部分小程序也提供这样的功能，不过就拿这个网站来说，免费额度仅有 200MB，要花钱的服务还是不太值当的。

Memos

2025 年 6 月 28 日

自建 Memos 服务：碎片化笔记 + 博客说说栏，一栈双用 Memos 是一款轻量的自托管的备忘录中心。你可以把它当作个 - 掘金 (juejin.cn)

17.8k Star!开源且支持私有化部署的碎片化知识卡片管理工具-Memos 应用简览 主要特性 开源且永久免费：Mem - 掘金 (juejin.cn)

心猿意马 - 雨月空间站 (mintimate.cn)

用一张照片来代表今天。

2025 年 6 月 30 日

Blog - Memos (usememos.com)

Memos

部署

2025 年 6 月 30 日

1
2
ICP备案（互联网内容提供商备案）详解​​
ICP备案（Internet Content Provider备案）是中国大陆对网站或互联网服务进行合法化管理的重要制度，由​​国家工业和信息化部（MIIT）​​监管，所有在中国大陆境内提供服务的网站或服务器必须完成备案，否则可能被关停或屏蔽访问。

今天上午十点半，购买了新的云服务器，提交域名备案初审。

image-20250630102839185

备案短信核验_备案(Filing Service)-阿里云帮助中心 (aliyun.com)

安装 Docker - 云服务器 ECS - 阿里云 (alibabacloud.com)

按这个方法安装 Docker。

安装 Docker。

安装 Docker，执行以下命令安装 Docker 社区版本，通过查看 Docker 版本命令，验证 Docker 是否安装成功。

1
2
3
4
5
6
7
8
9
10
11
#添加Docker软件包源
sudo wget -O /etc/yum.repos.d/docker-ce.repo http://mirrors.cloud.aliyuncs.com/docker-ce/linux/centos/docker-ce.repo
sudo sed -i 's|https://mirrors.aliyun.com|http://mirrors.cloud.aliyuncs.com|g' /etc/yum.repos.d/docker-ce.repo
#Alibaba Cloud Linux3专用的dnf源兼容插件
sudo dnf -y install dnf-plugin-releasever-adapter --repo alinux3-plus
#安装Docker社区版本，容器运行时containerd.io，以及Docker构建和Compose插件
sudo dnf -y install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
#启动Docker
sudo systemctl start docker
#设置Docker守护进程在系统启动时自动启动
sudo systemctl enable docker
1
sudo docker -v

创建简单 Web 程序镜像，构建 Web 程序镜像，启动 Web 程序镜像的容器，并且命名容器名称为hello-world。

1
2
3
4
5
6
7
8
9
#拉取Nginx镜像
sudo docker pull nginx:latest
#创建Dockerfile设置Nginx作为基础镜像，并在Web服务器的根目录创建一个显示Hello World!的index.html文件。
sudo tee Dockerfile <<-'EOF'
FROM nginx:latest
RUN echo 'Hello World!' > /usr/share/nginx/html/index.html
EOF
#构建镜像，镜像名称为hello-world
sudo docker build . -t hello-world:latest

不过这里第一步拉取 Nginx 镜像就失败了，得配置 Docker 镜像加速器。

登录阿里云控制台，进入 容器镜像服务 > 镜像加速器，获取专属加速地址（如 https://<your-id>.mirror.aliyuncs.com）。

容器镜像服务 ACR 控制台 (aliyun.com)

1
https://0i6jgqxx.mirror.aliyuncs.com

修改 Docker 配置。

1
2
3
4
5
6
7
8
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://0i6jgqxx.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

镜像源修改成功，直接拉取 Nginx 镜像，一切顺利。

1
2
3
4
5
6
7
8
9
10
11
[root@iZ2zehqnajgv7sc3i778n0Z ~]# sudo docker pull nginx:latest
latest: Pulling from library/nginx
a2abf6c4d29d: Pull complete
a9edb18cadd1: Pull complete
589b7251471a: Pull complete
186b1aaa4aa6: Pull complete
b4df32aa5a72: Pull complete
a0bcbecc962e: Pull complete
Digest: sha256:0d17b565c37bcbd895e9d92315a05c1c3c9a29f762b011a10c54a66cd53c9b31
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest

我记得今年年初也有过解决 Docker 拉取镜像失败的问题，同样是修改镜像源，操作基本相同，参考以下文章。

Docker 修改国内镜像源_docker 更换国内镜像源-CSDN 博客

这篇写得很详细了：docker 切换国内镜像源_mob64ca12f10f72 的技术博客_51CTO 博客

继续之前的操作，构建 Web 程序镜像。

1
2
3
4
5
6
7
8
9
#拉取Nginx镜像
sudo docker pull nginx:latest
#创建Dockerfile设置Nginx作为基础镜像，并在Web服务器的根目录创建一个显示Hello World!的index.html文件。
sudo tee Dockerfile <<-'EOF'
FROM nginx:latest
RUN echo 'Hello World!' > /usr/share/nginx/html/index.html
EOF
#构建镜像，镜像名称为hello-world
sudo docker build . -t hello-world:latest

启动 Web 程序镜像的容器，并且命名容器名称为hello-world。

1
sudo docker run -d -p 80:80 --name hello-world hello-world:latest

执行curl http://localhost命令，验证 Web 程序是否正确显示Hello World!。

1
2
[root@iZ2zehqnajgv7sc3i778n0Z ~]# curl http://localhost
Hello World!

安装 Docker Compose

如果您参考以上方式安装 Docker，那么 Compose 插件将默认安装到您的实例中。您可以通过如下命令查看。

1
sudo docker compose version
1
2
[root@iZ2zehqnajgv7sc3i778n0Z ~]# sudo docker compose version
Docker Compose version v2.27.0

预期输出（vN.N.N 代表 Compose 的版本）：Docker Compose version vN.N.N。

如果您的 Compose 插件未成功安装或您需要使用 Compose 独立版（docker-compose）可参考下面内容。

安装 Docker - 云服务器 ECS - 阿里云 (alibabacloud.com)

这些内容参考官方文档就可以了，最后还是要使用查看 Compose 版本命令，验证 Compose 是否安装成功。

使用 Docker Compose 部署应用

以下是创建基于 WordPress 镜像的 Web 程序。

创建 Compose 编排文件并启动 WordPress 服务。

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
#创建编排文件，添加Mysql与WordPress
sudo tee docker-compose.yaml <<-'EOF'
version: '3.1'

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - "80:80"
    environment:
      #数据库地址
      WORDPRESS_DB_HOST: db
      #数据库用户名
      WORDPRESS_DB_USER: wordpress
      #数据库密码
      WORDPRESS_DB_PASSWORD: 123456
      #数据库名称
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wordpress:/var/www/html

  db:
    image: mysql:5.7
    restart: always
    ports:
      - "3306:3306"
    environment:
      #数据库名称
      MYSQL_DATABASE: wordpress
      #数据库用户名
      MYSQL_USER: wordpress
      #数据库密码
      MYSQL_PASSWORD: 123456
      #数据库ROOT用户密码
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:
EOF
#启动服务容器。
sudo env "PATH=$PATH" docker compose up -d

这里启动服务器竟然有报错了，估计是服务端口冲突了，刚才在 80 端口启动了 Hello World 测试服务。

1
2
3
4
5
[root@iZ2zehqnajgv7sc3i778n0Z ~]# docker ps -a
CONTAINER ID   IMAGE                COMMAND                   CREATED              STATUS              PORTS                                                  NAMES
e9f71f7b68d5   wordpress            "docker-entrypoint.s…"   About a minute ago   Created                                                                    root-wordpress-1
8c0aee8f6006   mysql:5.7            "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   root-db-1
e1b3d3f9f718   hello-world:latest   "/docker-entrypoint.…"   11 minutes ago       Up 11 minutes       0.0.0.0:80->80/tcp, :::80->80/tcp                      hello-world
1
[root@iZ2zehqnajgv7sc3i778n0Z ~]# docker stop e1b3d3f9f718
1
[root@iZ2zehqnajgv7sc3i778n0Z ~]# docker rm hello-world

Memory’s Blog – 又一个 WordPress 站点

成功部署了 WordPress 个人博客站点，提供了很多热门的免费主题，直接下载安装完成后即可使用，这个博客确实方便，还配备了专门的后台管理系统。

Memos 镜像

1
2
# 直接拉取镜像
sudo docker pull usememos/memos:latest
1
2
3
4
5
6
7
8
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://0i6jgqxx.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

一直显示拉取失败，阿里云镜像仓库没有同步 Memos 镜像吗。

1
2
[root@iZ2zehqnajgv7sc3i778n0Z docker]# sudo docker pull usememos/memos:latest
Error response from daemon: Get "https://registry-1.docker.io/v2/": context deadline exceeded

使用终极解决方案： 直接使用 GitHub 源码构建（终极方案），如果镜像源均不可用，可自行构建。

1
2
3
4
5
6
7
8
9
# 克隆源码
git clone https://github.com/usememos/memos.git
cd memos

# 构建镜像
docker build -t memos:latest .

# 运行容器
docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos memos:latest

在这之前，得先安装 git，执行安装，并验证安装。

1
sudo yum install -y git
1
git --version
1
2
3
完毕！
[root@iZ2zehqnajgv7sc3i778n0Z docker]# git --version
git version 2.43.5

。。。

1
2
3
[root@iZ2zehqnajgv7sc3i778n0Z docker]# git clone https://github.com/usememos/memos.git
正克隆到 'memos'...
致命错误：无法访问 'https://github.com/usememos/memos.git/'：Failed to connect to github.com port 443: 连接超时

usememos/memos: A modern, open-source, self-hosted knowledge management and note-taking platform designed for privacy-conscious users and organizations. (github.com)

刚刚使用 SSH 协议替代 HTTPS 协议，在云服务器生成了密钥，并将公钥添加到了 GitHub，登录 GitHub → Settings → SSH and GPG keys → 添加公钥。

1
2
ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id_ed25519.pub  # 复制公钥

但最终测试链接还是超时失败了。

1
ssh -T git@github.com
1
2
[root@iZ2zehqnajgv7sc3i778n0Z docker]# ssh -T git@github.com
ssh: connect to host github.com port 22: Connection timed out

索性在 Github Fork Memos 镜像仓库，再导入 Gitee 仓库，最后在 Gitee 添加服务器公钥实现认证，总该能成功拉取官方镜像源吧。

拉取 Gitee 镜像代码仓库。

1
git clone git@gitee.com:deng-2022/memos.git
1
2
3
4
5
6
7
8
9
10
11
12
13
[root@iZ2zehqnajgv7sc3i778n0Z docker]# git clone git@gitee.com:deng-2022/memos.git
正克隆到 'memos'...
The authenticity of host 'gitee.com (180.76.199.13)' can't be established.
ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc.
Are you sure you want to continue connecting (yes/no/[fingerprint])? y
Please type 'yes', 'no' or the fingerprint: yes
Warning: Permanently added 'gitee.com,180.76.199.13' (ECDSA) to the list of known hosts.
remote: Enumerating objects: 42879, done.
remote: Counting objects: 100% (42879/42879), done.
remote: Compressing objects: 100% (9910/9910), done.
remote: Total 42879 (delta 31416), reused 42879 (delta 31416), pack-reused 0 (from 0)
接收对象中: 100% (42879/42879), 35.67 MiB | 9.95 MiB/s, 完成.
处理 delta 中: 100% (31416/31416), 完成.

继续未完成的操作，克隆源码成功后，自行构建镜像。

1
2
3
4
5
6
7
8
9
# 克隆源码
git clone git@gitee.com:deng-2022/memos.git
cd memos/scripts

# 构建镜像
docker build -t memos:latest .

# 运行容器
docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos memos:latest
1
2
sudo systemctl daemon-reload
sudo systemctl restart docker

白忙活一场，到头来还是需要拉取基础镜像，镜像源修改还是没有生效，拉个镜像就连接超时。

1
2
docker pull alpine:latest
docker pull golang:1.24-alpine
1
=> [internal] load metadata for docker.io/library/golang:1.24-alpine

问题还偏偏出现在这个破镜像上，手动下载吧。

第八阶段【DBA 自动化】06：CentOS 安装 go 环境_golang 1.24.2 下载-CSDN 博客

1
wget https://golang.google.cn/dl/go1.24.2.linux-amd64.tar.gz
1
2
3
4
5
6
7
8
9
# 解压 Go 到 /usr/local
sudo tar -C /usr/local -xzf go1.24.2.linux-amd64.tar.gz

# 添加环境变量
echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bashrc
source ~/.bashrc

# 验证安装
go version
1
2
3
4
5
[root@iZ2zehqnajgv7sc3i778n0Z scripts]# sudo tar -C /usr/local -xzf go1.24.2.linux-amd64.tar.gz
[root@iZ2zehqnajgv7sc3i778n0Z scripts]# echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bashrc
[root@iZ2zehqnajgv7sc3i778n0Z scripts]# source ~/.bashrc
[root@iZ2zehqnajgv7sc3i778n0Z scripts]# go version
go version go1.24.2 linux/amd64
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
FROM golang:1.24-alpine AS backend
WORKDIR /backend-build
COPY go.mod go.sum ./
RUN go mod download
COPY . .
# Please build frontend first, so that the static files are available.
# Refer to `pnpm release` in package.json for the build command.
RUN --mount=type=cache,target=/go/pkg/mod \
    --mount=type=cache,target=/root/.cache/go-build \
    go build -ldflags="-s -w" -o memos ./bin/memos/main.go

# Make workspace with above generated files.
FROM alpine:latest AS monolithic
WORKDIR /usr/local/memos

RUN apk add --no-cache tzdata
ENV TZ="UTC"

COPY --from=backend /backend-build/memos /usr/local/memos/
COPY ./scripts/entrypoint.sh /usr/local/memos/

EXPOSE 5230

# Directory to store the data, which can be referenced as the mounting point.
RUN mkdir -p /var/opt/memos
VOLUME /var/opt/memos

ENV MEMOS_MODE="prod"
ENV MEMOS_PORT="5230"

ENTRYPOINT ["./entrypoint.sh", "./memos"]
1
ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref 5e8c89a3-1927-49ae-bf7e-1543f565993f::reae01uls78mmnhox88ewtmd5: "/scripts/entrypoint.sh": not found

不过是徒劳。

1
2
3
4
5
6
7
8
FROM alpine AS backend
WORKDIR /backend-build
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
# 安装 Go（需自行处理版本和依赖）
RUN apk add --no-cache go gcc musl-dev  # 安装 Go 和编译工具
COPY ./go.mod ./go.sum ./
RUN go mod download
COPY . .

还是解决镜像源问题吧，一劳永逸，浪费了两小时时间，没有丝毫进展。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[root@iZ2zehqnajgv7sc3i778n0Z docker]# systemctl status docker.service
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor preset: disabled)
   Active: failed (Result: exit-code) since Mon 2025-06-30 13:36:11 CST; 36s ago
     Docs: https://docs.docker.com
  Process: 476829 ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock (code=exited, status=1/FAILURE)
 Main PID: 476829 (code=exited, status=1/FAILURE)

6月 30 13:36:09 iZ2zehqnajgv7sc3i778n0Z systemd[1]: Failed to start Docker Application Container Engine.
6月 30 13:36:11 iZ2zehqnajgv7sc3i778n0Z systemd[1]: docker.service: Service RestartSec=2s expired, scheduling restart.
6月 30 13:36:11 iZ2zehqnajgv7sc3i778n0Z systemd[1]: docker.service: Scheduled restart job, restart counter is at 3.
6月 30 13:36:11 iZ2zehqnajgv7sc3i778n0Z systemd[1]: Stopped Docker Application Container Engine.
6月 30 13:36:11 iZ2zehqnajgv7sc3i778n0Z systemd[1]: docker.service: Start request repeated too quickly.
6月 30 13:36:11 iZ2zehqnajgv7sc3i778n0Z systemd[1]: docker.service: Failed with result 'exit-code'.
6月 30 13:36:11 iZ2zehqnajgv7sc3i778n0Z systemd[1]: Failed to start Docker Application Container Engine.
6月 30 13:36:39 iZ2zehqnajgv7sc3i778n0Z systemd[1]: docker.service: Start request repeated too quickly.
6月 30 13:36:39 iZ2zehqnajgv7sc3i778n0Z systemd[1]: docker.service: Failed with result 'exit-code'.

docker 服务都垮了。

1
2
3
4
{
  "registry-mirrors": ["https://<你的ID>.mirror.aliyuncs.com"],
  "registry-mirrors-only": true  // 强制只从镜像加速器拉取
}

混账 AI 糊弄我，这文件就不能这么写。

Docker 安装及镜像源修改-阿里云开发者社区 (aliyun.com)

1
2
sudo systemctl daemon-reload
sudo systemctl restart docker

docker 换国内镜像源，docker 换源-阿里云开发者社区 (aliyun.com)

折腾了一上午，快到中午两点整总算弄好了。

换镜像源就得按照这篇文章里写的，把以下国内镜像源挨个配置上去，这样直接执行拉取镜像就成功了。

1
2
3
4
5
6
7
8
9
10
11
12
echo >/etc/docker/daemon.json
cat>/etc/docker/daemon.json <<END
{
  "registry-mirrors": [
    "https://hub-mirror.c.163.com",
    "https://ustc-edu-cn.mirror.aliyuncs.com",
    "https://ghcr.io",
    "https://mirror.baidubce.com"
  ]
}
END
systemctl restart docker
1
docker pull usememos/memos
1
2
3
4
5
6
7
8
9
10
11
12
[root@iZ2zehqnajgv7sc3i778n0Z ~]# docker pull usememos/memos
Using default tag: latest
latest: Pulling from usememos/memos
1f3e46996e29: Pull complete
3c6dabcaff14: Pull complete
066876855edf: Pull complete
12e6e904a51b: Pull complete
acc8f9c158a7: Pull complete
0ecac9b063ba: Pull complete
Digest: sha256:4723d86e6797fd629f1f2ff7afd4e37e669df7318f00de31c7ff9acf1fe9db7f
Status: Downloaded newer image for usememos/memos:latest
docker.io/usememos/memos:latest

自建 Memos 服务：碎片化笔记 + 博客说说栏，一栈双用 Memos 是一款轻量的自托管的备忘录中心。你可以把它当作个 - 掘金 (juejin.cn)

直接用 docker compose 启动。

1
2
3
4
5
6
# 创建合适的数据持久化目录
mkdir -p /dockerData/memos
# 进入目录
cd /dockerData/memos
# 创建 docker-compose.yml
touch docker-compose.yml

我的 docker-compose.yml 文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
services:
  memos:
    image: usememos/memos:latest
    container_name: memos
    restart: unless-stopped
    ports:
      - "5230:5230"
    volumes:
      - /dockerData/memos/data:/var/opt/memos
    environment:
      - MEMOS_MODE=prod
      - MEMOS_PORT=5230

最后，启动 memos：

1
2
3
4
# 拉取镜像
docker compose pull
# 启动
docker compose up -d

现在，访问 Memos（http://47.93.135.62:5230/） 即可，注册登录，就可以发表留言了，这个备忘录很好用。

融入 Hexo

2025 年 6 月 30 日

Mintimate/memos-bb-time: A Hexo plugin that integrates Memos’ API to add a Twitter-like ‘moments’ (shuoshuo) feature to your Hexo blog (github.com)

1
2
3
4
5
6
7
8
<script type="text/javascript">
  var bbMemos = {
    memos : 'http://47.93.135.62:5230/', //修改为自己部署 Memos 的网址，末尾有 / 斜杠
    limit : '10',//默认每次显示 10 条
    creatorId:'1' ,//早期默认为 101 用户，新安装是 1； https://demo.usememos.com/u/101
    domId: '#bber',//默认为 bber
  }
</script>
1
- { key: "说说", link: "/Memos/", icon: "iconfont icon-comment " }

iconfont-阿里巴巴矢量图标库

在 Hexo 博客中创建一个独立页面，通过 Memos API 展示说说内容。

功能说明

  • 创建独立说说页面，不依赖插件
  • 通过 Memos API 获取最新内容
  • 响应式设计，适配各种设备
  1. 创建新页面：

下载 source 目录，将内部的文件全部复制到 Hexo 博客的 source 目录下。

  1. 编辑生成的 source/Memos/index.md 文件：
1
2
3
4
5
6
var bbMemos = {
memos : '',//修改为自己部署 Memos 的网址，末尾有 / 斜杠
limit : '10',//默认每次显示 10 条
creatorId:'1' ,//早期默认为 101 用户，新安装是 1； https://demo.usememos.com/u/101
domId: '#bber',//默认为 bber
}
  1. 编辑主题配置文件：

编辑主题配置文件，添加导航内容。以 fluid 主题为例，编辑_config.fluid.yml内menu部分：

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
menu:
  - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
  - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
  - {
      key: "category",
      link: "/categories/",
      icon: "iconfont icon-category-fill",
    }
  - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
  - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
  - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
  - { key: "意马", link: "/Memos/", icon: "iconfont iconbg-chat" } # 添加说说页面
  - {
      key: "发现",
      icon: "iconfont iconnaicha",
      submenu:
        [
          {
            key: "哔哩哔哩",
            link: "https://space.bilibili.com/355567627",
            icon: "iconfont iconbilibili",
          },
          {
            key: "Youtube",
            link: "https://www.youtube.com/@mintimate",
            icon: "iconfont iconyoutube",
          },
          {
            key: "Github",
            link: "https://github.com/Mintimate",
            icon: "iconfont icongit",
          },
        ],
    }

重启 Hexo 服务，访问 http://localhost:4000/Memos/ 即可查看效果。

1
2
3
4
5
6
7
8
9
10
11
12
---
#---------------------------
# 音乐餐厅
# playlist Page
#
# 通过 hexo new page 命令创建的页面
# playlist Page through `hexo new page`
#---------------------------
音乐:
  banner_img: /img/newBG/girl20250517.jpg
  banner_img_height: 100
  banner_mask_alpha: 0.3
1
2
3
4
5
6
7
8
9
10
11
12
---
#---------------------------
# 说说
# Custom Page
#
# 通过 hexo new page 命令创建的页面
# Custom Page through `hexo new page`
#---------------------------
说说:
  banner_img: /img/newBG/bus20250517.jpg
  banner_img_height: 100
  banner_mask_alpha: 0.3
1
2
- { key: "音乐", link: "/playlist/", icon: "iconfont icon-music" }
- { key: "说说", link: "/memos/", icon: "iconfont icon-comment " }

这样自定义页面完成以后，个人博客“说说”栏目页新增完毕。

成功将 Memos 备忘录功能融入 Hexo。

Memos

文章分类

2025 年 7 月 6 日

今晚彻底翻新下文章分类，现在的文章所属分类就像标签一样，本不应该搞得这么杂乱，优化完毕后将来检索某领域下的文章会更高效。

分类：

代码锋芒，部署之道，架构探微，工善其事，算法物语，项目志录。

人间片刻，旧梦轻拾，灵感工坊，职路星火。

晚十一点半，总算完工了博客文章分类。

图床

搭建图床

几个月前搞伙伴匹配系统轮播图，想用自己的图片来做这个轮播图 （2023/12/02 早）

那我搭建一个自己的图床呗 拿个图片老方便了 学一学怎么搭建图床 说干就干

搭建过程就不多说了 收藏了好几个 CSDN 博客教程

image-20231202103311050

  • 最重要的是在 PicGo 里下一个插件 搭建一个 Gitee 图床 (不用 GitHub 图床是因为这玩意儿 BUG 太多了 尤其是网络原因)
  • 两个图床的配置都放下面了 我用了 Gitee 图床

image-20230523223215190

image-20230523223310839

  • 上传到图床的图片可以随意使用了
  • 在 Typora -> 偏好设置 -> 图像 里配置好上传服务和 PicGo 路径后 Typora 里使用到的图片都会自动上传到图床上去
  • 最后展示一下我刚上传到图床里的图片吧

  • 操他妈的这张图片怎么就显示不出来呢

  • 操他妈的上个厕所就能显示了
  • 总之 图床可以正常使用了 现在把浏览器收藏夹整理一下先 (2023/05/23 晚)
  • 今天距伙伴匹配系统从零开发 整整俩个月了 简单纪念一下 但是今天不想编码了 干点儿别的吧 (2023/05/24 晚)

好用的图床

2024 年 6 月 10 日

推荐阅读：分享 8 个免费的图床，帮助你轻松在 Power BI 报告中使用图片注册支持_https (sohu.com)

最近尝试在云服务器上搭建个人博客，顺便学习了基础的 Linux 命令操作、Nginx 安装配置、Node 安装配置和 Git 安装配置。

我已经把 Gitee 图床上的图片上传至七牛云中，之后等域名备案完成之后，直接批量修改个人博客中引用到的图片路径就行了。

七牛云也提供免费的对象存储服务，一个月免费十个 G 的额度，够用了。

Hello 图床：https://www.helloimg.com/

image-20240610123532512

image-20240610122437987

什么情况，这个免费的图床这么好用。

我就尝试了这一个，剩下的点开主页看了看，展示一下吧（普通人使用免费图床的门槛也低了很多，确实挺方便）：

PicGo：https://www.picgo.net/

image-20240610122753576

路过图床：https://imgse.com/

image-20240610122851287

sm.ms：https://sm.ms

image-20240610122928034

薄荷图床：https://riyugo.com/

image-20240610123042851

风筝图床：https://www.imgbed.link/

image-20240610123132923

ImgURL 图床：https://www.imgurl.org/

image-20240610123217737

Z4A 图床：https://z4a.net/

image-20240610123412270

七牛云

2024 年 7 月 8 日

设置自定义源站域名使用指南对象存储 - 七牛开发者中心 (qiniu.com)

七牛云新建对象存储空间后，会自动生成一个域名，一个月后自动失效。

这个临时域名实际上是配置了域名转发，将资源地址转发到真实的域名下，真实服务器的域名跟对象存储桶的存储区域相关：

image-20240708113657969

比方说这个存储区域下的服务器域名就是：iovip-z1.qiniuio.com

临时域名失效后，就需要配置自定义域名就能生成存储空间的图片外链，才能够在浏览器中正常访问到图片。

我的域名上个月提交备案后，十天左右就备案通过了，添加 CNAME 即解析记录：

image-20240708110800228

这里需要着重注意两点：记录值（目标服务器）和主机记录（映射域名），当然记录类型要为 CNAME，配置完成即可：

image-20240708114215875

七牛云这边就可以自定义源站域名，并成功绑定：

image-20240708111450150

阿里云有个挺不错的网络拨测工具，查看域名能否访问到，检测网络是否连通：

image-20240708114448322

PicGo 配置七牛云图床：

baidu.com/link?url=23pidhpNvNJLrDF64nSHp7b2lJVZnS8nGw5-Oxb61tPJYDqWZ_R-O9ujTnZGvKX2mSpQYNl93Rh4JE9xbuMuwujstgFg7gRELrkF4NkDlqW&wd=&eqid=b2f86f280031714e00000003668bdc85

配置完成后上传成功，浏览器也能正常显示，可 Typero 上显示不出来。

妈的，写了个 http 协议前缀就正常访问了，真诡异。

image-20240708224104785

image-20240708224712943

七牛云图床设置改成这样就行了，问题解决：

image-20240708225103784

2024 年 7 月 9 日

浏览器还是不显示，正在解决中。。

image-20240709082420367

解决了，也不算解决了，只是发现问题所在了：Hexo 图片插入无法显示的问题 - 知乎 (zhihu.com)

2024 年 7 月 11 日

image-20240711212234033

2025 年 1 月 13 日

七牛云收费标准：

  1. 对象存储容量收费：用户需要为存储在七牛云存储中的对象分配相应的存储空间，每个对象的大小不同，因此会产生不同的费用，七牛云存储提供了多种存储空间套餐，用户可以根据自己的需求选择合适的套餐。

  2. 流量收费：用户在使用七牛云存储的过程中，会产生数据的读写操作，从而产生流量费用，七牛云存储提供了按量付费和包年包月两种流量计费方式，用户可以根据自己的需求选择合适的计费方式。

  3. 请求次数收费：用户在使用七牛云存储的过程中，会产生各种 API 请求，如上传、下载、删除等，每次请求都会消耗一定的请求次数，七牛云存储提供了按量付费和包年包月两种请求次数计费方式，用户可以根据自己的需求选择合适的计费方式。

image-20250113085813678

image-20250113090901784

我开设的这个存储空间，本来每个月都有免费 30 GB 免费存储额度的，但上传下载需要额外计费，按量计费。

踩坑记录

node 版本过高

  • 注意，在使用 VuePress 生成文档站点的最后一步：在本地启动文档站点服务时，我出现了这样的问题：

image-20230624211723443

  • 问题原因及解决办法：解决方法_胡八一 的博客-CSDN 博客
  • 这就是此时的 node 版本过高，导致的兼容性问题（此时我用的是 v18.16.1），转换 node 为低版本 v16.19.0 后，问题解决
  • 这里也能比较出 VuePress 站点生成器相较于 VitePress，是有点落后了，推荐使用 VitePress 站点生成器
  • 成功在本地开启 VuePress 文档站点服务！效果如下：

image-20230624221026328

image-20230624220751165

  • 这个问题其实是 VuePress 站点生成器的共同问题，不兼容较新的 node.js 环境，我在配置使用 vuepress-theme-vdoing 主题时，也出现了这个问题
  • 遇到这种问题，要么降低 node 版本去兼容，要么舍弃这种程序服务
  • 比如用 VitePress 替代 VuePress，用 vuepress-theme-hope 主题替代 vuepress-theme-vdoing 主题
  • 具体怎么应对，各求所需，因人而异

node 版本过低

  • 我在安装配置 VitePress 文档站点主题时，报错了：

image-20230704152135707

  • 很显然，node 版本过低，于是我修改 node 版本为 18.16.1，问题成功解决
  • 有关 node 版本的修改可以在《配置指南-掌握 Node.js 配置》一文中详细了解
  • 成功安装 hope 主题，开启文档站点服务，效果如下：(2023/07/04 晚)

image-20230704190155270

模板文件格式不规范

  • 今天部署博客时，出现了这样的错误：（2023/08/07 早）
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
FATAL {
  err: Template render error: (unknown path)
    Error: expected end of comment, got end of file
      at Object._prettifyError (D:\blog\blog\node_modules\nunjucks\src\lib.js:36:11)
      ... 17 lines matching cause stack trace ...
      at process.processImmediate (node:internal/timers:476:21) {
    cause: Template render error: (unknown path)
      Error: expected end of comment, got end of file
        at Object._prettifyError (D:\blog\blog\node_modules\nunjucks\src\lib.js:36:11)
        at Template.render (D:\blog\blog\node_modules\nunjucks\src\environment.js:538:21)
        at Environment.renderString (D:\blog\blog\node_modules\nunjucks\src\environment.js:380:17)
        at D:\blog\blog\node_modules\hexo\lib\extend\tag.js:236:16
        at tryCatcher (D:\blog\blog\node_modules\bluebird\js\release\util.js:16:23)
        at Promise.fromNode.Promise.fromCallback (D:\blog\blog\node_modules\bluebird\js\release\promise.js:209:30)
        at Tag.render (D:\blog\blog\node_modules\hexo\lib\extend\tag.js:235:20)
        at Object.onRenderEnd (D:\blog\blog\node_modules\hexo\lib\hexo\post.js:297:22)
        at D:\blog\blog\node_modules\hexo\lib\hexo\render.js:79:21
        at tryCatcher (D:\blog\blog\node_modules\bluebird\js\release\util.js:16:23)
        at Promise._settlePromiseFromHandler (D:\blog\blog\node_modules\bluebird\js\release\promise.js:547:31)
        at Promise._settlePromise (D:\blog\blog\node_modules\bluebird\js\release\promise.js:604:18)
        at Promise._settlePromise0 (D:\blog\blog\node_modules\bluebird\js\release\promise.js:649:10)
        at Promise._settlePromises (D:\blog\blog\node_modules\bluebird\js\release\promise.js:729:18)
        at _drainQueueStep (D:\blog\blog\node_modules\bluebird\js\release\async.js:93:12)
        at _drainQueue (D:\blog\blog\node_modules\bluebird\js\release\async.js:86:9)
        at Async._drainQueues (D:\blog\blog\node_modules\bluebird\js\release\async.js:102:5)
        at Async.drainQueues (D:\blog\blog\node_modules\bluebird\js\relea
  • 出现这样的很正常，检查一下哪篇.md 文章里的格式出错了：
    • 标题栏
    • 正文内容
  • 如果无法准确定位到是哪篇文章出问题了，可以这样执行命令：
1
hexo g --debug
  • 这样就能准确定位到出错的文章了：
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
03:10:55.161 DEBUG Rendering post: D:\blog\blog\source\_posts\解决前端框架使用中的常见问题.md
03:10:55.185 FATAL {
  err: Template render error: (unknown path)
    Error: expected end of comment, got end of file
      at Object._prettifyError (D:\blog\blog\node_modules\nunjucks\src\lib.js:36:11)
      ... 17 lines matching cause stack trace ...
      at process.processImmediate (node:internal/timers:476:21) {
    cause: Template render error: (unknown path)
      Error: expected end of comment, got end of file
        at Object._prettifyError (D:\blog\blog\node_modules\nunjucks\src\lib.js:36:11)
        at Template.render (D:\blog\blog\node_modules\nunjucks\src\environment.js:538:21)
        at Environment.renderString (D:\blog\blog\node_modules\nunjucks\src\environment.js:380:17)
        at D:\blog\blog\node_modules\hexo\lib\extend\tag.js:236:16
        at tryCatcher (D:\blog\blog\node_modules\bluebird\js\release\util.js:16:23)
        at Promise.fromNode.Promise.fromCallback (D:\blog\blog\node_modules\bluebird\js\release\promise.js:209:30)
        at Tag.render (D:\blog\blog\node_modules\hexo\lib\extend\tag.js:235:20)
        at Object.onRenderEnd (D:\blog\blog\node_modules\hexo\lib\hexo\post.js:297:22)
        at D:\blog\blog\node_modules\hexo\lib\hexo\render.js:79:21
        at tryCatcher (D:\blog\blog\node_modules\bluebird\js\release\util.js:16:23)
        at Promise._settlePromiseFromHandler (D:\blog\blog\node_modules\bluebird\js\release\promise.js:547:31)
        at Promise._settlePromise (D:\blog\blog\node_modules\bluebird\js\release\promise.js:604:18)
        at Promise._settlePromise0 (D:\blog\blog\node_modules\bluebird\js\release\promise.js:649:10)
        at Promise._settlePromises (D:\blog\blog\node_modules\bluebird\js\release\promise.js:729:18)
        at _drainQueueStep (D:\blog\blog\node_modules\bluebird\js\release\async.js:93:12)
        at _drainQueue (D:\blog\blog\node_modules\bluebird\js\release\async.js:86:9)
        at Async._drainQueues (D:\blog\blog\node_modules\bluebird\js\r
  • 找了半天才发现是这个问题：

image-20230807112357395

  • 超链接出现 # 特殊符号了，导致编译失败，删除就行了（2023/08/07 早）

image-20230910231333971

友链 item 格式错误

  • 今天更新了下个人博客的友链列表，竟然这样也能出错：

image-20231001220333236

image-20231001221500068

  • 如上，把哪个明显的缩进取消了就行了（2023/10/01 晚）

图片违规

image-20231002162116235

  • 这张图片违规吗 😅：

image-20231002162218625

  • 好好好，我删了就是了，正好没有文章引用这张图（2023/10/02 午）

title 格式错误

  • 奶奶的，就这里的问号后面没有空格，眼瞅着它报了一个月的错：（2023/12/01 晚）

image-20231201230819941

密钥

2025 年 6 月 5 日

今天部署博客出现了问题，这应该是前段时间在本机重新生成 .ssh 密钥对后没有及时在部署平台做对应修改，现在权限识别错误。

1
2
3
4
5
6
7
8
9
10
11
Please make sure you have the correct access rights
and the repository exists.
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (D:\Blog\blog\node_modules\hexo-util\lib\spawn.js:51:21)
      at ChildProcess.emit (node:events:513:28)
      at cp.emit (D:\Blog\blog\node_modules\cross-spawn\lib\enoent.js:34:29)
      at ChildProcess._handle.onexit (node:internal/child_process:291:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

我的工作台-AtomGit

image-20250605231544198

总结

2023 年 5 月 27 日

至此，快速搭建博客站点和快速生成文档站点已经完毕。

在接下来的内容中，我们会继续分享如何使用 Gitee/GitHub 的 Page 服务来托管静态网站，详见《大道至简：快速搭建博客与文档站点的终极指南 2.0》。

有关博客/文档站点的详细配置，包括主题配置、目录结构等，我们会在《大道至简：快速搭建博客与文档站点的终极指南 3.0》一文中详细讲解。

个人博客 > 代码锋芒 > 部署之道
#经验 #Blog #Docs
大道至简：快速搭建博客与文档站点的终极指南1.0
https://test.atomgit.net/blog/2023/05/27/大道至简：快速搭建博客与文档站点的终极指南1.0/
作者
Memory
发布于
2023年5月27日
更新于
2025年6月6日
许可协议