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

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

前言

这块内容我耗费了较长时间，毕竟博客优化需要经过一定的时间

在博客搭建完成半年之后，我终于可以简单介绍下个人博客的优化流程了

这篇博文旨在以我的经验为基础，简要介绍在个人博客的运营过程中如何优雅地解决主题配置和页面排版，并提供个性化的建议，以帮助广大互联网从业者打造展示独特风格的个人博客。

我将从以下三个方面进行介绍：

✨ 页面排版：如何设计大方简洁的页面排版，吸引读者的注意力？

🏠 博客门面：优化个人简介和博客介绍，明确博客内容的输出方向，凸显博客的特色。

📚 文章输出：博客的精髓在于内容的丰富程度，而非浮夸的页面样式。

正文

页面排版

好用的壁纸网站

首页文章封面图

背景图

个人头像

个人简介

博客门面

优化个人简介、博客简介。

文章输出

每日坚持记录。

评论功能

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.xyz/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
<!-- 评论框美化 -->
<style>
    #comments .veditor{
        min-height: 11rem;
        background-image: url(http://blog.memory-life.xyz/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.xyz/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.xyz/%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.xyz/%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
不知道少了什么感觉，没有以前快乐。

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

推广

昨天在星球冒泡~（2023/11/12 早）

加入星球九个月了，这里学习氛围真的很不错，个个说话都好听。今天来为鱼友们分享下我的个人博客：

个人博客地址：Memory’s blog

搭建个人博客有八个月了，从六月份开始，每天都会在个人博客打卡学习进度，很明显能感觉到自己在慢慢进步

博客简介

博客搭建是 Gitee + hexo，部署在 Gitee 访问速度很快，hexo 的主题我也很喜欢。主题的个性化配置也花了挺大功夫，几个月以来抽时间慢慢优化了。个人博客的详细搭建流程也能在《大道至简：快速搭建博客与文档站点的终极指南 1.0》中了解到

目前有原创博文六十余篇，当然不是什么高深的技术文章，仅仅是我自学编程过程中的学习经验、踩坑经历总结

详细的个人介绍和博文介绍都可以在《探索我的博客世界 - 个人导读》中了解到

欢迎大家来访问我的博客呀！如果你也有个人博客，也可以在评论里贴上你的博客访问地址，交换友链~

交换友链

  • 提供：博客访问地址 + 博主昵称，即可交换友链成功

  • 如果你有可访问的头像图片地址的话，也可以提供~

  • 格式如下：

博客访问地址：https://deng-2022.gitee.io/blog/

博主昵称：Memory

头像（可选）：https://deng-2022.gitee.io/blog/img/memory.jpg

博客展示

简单截几张个人博客图片吧：

image-20240411145740498

image-20240411145723552

image-20240411145801951

image-20240411145826060

image-20231111114437428

image-20231111114448636

总结

个人博客 > 代码锋芒 > 部署之道
#经验 #Blog #站点配置
大道至简：快速搭建博客与文档站点的终极指南3.0
http://example.com/2023/06/26/大道至简：快速搭建博客与文档站点的终极指南3.0/
作者
Memory
发布于
2023年6月26日
更新于
2025年6月5日
许可协议