前言

// ...
    .loading-bg
      display flex
      width 100%
      height 100%
      position fixed
      background var(--loading-bg)  // 修改这一行
// ...
    .loading-img
      width 100px
      height 100px
      margin auto
      animation-duration 0.5s // 修改这一行，复制完后请删除注释
// ...

修改 themes/solitude/source/css/_mode/index.styl 文件：

[data-theme=dark]
--loading-bg #000000dd  // 添加这一行
// ...
[data-theme=light]
--loading-bg #ffffffdd  // 添加这一行
// ...

参考	原帖
关于本站｜Solitude主题魔改内容	❖星港◎Star☆

2. Tab标签

点击按钮可以跳转页面。

修改 themes/solitude/scripts/tags/tabs.js 如下：

'use strict';

function postTabs([name, active], content) {
  // 定义正则表达式，用于匹配选项卡块
  const tabBlock = /<!--\s*tab (.*?)(?:\s*\[(.*?)\])?\s*-->\n([\s\S]*?)<!--\s*endtab\s*-->/g;

  // 使用 matchAll 来获取所有匹配的选项卡
  const matches = [...content.matchAll(tabBlock)];

  // 将一个字符串转换为数字，设置默认选中的标签索引
  active = Number(active) || 0;

  // 生成选项卡项函数
  const generateTabItems = (matches, name, active, parentId) => {
    return matches.map((match, tabId) => {
      // 捕获选项卡标题和图标
      const [tabCaption = '', tabIcon = ''] = match[1].split('@');

      // 获取可选的链接，如果有的话
      const link = match[2] ? match[2].trim() : '';

      // 渲染内容，使用 Hexo 的 Markdown 渲染引擎
      const postContent = renderMarkdown(match[3]);

      // 生成唯一的 id，用于对应选项卡内容区域
      const tabHref = `${parentId}-${tabId}`;

      // 处理图标 HTML
      const iconHtml = tabIcon ? `<i class="${tabIcon.trim()} tab solitude"></i>` : '';

      // 判断是否为活动状态（选中状态）
      const isActive = active === tabId ? ' active' : '';

      // 回到顶部按钮的 HTML
      const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';

      // 根据是否存在链接来生成导航项
      return {
        nav: createNavItem(link, tabHref, iconHtml, tabCaption, isActive, ),
        // 选项卡的内容部分
        content: `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent}${toTopButton}</div>`
      };
    });
  };

  const renderMarkdown = (text) => {
    return hexo.render.renderSync({ text, engine: 'markdown' }).trim();
  };

  const createNavItem = (link, tabHref, iconHtml, tabCaption, isActive) => {
    const buttonContent = `${iconHtml}${tabCaption.trim() || `${name} ${tabHref}`}`;
    return link ? `
      <li class="tab${isActive}">
        <button onclick="location.href='${link}'" data-href="#${tabHref}" type="button">
          ${buttonContent}
        </button>
      </li>` : `
      <li class="tab${isActive}">
        <button type="button" data-href="#${tabHref}">
          ${buttonContent}
        </button>
      </li>`;
  };

  // 生成选项卡项
  const tabItems = generateTabItems(matches, name, active, name.toLowerCase().replace(/\s+/g, '-'));

  // 回到顶部按钮的 HTML
  const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';

  // 创建完整选项卡结构（包含导航和内容）
  const createTabStructure = (tabItems) => {
    const tabNav = `<ul class="nav-tabs">${tabItems.map(item => item.nav).join('')}</ul>`;
    const tabContent = `<div class="tab-contents">${tabItems.map(item => item.content).join('')}</div>`;
    return { tabNav, tabContent };
  };

  // 获取生成的选项卡导航和内容
  const { tabNav, tabContent } = createTabStructure(tabItems);

  // 返回最终的选项卡 HTML 结构
  return `<div class="tabs" id="${name.toLowerCase().replace(/\s+/g, '-')}">${tabNav}${tabContent}</div>`;
}

// 注册自定义标签，以便在 Hexo 中使用
hexo.extend.tag.register('tabs', postTabs, { ends: true });
hexo.extend.tag.register('subtabs', postTabs, { ends: true });
hexo.extend.tag.register('subsubtabs', postTabs, { ends: true });

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* tab标签的链接跳转 */
.tab-to-top {
    position: relative;
    display: block;
    margin: 16px 0 0 auto;
    color: var(--efu-lighttext);
}
.tabs .nav-tabs .tab button {
  width: 100%;
  padding: 0 0.3rem;
  height: 100%;
  font-size: 14px;
}
.tabs .nav-tabs .tab.active {
  background: var(--light-grey);
}
.tabs .nav-tabs .tab.active i,
.tabs .nav-tabs .tab.active button {
  color: var(--efu-lighttext);
}
.tabs .nav-tabs .tab i {
  font-size: 14px;
  margin-right: 0.3rem;
}

在 themes/solitude/source/js/main.js 最后添加：

const initCodeBlocks = (container) => {
  const { highlight } = GLOBAL_CONFIG;
  if (!highlight?.limit) return;
  const limit = highlight.limit;
  const syntax = highlight.syntax || 'prismjs';
  const selector = syntax === 'highlight.js' 
    ? 'figure.highlight' 
    : 'pre[class*="language-"]';
  container.querySelectorAll(selector).forEach(item => {
    item.style.maxHeight = `${limit}px`;
    item.style.overflow = 'hidden';
    if (item.scrollHeight > limit + 30 && !item.querySelector('.code-expand-btn')) {
      const btn = document.createElement('div');
      btn.className = 'code-expand-btn';
      btn.innerHTML = '<i class="solitude fas fa-angles-down"></i>';
      btn.onclick = () => {
        item.style.maxHeight = 'none';
        btn.remove();
      };
      syntax === 'highlight.js'
        ? item.querySelector('table').appendChild(btn)
        : item.parentNode.insertBefore(btn, item.nextSibling);
    }
  });
};
document.addEventListener('pjax:complete', () => {
  initCodeBlocks(document);
  document.addEventListener('click', handleTabClick);
});
const handleTabClick = (e) => {
  const tab = e.target.closest('.nav-tabs [data-href]');
  if (!tab) return;
  const targetContent = document.querySelector(tab.getAttribute('data-href'));
  targetContent.classList.add('active');
  setTimeout(() => initCodeBlocks(targetContent), 50);
};

document.addEventListener('DOMContentLoaded', () => {
  initCodeBlocks(document);
  document.addEventListener('click', handleTabClick);
});

用法

{% tabs 唯一名称, [index] %}

<!-- tab [唯一Tab] [@icon] [链接] -->

任何内容（也支持内联标签）。

<!-- endtab -->

{% endtabs %}

{% tabs test, 1 %}

<!-- tab test @fas fa-book [https://test.com] -->

任何内容（也支持内联标签）。

<!-- endtab -->

{% endtabs %}

参考	原帖
外挂标签使用	伍十七

3. 微信公众号卡片

左边侧边栏，点击它可以跳转wechatOA。

修改 themes/solitude/layout/includes/widgets/aside/asideFlipCard.pug 文件：

//- 添加这一行，位于第一行
a(href="/rss/wechatOA/",data-pajx)
    .card-widget.card-platform
        #flip-wrapper
            #flip-content
                .face
                .back.face

4. 友链、留言页

改为点击按钮跳转页面。

修改 themes/solitude/languages/ 下所有文件：

# default.yml
link:
  banner:
    toComment: 申请/修改友链 # 修改这一行
# en.yml
link:
  banner:
    toComment: Application/Modification link
# zh-CN.yml
link:
  banner:
    toComment: 申请/修改友链
# zh-TW.yml
link:
  banner:
    toComment: 申請/修改友鏈

修改 themes/solitude/layout/includes/widgets/page/links/banner.pug 文件：

//- ...
if theme.comment.use
    //- 替换链接跳转 
    a.banner-button(onclick="window.open('https://github.com/ymxblog/friends/',' _blank')")
        i.solitude.fas.fa-circle-chevron-right
        span.solitude.banner-button-text=_p('link.banner.toComment')
//- ...

修改 themes/solitude/layout/includes/widgets/page/message/content.pug 文件：

.article-container
    != page.content
    if theme.envelope.enable
        .switch_message
            button.open(type='button' onclick="document.getElementById('barrage').classList.remove('hide')")
                span(aria-hidden='true')= __('message.open')
            button.close(type='button' onclick="document.getElementById('barrage').classList.add('hide')")
                span(aria-hidden='true')= __('message.close')
            //- 添加这两行，链接可改
            button(type='button' onclick="window.open('https://github.com/ymxblog/friends/',' _blank')")
                span(aria-hidden='true')= __('link.banner.toComment') 
        #barrage

5. waline评论计数

无法获取waline的评论数据，返回undefined，翻了一下官方文档进行修改。

修改 themes/solitude/layout/includes/widgets/sidebar/waline.pug 如下：

.length-num#waline_allcount
  i.solitude.fa-solid.fa-spinner.fa-spin

script(pjax).
  (async () => {
    await fetch('!{theme.waline.envId}/api/comment?type=count', {method: 'GET'}).then(async res => res.json())
      .then(async data => {
        document.querySelector('#waline_allcount').innerHTML = data.data
      })
  })()

原帖	作者
API-Waline	官网

6. 添加评论协议

评论区可看。

修改 themes/solitude/layout/includes/widgets/third-party/comments/comment.pug 如下：

//- ...

  //- 评论计数
  if count && is_post()
    span.count
      = ' ('
      each name in use
        +commentCount(name)
      | )
a.plxycss(href="/comment/")
    i.solitude.fas.fa-file-lines
    span &nbsp;评论协议

//- ...

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 评论协议样式 */
a.plxycss {
  float: right;
  font-weight: bold;
  font-size: 20px;
}

7. 添加即刻短文图片的描述

即刻短言可看，点效果跳转

修改 themes/solitude/layout/includes/page/brevity.pug 如下：

//- ...

if item.image
    .bber-content-img
        each img in item.image
            if typeof img === 'string'
                img(src=img, alt=item.content || "图片暂无描述")
            else
                img(src=img.url, alt=(img.alt || item.content || "图片暂无描述"))

//- ...

用法两者皆可

- content: 这次做的椰奶冻粉还不错，就是糖放多了，好吃(╯▽╰ )好香~~
  date: 2025-03-27 00:01:00
  location: 家
  image:
    - url: https://images.418121.xyz/file/blog/essay/2025/03/27/01.webp
      alt: 按着教程来的，事不过三，终于成功了
- content: 我弟弟妹妹画的，很有天赋，像我小时候一样 b(￣▽￣)d ~
  date: 2025-03-26 21:30:00
  location: 家
  image:
    - https://images.418121.xyz/file/blog/essay/2025/03/26/01.webp

8. 适配Waline文章热度

超过五条评论即可显示”多人互动“，点效果跳转。

修改 themes/solitude/layout/includes/widgets/third-party/hot/index.pug 如下：

- const { count } = theme.comment.hot_tip
- const { use } = theme.comment

if use
    case use[0]
      when 'Twikoo'
          include ./twikoo
      when 'Artalk'
          include ./artalk
      //- 添加下面两行
      when 'Waline'
          include ./waline

在 themes/solitude/layout/includes/widgets/third-party/hot/ 下添加 waline.pug 文件：

script.
  function updatePostsBasedOnComments() {
    const location = window.location.origin;
    const posts = Array.from(document.querySelectorAll('.recent-post-item[onclick] .post_cover a'))
      .map(item => item.href.replace(location, ''));
    const fetchCommentsCount = () => {
      const requests = posts.map(url => {
        return fetch(`#{theme.waline.envId}/api/comment?type=count&url=${encodeURIComponent(url)}`)
          .then(response => response.json())
          .then(data => ({
            url: url,
            count: data.errno === 0 ? data.data[0] : 0
          }));
      });
      Promise.all(requests)
        .then(handleCommentsResponse)
        .catch(error => console.error("Error fetching comments:", error));
    };
    const handleCommentsResponse = (response) => {
      response.forEach(({ url, count }) => {
        if (count > #{count}) {
          const postElement = document.querySelector(`.recent-post-item[onclick*="${url}"]`);
          if (postElement) updatePostElement(postElement);
        }
      });
    };
    const updatePostElement = (postElement) => {
      const infoTopTips = postElement.querySelector(".recent-post-info-top-tips");
      const originalSpan = infoTopTips?.querySelector(".original");
      const existingHotTip = infoTopTips?.querySelector(".hot-tip");
      if (!existingHotTip && originalSpan) {
        const hotTip = createHotTipElement();
        infoTopTips.insertBefore(hotTip, originalSpan);
      }
    };
    const createHotTipElement = () => {
      const hotTip = document.createElement("span");
      hotTip.classList.add("hot-tip");
      const icon = document.createElement("i");
      icon.classList.add("solitude", "fas", "fa-fire-flame-curved");
      hotTip.appendChild(icon);
      const commentCount = document.createTextNode("#{_p('hot-tip')}");
      hotTip.appendChild(commentCount);
      return hotTip;
    };
      fetchCommentsCount();
  }

确认功能是否开启

# ...
  # Hot comment tips
  # 热评提示
  hot_tip:
    enable: true
    # Number of hot comments
    count: 5
# ...

参考了本主题适配Twikoo的用法。

9. 魔改主题关于页

点击效果，即可跳转至关于页。

参考 anzhiyu 主题关于页进行魔改 solitude 主题关于页

修改 themes/solitude/layout/includes/widgets/page/about/hobbies.pug 如下（复制粘贴覆盖）：

- var games = site.data.about.game

if games
    .author-content
        each game, index in games
            style.
                .game-#{index}::after {
                    box-shadow: #{game.box_shadow} !important;
                }
            .author-content-item.game(class=`game-${index}`, style=`background: url(${game.img}) no-repeat top; background-size: cover;`)
                .card-content
                    .author-content-item-tips= game.title
                    span.author-content-item-title= game.subtitle
                    .content-bottom
                        if game.icon_group
                            .icon-group
                                each icon in game.icon_group
                                    i(style=`background-image: url(${icon})`)
                        else if game.tips_left
                            .tips= game.tips_left
                        if game.tips_right
                            .tips= game.tips_right

if site.data.about.likes
  - const likes = site.data.about.likes
  .author-content
    each like in likes
      if like.type === 'comic'
        .author-content-item.comic
            .card-content
            .author-content-item-tips= like.tips
            span.author-content-item-title= like.title
            .content-bottom
              if like.subtips
                .tips= like.subtips
              if like.button
                .banner-button-group
                  a.banner-button(href=url_for(like.button_link))
                    i.solitude.fas.fa-circle-chevron-right
                    span.banner-button-text= like.button_text
            .comic-box
              each item in like.list
              a.comic-item(href=item.href target="_blank", rel="noopener noreferrer", title=item.name)
                .comic-item-cover
                //- nolazyload 我感觉不用加，不加的话好像会一直请求，所以我加了，自己试试吧。
                img.nolazyload(src=item.cover, alt=item.name)

      else
        .author-content-item(class=like.type style=`background: url(${like.bg}) no-repeat center/cover`)
          .card-content
            .author-content-item-tips= like.tips
            span.author-content-item-title= like.title
            .content-bottom
              if like.subtips
                .tips= like.subtips
              if like.button
                .banner-button-group
                  a.banner-button(href=url_for(like.button_link))
                    i.solitude.fas.fa-circle-chevron-right
                    span.banner-button-text= like.button_text

修改 themes/solitude/source/css/_page/_about/like.styl 如下（复制粘贴覆盖）：

#about-page
  .author-content-item.like-technology
    background-size cover
    min-height 230px
    color var(--efu-white)
    &::after
      box-shadow 0 -69px 100px 10px #050b20 inset
      position absolute
      content ''
      width 100%
      height 100%
      top 0
      left 0

  .author-content-item.like-music
    background-size cover
    min-height 400px
    color var(--efu-white)
    overflow hidden
    &::after
      box-shadow 0 -69px 100px 10px #0e0e0e inset
      position absolute
      content ''
      width 100%
      height 100%
      top 0
      left 0

  .author-content-item.comic
    min-height 400px
    color var(--efu-white)
    position relative
    
    .comic-box
      width 110%
      height 100%
      display flex
      position absolute
      left 50%
      top 0
      transform translateX(-50%)
      &::after
        box-shadow 0 -69px 100px 10px #04120f inset
        position absolute
        content ''
        width 100%
        height 100%
        top 0
        left 0
        pointer-events: none;
    
    .author-content-item-tips,
    .author-content-item-title,
    .content-bottom
      z-index 3
      color var(--efu-white)
    
    .comic-item
      height 100%
      color var(--efu-white)
      width 20%
      transform skew(-10deg, 0deg)
      transition 0.8s
      position relative
      overflow hidden
      &:hover
        width 46%
        .comic-item-cover
          left 16%
          transform skew(10deg, 0deg) scale(1.6)

      .comic-item-cover
        position absolute
        top 0
        left -50%
        height 100%
        transform skew(10deg, 0deg)
        object-fit cover
        transition scale 0.2s, all 0.8s
        img
          height 100%
          max-width none
          transition 0.8s

  .author-content-item.comic
    .comic-box
      +maxWidth1400()
          width 120%
          height 100%      
      +maxWidth768()
          width 109%
          height 100%
      +maxWidth690()
          width 120%
          height 100%

用法：保留之前的格式，新增comic类型示例

# comic 和 like-technology 二选一 你全要也可以
likes:
  - type: "comic"
    tips: 爱好番剧 # 右上角提示
    title: 追番 # 标题
    subtips: "科幻、动漫、喜剧" # 左下小字，可不要
    list: # 最好就是五个或以上，相信你们肯定没那么少的。
      - name: 你的名字 # 动漫或影视名
        href: https://movie.douban.com/subject/26683290/ # B站或豆瓣某个位置
        cover: https://images.418121.xyz/file/blog/covers/p2910701461.webp  # 封面图
      - name: 四月是你的谎言
        href: https://www.bilibili.com/bangumi/media/md1699
        cover: https://images.418121.xyz/file/blog/covers/p2232343678.webp
      - name: 流浪地球2
        href: https://movie.douban.com/subject/35267208/
        cover: https://images.418121.xyz/file/blog/covers/p2886653882.webp
      - name: 花束般的恋爱
        href: https://movie.douban.com/subject/34874432/
        cover: https://images.418121.xyz/file/blog/covers/p2868462052.webp
      - name: 天气之子
        href: https://movie.douban.com/subject/30402296/
        cover: https://images.418121.xyz/file/blog/covers/p2558022335.webp
    button: true # false 可以关闭右边按钮
    button_link: "/pyq/"  # 跳转路径
    button_text: "观看记录"   # 按钮文字
  # - type: "like-technology"
  #   bg: "https://images.418121.xyz/file/blog/page/movie.webp"
  #   tips: "与她一起看"
  #   title: "影视偏好"
  #   subtips: "科幻、动漫、喜剧"
  #   button: true
  #   button_link: "/pyq/"
  #   button_text: "观看记录"
  - type: "like-music"
    bg: "https://images.418121.xyz/file/blog/page/yy.webp"
    tips: "粤语、流行"
    title: "私人歌单"
    subtips: "账号密码：ymx"
    button: true
    button_link: "https://music.418121.xyz/app/#/login/"
    button_text: "音乐库"

原帖	作者
关于-安知鱼	安知鱼

10. 即可短文识别Html标签（换行加粗等）

单击效果跳转。

修改 themes/solitude/layout/includes/page/brevity.pug 文件（第19行）：
1
p.datacont!= item.content
修改 themes/solitude/layout/includes/widgets/home/bbTimeList.pug 文件（第7行）：
1
| #{item.content.replace(/<[^>]*>/g, '')}

11. 即刻短文仿微信朋友圈样式

点击效果即可跳转。

修改 themes/solitude/layout/includes/page/brevity.pug 如下：

include ../widgets/page/banner
if theme.brevity.enable
    #brevity_page
      .author-info
        .msg
          .avatar
              a.brevity-avatar(href=url_for('/about'))
                img(src=theme.aside.my_card.author.img)
          .brevity-name=theme.site.name.custom
        .desc=theme.aside.my_card.description
    #bber
        section.timeline.page-1
            ul.list.waterfall
                each item in site.data.brevity.slice(0, theme.brevity.strip)
                    li.item
                        if theme.brevity.style === 1
                            .meta
                                img.avatar(src=theme.aside.my_card.author.img)

                        #bber-content
                            .info
                                span.bber_nick= config.author
                            p.datacont!= item.content
                            if item.image
                                .bber-content-img
                                    each img in item.image
                                        if typeof img === 'string'
                                            img(src=img, alt=item.content || "图片暂无描述")
                                        else
                                            img(src=img.url, alt=(img.alt || item.content || "图片暂无描述"))

                        if item.aplayer
                            .bber-music
                                meting-js(server=item.aplayer.server type="song" id=item.aplayer.id mutex="true" preload="none" theme="var(--efu-main)" data-lrctype="0")

                        if item.video
                            .bber-video
                                if item.video.player
                                    video(src=item.video.player controls="controls" style="object-fit: cover;")
                                if item.video.bilibili
                                    iframe(src='//player.bilibili.com/player.html?autoplay=0&bvid=' + item.video.bilibili scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true")

                        if theme.brevity.style === 1
                            .bber-bottom
                                .bber-info
                                    .bber-info-time
                                        time.datetime(datetime=moment(item.date).format())
                                    if item.location
                                        .bber-info-location
                                            = item.location
                                    if item.link
                                        a.bber-content-link(href=url_for(item.link) target="_blank")
                                            i.solitude.fas.fa-link
                                            = _p('essay.link')
                                if theme.comment.use && item.content
                                    a.bber-reply(onclick=`sco.toTalk('${item.content}')`)
                                        i.solitude.fas.fa-comment
                            hr

            #bber-tips
                if theme.brevity.strip === -1
                    = _p('essay.tip0')
                else
                    = _p('essay.tip1').replace('#{count}', theme.brevity.strip)

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 魔改即刻短文样式 */
#brevity_page .author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    top: -35px;
    z-index: 3;
    margin-right: 25px;
    padding-bottom: 25px;
}

.desc {
    font-size: 16px;
    padding-bottom: 8px;
}

#brevity_page .author-info .msg {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

#brevity_page a.brevity-avatar {
    height: 60px;
    width: 60px;
    display: block;
    border-radius: 5px;
    background: #fff;
    margin-top: -15px;
}

#brevity_page a.brevity-avatar img{
  border-radius: 5px;
}

[data-theme=dark] #brevity_page a.brevity-avatar {
    background: #ffffffad;
}

#brevity_page .brevity-name {
    margin-right: 10px;
    margin-top: -15px;
    padding-top: 2px;
    color: #eee;
    font-weight: 600;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    display: -webkit-box;
    overflow: hidden;
}

#bber {
    margin-top: -2rem;
}

#bber div#bber-content {
    position: relative;
}

#bber .bber-content-img{
  border-radius: 0;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 4px; 
}

#bber .bber-content-img a{
    overflow: hidden; 
    border-radius: 0;
    min-height: 0; 
}

#bber .bber-content-img a img,
#bber .bber-content .bber-video {
    width: 100%; 
    height: 100px;
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s;
    border-radius: 0;
}
#bber .bber-content-img a:only-child{
  grid-column: 1 / -1; 
  width: 100%;
}

#bber .bber-content-img a:only-child img {
  width: 100%;
  height: 200px;
}

#bber #bber-content .datacont {
    font-size: 18px;
    font-weight: 400;
    color: var(--font-color);
}

#bber #bber-content-img img {
    width: 100%;
}

#bber .bber-bottom {
    display: inline !important;
    padding-top: 8px;
    padding-bottom: 4px;
}

#bber>section>ul>li>div .bber-info-from,
#bber>section>ul>li>div .bber-info .bber-info-time time.datetime {
    background: 0 0;
    padding: 0;
    height: 26px;
    font-size: 13px;
    color: #808080;
}

#bber #bber-content .info span.bber_nick,
#bber .meta .avatar {
    display: none;
    color: #8eaccd;
}

.bber-reply {
    position: absolute;
    right: 15px;
    bottom: 33px;
    height: 26px;
    line-height: 26px;
}

.bber-content-link {
    font-size: 13px !important;
    position: absolute;
    right: 30px;
    line-height: 26px;
    color: var(--efu-main)!important;
    border-radius: 5px;
}

.bber-content-link i.solitude,
.bber-reply i.solitude {
    font-size: 16px !important;
}

.bber-info-location {
  color: #8eaccd !important;
  font-size: 13px !important;
  background-color: transparent !important;
  padding: 0 !important;
}

#bber .timeline ul li.item hr {
  border: 1px solid var(--efu-theme-op) !important;
}

#bber .bber-info .bber-info-time{
  background-color: transparent !important;
  padding: 0 !important;
}

div#bber-tips {
    padding-bottom: 20px;
}

@media screen and (max-width:768px),
(max-height:580px) {

    body[data-type=brevity] #bber-content {
        margin-left: 55px;
    }

    #brevity_page .author-info {
      margin-right: 10px;
    }
    .bber-reply {
      bottom: 22px;
    }

    .bber-content-link {
        right: 35px;
    }

    a.brevity-avatar {
        height: 60px;
        width: 60px;
    }

    .author-content.author-content-item.sharePage {
        height: 16rem;
        border-radius: 5px;
    }

    #bber .bber-bottom {
      margin-left: 55px;
    }

    .desc {
        font-size: 16px;
        padding-bottom: 8px;
    }

    #bber {
        margin-top: -3rem !important;
        width: 95%;
        margin: auto;
    }

    #bber .timeline ul li.item {
        width: 100%;
        padding: 0;
        border: none;
        border-radius: 0;
        background: 0 0;
        box-shadow: none;
    }

    #bber .timeline ul li.item:hover {
        border: none;
    }

    #bber #bber-content .info span.bber_nick {
        font-size: 16px;
        font-weight: 800;
        display: block;
    }

    #bber .meta .avatar {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        overflow: hidden;
        position: absolute;
        display: block;
    }
    #bber .bber-music {
      width: 85%;
      margin-left: 55px;
      border: none;
      background: 0 0;
      box-shadow: none;
    }
    #bber .bber-video{
      padding: 30% 43%;
      margin-left: 55px;
    }
}

修改主题文件 _config_solitude.yml：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/custom/css/custom.css">


# --------------------------- start ---------------------------
# Brevity Page
# 即刻短文
brevity:
  enable: true
  home_mini: true
  music: true
  page: /essay/
  style: 1
  strip: 30
# --------------------------- end ---------------------------

原帖	作者
主题魔改-即刻短文	梦爱吃鱼

12. 恢复背景图片

当前主题展示

修改 themes/solitude/layout/includes/layout.pug 文件（第14行）：

body#body(data-type=page.type)
    //- 背景特效
    if theme.display_mode.universe
        +conditionalWrapper(theme.display_mode.universe)
            canvas#universe
    //- 背景图片（这里添加）
    if theme.background.enable
        #global_bg
    //- 全屏加载动画
    if theme.loading.fullpage
        +conditionalWrapper(theme.loading.fullpage)
            include ./loading.pug

修改 themes/solitude/source/css/_global/index.styl 文件最后添加：


if hexo-config('background.enable')
  #global_bg
    position fixed
    z-index 999
    opacity hexo-config('background.opacity')
    width 100%
    height 100%
    background-image url(hexo-config('background.light'))
    background-size cover
    background-position center
    pointer-events none
    background-repeat no-repeat

    [data-theme=dark] &
      background-image url(hexo-config('background.dark'))

在主题文件 _config_solitude.yml 任意处添加：

# --------------------------- start ---------------------------
# Background
# 背景图片
background:
  enable: true #是否开启
  opacity: .3 #透明度
  dark: /images/bg_d.webp #深色模式，可填入url
  light: /images/bg_l.webp #浅色模式，可填入url
# --------------------------- end ---------------------------

添加了什么

添加内容

1. Do you like me

右边侧边栏有显示你可以点来看看，手机不展示。

原帖	作者
为你的网站添加 Do you like me 小组件	I Am I

2. 恋爱墙

主页可以看，点效果即可跳转。

原帖	作者
侧边栏	yuang01

3. 弹幕留言板

类似于🍭Akilarの糖果屋信笺样式留言板，点效果即可跳转。

原帖	作者
信笺样式留言板	🍭Akilarの糖果屋

4. 添加建站时间置页脚

左边控件点评论即可到页脚。

新建 source/custom/js/jz.min.js 文件填入内容（可改）：

document.addEventListener("DOMContentLoaded",(function(){const startTime=new Date("2024-05-12T00:00:00Z");function padZero(num){return num<10?"0"+num:String(num)}function calculateElapsedTime(start){const elapsedMilliseconds=new Date-start,totalSeconds=Math.floor(elapsedMilliseconds/1e3);return{days:Math.floor(totalSeconds/86400),hours:Math.floor(totalSeconds%86400/3600),minutes:padZero(Math.floor(totalSeconds%3600/60)),seconds:padZero(totalSeconds%60)}}function updateDisplay(){const{days:days,hours:hours,minutes:minutes,seconds:seconds}=calculateElapsedTime(startTime),runtimeElement=document.getElementById("runtime");runtimeElement&&(runtimeElement.textContent=`花期：${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`),requestAnimationFrame(updateDisplay)}updateDisplay()}));

修改主题配置文件（url可改）：

# 页脚信息文字
# 请不要删除主题信息，这是对作者的尊重
links:
  - name: <span id="runtime"></span>
    url: /history/

5. 文章内插入地图

点击效果，即可跳转，如无显示请后退重新点一次。

安装插件
1
npm install hexo-tag-map --save

在想用的地方使用这外挂标签即可

插入一个混合地图的示例： {% map %}
{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %}
{% map 120.101101,30.239119, 这里是西湖灵隐寺，据说求姻缘很灵验哦！, 15, 100%, 360px, 1 %}
其它地图用法请参考原帖

原帖	作者
使用Hexo-tag-map插件，给文章插入高德百度谷歌等5类9种地图	八章
关于给你的 Hexo 文章插入交互式地图吧！	kuole-o

6. 足迹图

点击效果，即可跳转。

下载zip并解压到 source/footmap/ 目录下
经过我的修改可以适配本主题，你想改可以自定义。

修改根目录 _config.yml 文件：

# ...
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
  - source/footmap/*  #添加这一句
#...

打开 source/footmap/data/config.json 设置数据：

[
    {
        "latLng": [22.354887,110.946866],   //为足迹的经纬度，可以通过 https://jingweidu.bmcx.com查询得到
        "name": "广东 · 茂名 · 信宜",   //足迹地点的名称
        "articleUrl": "/posts/63e1fc9e.html",   //文章地址
        "desc": "老家", //足迹地点的描述， \n 为换行符
        "photos":[
            "https://photo.tuchong.com/20342439/f/1276790136.jpg",
            "https://photo.tuchong.com/20342439/f/712590584.jpg",
            "https://photo.tuchong.com/20342439/f/888292716.jpg",
            "https://photo.tuchong.com/20342439/f/1184318812.jpg"
        ],  //足迹地点的照片链接，为一组图片 url 数据
        "freq": 2   //足迹地点的到访次数，范围为 [1, 10]
    } // 写下一个的时候记得加逗号，最后一个不要加。
]

⚠️ 引用站外地址，不保证站点的可用性和安全性，慎重点

蓝奏云

密码：dtm5

原帖	作者
给自己做一个旅行地图吧（2.0升级版）	扶苏

7. 订阅页面

点击效果，即可跳转。

新建 source/rss/index.md 文件，在文件内输入内容（按需修改）：

---
title: 订阅本站
date: 2024-11-16 23:10:28
update: 2024-11-17 02:21:48
desc: 推送全部文章推送简介
container: true
---
<center><h1>订阅本站</h1></center>
<p style="text-align: right;">最新更新时间为：2024-11-27</p>
<br>
<div class="rss-plan-list"><a class="rss-plan-item rss-plan-wechat" href="./wechatOA/" title="公众号" target="_blank">
        <div class="rss-plan-description">推送精选文章<br>推送全文</div>
        <div class="rss-plan-info-group">
            <div class="rss-plan-title">公众号订阅</div>
            <div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon no-lightbox entered loaded"
                src="https://images.418121.xyz/file/blog/page/wechat.webp" data-lazy-src="https://images.418121.xyz/file/blog/page/wechat.webp"
                data-ll-status="loaded">
        </div>
    </a><a class="rss-plan-item rss-plan-mail" title="邮箱订阅" href="https://github.com/yeminxi/Friend-Circle-Lite/issues/new?assignees=&labels=&projects=&template=%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85.md&title=%5B%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85%5D" target="_blank">
        <div class="rss-plan-description">推送全部文章<br>更新推送简介</div>
        <div class="rss-plan-info-group">
            <div class="rss-plan-title">邮件订阅</div>
            <div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon no-lightbox entered loaded"
                src="https://images.418121.xyz/file/blog/page/mail.webp" data-lazy-src="https://images.418121.xyz/file/blog/page/mail.webp"
                data-ll-status="loaded">
        </div>
    </a><a class="rss-plan-item rss-plan-rss" href="/rss2.xml" title="rss" target="_blank">
        <div class="rss-plan-description">推送全部文章<br>推送简介</div>
        <div class="rss-plan-info-group">
            <div class="rss-plan-title">RSS</div>
            <div class="rss-plan-info">备用订阅方式</div><img class="rss-plan-icon no-lightbox entered loaded"
                src="https://images.418121.xyz/file/blog/page/rss.webp" data-lazy-src="https://images.418121.xyz/file/blog/page/rss.webp"
                data-ll-status="loaded">
        </div>
    </a></div>

# 订阅本站
首先感谢你对本站的文章产生一些兴趣，本站的主要内容风格为日常及教程分享、电脑骚操作，如果你对这方面内容感兴趣，欢迎关注。
## 全部文章订阅方式
### 1. 公众号订阅
公众号订阅可以收到我觉得有价值，很重要，比较精彩的文章。这些文章将通过微信公众号发送。并不是所有博客文章都会发到公众号中。建议所有用户订阅。
### 2. RSS订阅（文章摘要）
你可以使用第三方RSS客户端接收到博客的文章摘要通知。
[https://blog.418121.xyz/atom.xml](https://blog.418121.xyz/atom.xml)
[https://blog.418121.xyz/rss2.xml](https://blog.418121.xyz/rss2.xml)
{% link ATOM,订阅链接,https://blog.418121.xyz/atom.xml %}
{% link RSS,订阅链接,https://blog.418121.xyz/rss2.xml %}
### 3. Follow订阅
你可以使用[Follow客户端](https://follow.is/)接收到博客的文章通知。
{% link Follow,订阅链接,https://app.follow.is/share/users/yeminxi %}
### 4. 邮箱订阅
* 如果你更喜欢通过邮箱接收更新，本站提供了邮箱订阅功能。此功能通过[Friend Circle Lite](https://github.com/willow-god/Friend-Circle-Lite)支持。只需简单的填写你的邮箱提交到GitHub Issue，即可开始接收本站的更新邮件，可以通过删除issue进行取消订阅！
    1. 访问 [GitHub Issue](https://github.com/yeminxi/Friend-Circle-Lite/issues/new?assignees=&labels=&projects=&template=%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85.md&title=%5B%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85%5D) 页面。
    2. 填写你的邮箱信息。
    3. 提交 Issue，即可完成订阅！
* 期待与你的互动！如果你有任何问题或建议，欢迎随时联系我。
## 邮箱订阅功能提供鸣谢：
{% link 清羽飞扬,柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜,https://blog.liushen.fun/ %}
## 本站是如何维持的
做公众号是为了保护文章版权，因为发布在个人博客站点对于版权保护能力比较弱，所以发在公众号并且标记为原创可以对文章版权有很好的保护。

新建 source/rss/wechatOA/index.md 文件，在文件内输入内容（按需修改）：

---
layout: false
---
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>关注「叶泯希」微信公众号</title>
        <link rel="icon" type="image/x-icon" href="/favicon.ico">
        <meta name="apple-mobile-web-app-title" content="叶泯希">
        <link rel="bookmark" href="/favicon.ico">
        <meta name="description" content="关注叶泯希信公众号，获取更多最新内容。">
        <meta name="theme-color" content="#f6f7f8">
        <style>
            body {
                background: #f6f7f8;
                margin: 0;
                padding: 0
            }
            .wechatOA {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                height: var(--vh)
            }
            .wechat-card {
                background: #fff;
                max-width: 428px;
                max-height: 569px;
                border-radius: 16px;
                padding: 24px 36px 20px 36px;
                display: flex;
                flex-direction: column;
                margin: auto;
                align-items: center
            }
            .qrcode {
                width: 256px;
                height: 256px;
                display: flex
            }
            .tips {
                font-size: 14px;
                color: #000;
                opacity: .5;
                margin-top: 8px
            }
            .wechatOA-card {
                width: 100%;
                display: flex;
                margin-top: 16px;
                background: #f7f7f7;
                padding: 18px;
                border-radius: 16px;
                align-items: center
            }
            .wechatOA-head {
                width: 48px;
                height: 48px;
                background-image: url(/images/avatar.webp);
                border-radius: 68px;
                background-size: contain;
                margin-right: 16px
            }
            .wechatOA-name {
                font-weight: 700;
                color: #000;
            }
            .wechatOA-description {
                font-size: 12px;
                color: #000;
                opacity: .5
            }
            a.help {
                font-size: 14px;
                color: #000;
                opacity: .5;
                text-decoration: none;
                margin: 20px 0
            }
            a.help:visited {
                color: #000
            }
        </style>
    </head>
    <body>
        <div class="wechatOA">
            <div class="wechat-card">
                <img src="gzh.webp" class="qrcode" alt="">
                <div class="tips">扫描二维码关注公众号</div>
                <div class="wechatOA-card">
                    <div class="wechatOA-head"></div>
                    <div class="wechatOA-info">
                        <div class="wechatOA-name">叶泯希</div>
                        <div class="wechatOA-description">意义是自己赐予的</div>
                    </div>
                </div>
            </div>
            <a class="help" href="https://kf.qq.com/touch/wxappfaq/1208117b2mai141113jaqAnU.html?platform=14" title="帮助" target="_blank">不会扫码？</a>
        </div>
        <script>
            const vh = 1 * window.innerHeight;
            document.documentElement.style.setProperty("--vh", `${vh}px`),
            window.addEventListener("resize", (()=>{
                let e = 1 * window.innerHeight;
                document.documentElement.style.setProperty("--vh", `${e}px`)
            }
            ))
        </script>
    </body>
</html>

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 卡片订阅样式 */
#post .tag_share + #follow {
  margin-top: 40px;
}
.rss-plan-list {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -4px;
  position: relative;
  justify-content: space-between;
}
.rss-plan-list a {
  border-bottom: none;
  border-radius: 12px;
}
.rss-plan-item:visited {
  color: var(--efu-white);
}
.rss-plan-item.rss-plan-wechat {
  background: #27c125;
}
.rss-plan-item.rss-plan-mail {
  background: var(--efu-blue);
}
.rss-plan-item.rss-plan-rss {
  background: var(--efu-orange);
}
.rss-plan-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 240px;
  height: 240px;
  margin: 6px 0;
  overflow: hidden;
  text-decoration: none;
  width: calc(100% / 3 - 8px);
  filter: brightness(1);
  transition: .3s;
  border: var(--style-border);
  box-shadow: var(--efu-shadow-border);
}
.rss-plan-item:hover {
  filter: brightness(1.1)
}
@media screen and (max-width: 1024px) {
  .rss-plan-item {
      width:calc(100% / 2 - 4px)
  }
  .rss-plan-item:first-child {
      width: 100%
  }
}
@media screen and (max-width: 768px) {
  .rss-plan-item {
      width:100%
  }
}

/* 卡片大小 */
.rss-plan-description {
  font-size: 16px;
  color: var(--efu-white);
  margin: 26px 0 0 30px;
  line-height: 20px;
}
.rss-plan-info-group {
  position: relative;
  margin: 0 0 26px 30px;
  color: var(--efu-white);
}
.rss-plan-title {
  font-size: 36px;
  font-weight: 700;
  width: fit-content;
  line-height: 1;
}
.rss-plan-info {
  width: fit-content;
  opacity: .6;
}
img.rss-plan-icon {
  position: absolute;
  bottom: -50px;
  right: -20px;
  height: 140px;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -moz-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -o-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -ms-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  transform-origin: bottom right;
  filter: blur(8px);
  opacity: .6;
}
.rss-plan-item:hover img.rss-plan-icon {
  bottom: -40px;
  right: -10px;
  filter: blur(0);
  opacity: 1
}
.rss-plan-item:hover {
  text-decoration: none !important;
}

参考	原帖
如果你喜欢本站内容，欢迎订阅！	Liushen
订阅本站与运营模式	张洪Heo

8. 重构404页

点击效果，即可跳转。

新建 source/404.md 文件，在文件内输入以下内容：

---
layout: false
---
<!-- <script src="//cdn.dnpw.org/404/v1.min.js" maincolor="#000" jumptime="-1" jumptarget="/" tips="404" error="" charset="utf-8"></script> -->
<script src="//cdn.zhaolinlang.com/cdn.dnpw.org/404/v1.min.js" maincolor="#000" jumptime="-1" jumptarget="/" tips="404" error="" charset="utf-8"></script>

修改主题配置文件

# Page default settings
# 页面默认设置
page:
  # 404 page
  # 404 页面
  error: false

原帖	作者
小代码，大公益	域名公益

9. 自定义link标签

🛡️ 来自本站地址，本站可确保其安全性，请放心点击跳转

叶泯希

主页

新建 themes/solitude/scripts/tags/link.js 文件，在文件内输入内容：

'use strict';

const { parse } = require('psl');
// 定义不同域名对应的头像URL
const avatarMap = new Map([
  ['418121.xyz', '/images/avatar.webp'],
  ['github.com', 'https://images.418121.xyz/file/blog/page/git.webp']
]);

// 定义白名单域名
const whitelist = new Set([
  '418121.xyz',
  'yeminxi.github.io'
]);
// 获取URL的根域名
function getRootDomain(url) {
  try {
    const hostname = new URL(url).hostname;
    const parsed = parse(hostname);
    return parsed.domain || hostname;
  } catch {
    return url.split('/')[0]; // Fallback
  }
}

function link(args) {
  try {
    // 参数解析（支持转义逗号）
    const parsedArgs = args.join(' ')
      .split(/(?<!\\),/)
      .map(s => s.replace(/\\,/g, ',').trim());

    const [title = '', sitename = '', rawLink = ''] = parsedArgs;
    const link = rawLink.startsWith('http') ? rawLink : `https://${rawLink}`;

    // 域名处理
    const rootDomain = getRootDomain(link);
    const imgUrl = avatarMap.get(rootDomain) || 
                  `https://api.xinac.net/icon/?url=${encodeURIComponent(rootDomain)}`; //使用api获取网站的ico

    // 白名单校验
    const isSafe = whitelist.has(rootDomain) || rootDomain.endsWith('.418121.xyz');
    const tipMessage = isSafe 
      ? '🛡️ 来自本站地址，本站可确保其安全性，请放心点击跳转'
      : '⚠️ 引用站外地址，不保证站点的可用性和安全性，慎重点';

    return `
<div class="liushen-tag-link">
  <a class="tag-Link" target="_blank" rel="noopener" href="${link}">
    <div class="tag-link-tips">${tipMessage}</div>
    <div class="tag-link-bottom">
      <div class="tag-link-left" 
          style="background-image: url(${imgUrl})"
          onerror="this.style.backgroundImage='url(/images/default-avatar.webp)'"></div>
      <div class="tag-link-right">
        <div class="tag-link-title">${hexo.extend.helper.get('escape_html')(title)}</div>
        <div class="tag-link-sitename">${hexo.extend.helper.get('escape_html')(sitename)}</div>
      </div>
      <i class="fa-solid fa-angle-right"></i>
    </div>
  </a>
</div>`;
  } catch (error) {
    console.error('Link tag error:', error);
    return `<div class="liushen-error">链接卡片生成失败：${error.message}</div>`;
  }
}

hexo.extend.tag.register('link', link, { ends: false });

新建 themes/solitude/source/css/_tags/link.styl 文件，在文件内输入内容：

#content-inner
  .tag-Link
    background var(--efu-secondbg)
    border-radius 12px !important
    display flex
    border 1px solid var(--style-border)
    flex-direction column
    padding 0.5rem 1rem
    margin-top 1rem
    text-decoration none !important
    color var(--efu-fontcolor)
    margin-bottom 10px
    transition background-color 0.3s, border-color 0.3s, box-shadow 0.3s

    &:hover
      border-color var(--style-border-hover)
      background-color var(--efu-main)
      box-shadow 0 0 5px rgba(0, 0, 0, 0.2)

    .tag-link-tips
      color var(--efu-fontcolor)
      border-bottom 1px solid var(--efu-gray)
      padding-bottom 4px
      font-size 0.6rem
      font-weight normal

    .tag-link-bottom
      display flex
      margin-top 0.5rem
      align-items center
      justify-content space-around

      .tag-link-left
        width 60px
        min-width 60px
        height 60px
        background-size cover
        border-radius 25%
        background-color var(--efu-card-bg)

      .tag-link-right
        margin-left 1rem

        .tag-link-title
          font-size 1rem
          line-height 1.2

        .tag-link-sitename
          font-size 0.7rem
          color var(--efu-fontcolor)
          font-weight normal
          margin-top 4px
          transition color 0.3s

        &:hover .tag-link-sitename
          color var(--efu-main)

      i
        margin-left auto
        color: var(--efu-fontcolor)

用法
1
{% link 标题,描述,链接 %}

原帖	作者
魔改笔记七：分类条及外链卡片	LiuShen

10. 安全跳转页面

⚠️ 引用站外地址，不保证站点的可用性和安全性，慎重点

百度

效果展示

安装

1 2	npm install cheerio --save npm install hexo-safego --save

在 Hexo 根目录 _config.yml 文件中添加以下内容：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  general:                        # 基本功能设置
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面
  security:                     # 安全设置
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'
  scope:                        # 容器与页面设置
    apply_containers:           # 应用的容器选择器
      - '#post'
    apply_pages:                # 应用的页面路径
      - "/posts/"
    exclude_pages:              # 排除的页面路径
  whitelist:                    # 域名白名单
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - "yeminixi.github.io"
      - "418121.xyz"
  appearance:                   # 页面外观设置
    avatar: ./images/avatar.webp    # 跳转页面头像路径
    title: "叶泯希"            # 跳转页面标题
    subtitle: "安全中心提示你不要乱点，它与本站不存在法律裙带关系ヽ（≧□≦）ノ"         # 跳转页面副标题
    darkmode: false             # 是否启用深色模式
    countdowntime: -1           # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转
  debug:                        # 调试设置
    enable: false               # 启用调试模式

原帖	作者
安全跳转页面·插件版	LiuShen

11. Waline评论链接安全跳转

点击效果，即可跳转，下面有链接点点看。

在你 Github 中 Fork 的 Waline 仓库下修改 index.cjs 文件内容如下：

const Application = require('@waline/vercel');
const LinkInterceptor = require('waline-link-interceptor'); // 添加这一行

module.exports = Application({
  forbiddenWords: ['唱跳', 'rap篮球'], //词汇限制
  disallowIPList: ['8.8.8.8', '4.4.4.4'],//黑名单IP
  plugins: [
    LinkInterceptor({
      whiteList: [
        'yeminxi.github.io',
        '418121.xyz'
      ],
      // blackList: [],
      // interceptorTemplate: `hello __URL__ `,   // 如果下面自定义了跳转地址，那么此处模板不生效
      redirectUrl: "https://blog.418121.xyz/go.html", // 填写中间页的具体 html 地址。
      encodeFunc: (url) =>{
        return "u="+Buffer.from(url).toString('base64');                               // 填入一个外链 url 的处理函数
      }
    })
  ],
  async postSave(comment) {
    // do what ever you want after comment saved
  },
});

修改 package.json 文件：

{
  "name": "template",
  "version": "1.32.3",
  "private": true,
  "dependencies": {
    "@waline/vercel": "latest",
    "waline-link-interceptor": "^0.1.2" //添加这一句
  }
}

原帖	作者
Hexo 博客与 Waline 评论区实现外链跳转中间页	wuanqin

12. 添加统计页面

点击效果，即可跳转。

新建 **themes/solitude/sscripts/helper/charts.js 文件：

const cheerio = require('cheerio')
const moment = require('moment')

hexo.extend.filter.register('after_render:html', function (locals) {
  const $ = cheerio.load(locals)
  const post = $('#posts-chart')
  const tag = $('#tags-chart')
  const category = $('#categories-chart')
  const htmlEncode = false

  if (post.length > 0 || tag.length > 0 || category.length > 0) {
    if (post.length > 0 && $('#postsChart').length === 0) {
      if (post.attr('data-encode') === 'true') htmlEncode = true
      post.after(postsChart(post.attr('data-start')))
    }
    if (tag.length > 0 && $('#tagsChart').length === 0) {
      if (tag.attr('data-encode') === 'true') htmlEncode = true
      tag.after(tagsChart(tag.attr('data-length')))
    }
    if (category.length > 0 && $('#categoriesChart').length === 0) {
      if (category.attr('data-encode') === 'true') htmlEncode = true
      category.after(categoriesChart(category.attr('data-parent')))
    }

    if (htmlEncode) {
      return $.root().html().replace(/&amp;#/g, '&#')
    } else {
      return $.root().html()
    }
  } else {
    return locals
  }
}, 15)

function postsChart (startMonth) {
  const startDate = moment(startMonth || '2020-01')
  const endDate = moment()

  const monthMap = new Map()
  const dayTime = 3600 * 24 * 1000
  for (let time = startDate; time <= endDate; time += dayTime) {
    const month = moment(time).format('YYYY-MM')
    if (!monthMap.has(month)) {
      monthMap.set(month, 0)
    }
  }
  hexo.locals.get('posts').forEach(function (post) {
    const month = post.date.format('YYYY-MM')
    if (monthMap.has(month)) {
      monthMap.set(month, monthMap.get(month) + 1)
    }
  })
  const monthArr = JSON.stringify([...monthMap.keys()])
  const monthValueArr = JSON.stringify([...monthMap.values()])

  return `
  <script id="postsChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var postsChart = echarts.init(document.getElementById('posts-chart'), 'light');
    var postsOption = {
      title: {
        text: '文章发布统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        name: '日期',
        type: 'category',
        boundaryGap: false,
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${monthArr}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        nameTextStyle: {
          color: color
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'line',
        smooth: true,
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        areaStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          }, {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        data: ${monthValueArr},
        markLine: {
          data: [{
            name: '平均值',
            type: 'average',
            label: {
              color: color
            }
          }]
        }
      }]
    };
    postsChart.setOption(postsOption);
    window.addEventListener('resize', () => { 
      postsChart.resize();
    });
    postsChart.on('click', 'series', (event) => {
      if (event.componentType === 'series') window.location.href = '/archives/' + event.name.replace('-', '/');
    });
  </script>`
}

function tagsChart (len) {
  const tagArr = []
  hexo.locals.get('tags').map(function (tag) {
    tagArr.push({ name: tag.name, value: tag.length, path: tag.path })
  })
  tagArr.sort((a, b) => { return b.value - a.value })

  const dataLength = Math.min(tagArr.length, len) || tagArr.length
  const tagNameArr = []
  for (let i = 0; i < dataLength; i++) {
    tagNameArr.push(tagArr[i].name)
  }
  const tagNameArrJson = JSON.stringify(tagNameArr)
  const tagArrJson = JSON.stringify(tagArr)

  return `
  <script id="tagsChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var tagsChart = echarts.init(document.getElementById('tags-chart'), 'light');
    var tagsOption = {
      title: {
        text: 'Top ${dataLength} 标签统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {},
      xAxis: {
        name: '标签',
        type: 'category',
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color,
          interval: 0
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${tagNameArrJson}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        splitLine: {
          show: false
        },
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'bar',
        data: ${tagArrJson},
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(128, 255, 195)'
            },
            {
              offset: 1,
              color: 'rgba(1, 211, 255)'
            }])
          }
        },
        markLine: {
          data: [{
            name: '平均值',
            type: 'average',
            label: {
              color: color
            }
          }]
        }
      }]
    };
    tagsChart.setOption(tagsOption);
    window.addEventListener('resize', () => { 
      tagsChart.resize();
    });
    tagsChart.on('click', 'series', (event) => {
      if(event.data.path) window.location.href = '/' + event.data.path;
    });
  </script>`
}

function categoriesChart (dataParent) {
  const categoryArr = []
  let categoryParentFlag = false
  hexo.locals.get('categories').map(function (category) {
    if (category.parent) categoryParentFlag = true
    categoryArr.push({
      name: category.name,
      value: category.length,
      path: category.path,
      id: category._id,
      parentId: category.parent || '0'
    })
  })
  categoryParentFlag = categoryParentFlag && dataParent === 'true'
  categoryArr.sort((a, b) => { return b.value - a.value })
  function translateListToTree (data, parent) {
    let tree = []
    let temp
    data.forEach((item, index) => {
      if (data[index].parentId == parent) {
        let obj = data[index];
        temp = translateListToTree(data, data[index].id);
        if (temp.length > 0) {
          obj.children = temp
        }
        if (tree.indexOf())
          tree.push(obj)
      }
    })
    return tree
  }
  const categoryNameJson = JSON.stringify(categoryArr.map(function (category) { return category.name }))
  const categoryArrJson = JSON.stringify(categoryArr)
  const categoryArrParentJson = JSON.stringify(translateListToTree(categoryArr, '0'))

  return `
  <script id="categoriesChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light');
    var categoryParentFlag = ${categoryParentFlag}
    var categoriesOption = {
      title: {
        text: '文章分类统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      legend: {
        top: 'bottom',
        data: ${categoryNameJson},
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'item'
      },
      series: []
    };
    categoriesOption.series.push(
      categoryParentFlag ? 
      {
        nodeClick :false,
        name: '文章篇数',
        type: 'sunburst',
        radius: ['15%', '90%'],
        center: ['50%', '55%'],
        sort: 'desc',
        data: ${categoryArrParentJson},
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2,
          emphasis: {
            focus: 'ancestor',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }
      :
      {
        name: '文章篇数',
        type: 'pie',
        radius: [30, 80],
        roseType: 'area',
        label: {
          color: color,
          formatter: '{b} : {c} ({d}%)'
        },
        data: ${categoryArrJson},
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }
    )
    categoriesChart.setOption(categoriesOption);
    window.addEventListener('resize', () => { 
      categoriesChart.resize();
    });
    categoriesChart.on('click', 'series', (event) => {
      if(event.data.path) window.location.href = '/' + event.data.path;
    });
  </script>`
}

修改主题配置文件

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <script src="https://npm.elemecdn.com/echarts@4.9.0/dist/echarts.min.js"></script>

用法，在任意位置插入（记得开启 container: true ）：

<!-- 文章发布时间统计图 -->
<div id="posts-chart" data-start="2021-01" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
<!-- 文章标签统计图 -->
<div id="tags-chart" data-length="10" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
<!-- 文章分类统计图 -->
<div id="categories-chart" data-parent="true" style="border-radius: 8px; height: 300px; padding: 10px;"></div>

原帖	作者
关于本站｜Solitude主题魔改内容	❖星港◎Star☆

13. 页面预加载

打开浏览器开发者模式切换到网络，然后找个本站页面把鼠标放上去，会进行预加载。

修改主题配置文件

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <script src="//instant.page/5.2.0" type="module"></script>

原帖	作者
使您网站的页面即时在 1 分钟内并显着提高您的转化率	Alexandre Dieulot

14. Vercel 加速

你觉得访问本站快吗，所见即所得。

在 source/ 目录下新建一个 vercel.json 文件，在文件内输入以下内容：

{
    "headers": [
      {
        "source": "/sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "(.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, s-maxage=86400, max-age=86400"
          }, {
            "key": "Vercel-CDN-Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }

原帖	作者
Vercel 加速，快，不止更快	Mystic Stars

15. 友链状态检测

点击效果，即可跳转。

这里只讲前端配置，完整教程请看参考。

动态获取json，适配 solitude主题 的方法，根目录下新建 link.js 文件输入以下内容：

const fs = require('node:fs');
const https = require('node:https');

const dataUrl = 'https://cdn.418121.xyz/links/active.json'; // 替换成你的数据来源的URL
const outputFilePath = './source/friend.json'; // 替换成你想要保存json文件的路径
const forbiddenNames = [
  'Hexo',
  '开往-友链接力',
  '笔墨迹BLOGS·CN',
  '博客录boke.lu',
  '博友圈',
  '集博栈',
  '博客圈',
  '叶泯希-',
  '叶泯希~',
  '博客驿站',
  '十年之约',
  '个站商店',
  'BlogFinder'
]; // 想要禁止的name，可以修改

function generateFriendJson(dataUrl, outputFilePath, forbiddenNames) {
  https.get(dataUrl, (response) => {
    let data = '';

    // 检查响应状态
    if (response.statusCode !== 200) {
      console.error(`请求失败，状态码: ${response.statusCode}`);
      return;
    }

    // 监听数据块
    response.on('data', (chunk) => {
      data += chunk;
    });

    // 完成请求
    response.on('end', () => {
      try {
        const jsonData = JSON.parse(data);
        
        const friends = [];
        console.log("获取的数据:", jsonData); // 输出获取的数据以确认结构
        
        jsonData.content.forEach(item => {
          // 打印每个 item 的名字，看是否在 forbiddenNames 中
          console.log(`正在处理: ${item.title}`);
          if (!forbiddenNames.includes(item.title)) {
            friends.push({
              name: item.title,
              link: item.link,
              avatar: item.avatar
            });
          } else {
            console.log(`禁用项: ${item.title}`); // 如果是禁用项，打印提示
          }
        });

        // 根据规定的格式构建 JSON 数据
        const friendData = { friends: friends.map(item => [item.name, item.link, item.avatar]) };

        // 将 JSON 对象转换为字符串
        const friendJSON = JSON.stringify(friendData, null, 2);

        // 写入 friend.json 文件
        fs.writeFileSync(outputFilePath, friendJSON);
        console.log(`创建文件成功 friend.json at ${outputFilePath}`);
        
      } catch (error) {
        console.error('解析数据失败:', error);
      }
    });
  }).on('error', (error) => {
    console.error('请求错误:', error);
  });
}

// 调用函数生成 JSON 文件
generateFriendJson(dataUrl, outputFilePath, forbiddenNames);

使用命令生成 friend.json
1
node link.js

我使用 Github Action 构建站点，在前面加上：

- name: 安装依赖
  if: steps.cache.outputs.cache-hit != 'true'
  run: |
    npm install gulp-cli -g #全局安装gulp
    npm install --save
    npm install yamljs --save   //加入这一句

- name: 更新友链朋友圈
  run: |
    node link.js    //加入这一句
    node links.js
    node autolinks.js

在友链的页面 /links/index.md 添加以下内容：

---
title: 友情链接
date: 2024-11-17 06:08:33
type: links
desc: 与数百名博主共同进步
data: links
banner: true
comment: false
---
<style>
    .status-tag {
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 3px 8px;
        border-radius: 12px 0px 12px 0px;
        font-size: 12px;
        color: white;
        font-weight: bold;
        transition: font-size 0.3s ease-out, width 0.3s ease-out, opacity 0.3s ease-out;
    }
    .flink-list-item:hover .status-tag {
        font-size: 0px;
        opacity: 0;
    }
    /* 固态颜色 */
    .status-tag-green {
        background-color: #005E00; /* 绿色 */
    }
    .status-tag-light-yellow {
        background-color: #FED101; /* 浅黄色 */
    }
    .status-tag-dark-yellow {
        background-color: #F0B606; /* 深黄色 */
    }
    .status-tag-red {
        background-color: #B90000; /* 红色 */
    }
</style>
<script>
function addStatusTagsWithCache(jsonUrl) {
    const cacheKey = "statusTagsData";
    const cacheExpirationTime = 30 * 60 * 1000; // 半小时
    function applyStatusTags(data) {
        const linkStatus = data.link_status;
        document.querySelectorAll('.cf-friends-link').forEach(card => { // 一定要注意这里的类名，小心匹配不上
            if (!card.href) return;
            const link = card.href.replace(/\/$/, '');
            const statusTag = document.createElement('div');
            statusTag.classList.add('status-tag');
            let matched = false;
            // 查找链接状态
            const status = linkStatus.find(item => item.link.replace(/\/$/, '') === link);
            if (status) {
                let latencyText = '未知';
                let className = 'status-tag-red'; // 默认红色
                if (status.latency === -1) {
                    latencyText = '未知';
                } else {
                    latencyText = status.latency.toFixed(2) + ' s';
                    if (status.latency <= 2) {
                        className = 'status-tag-green';
                    } else if (status.latency <= 5) {
                        className = 'status-tag-light-yellow';
                    } else if (status.latency <= 10) {
                        className = 'status-tag-dark-yellow';
                    }
                }
                statusTag.textContent = latencyText;
                statusTag.classList.add(className);
                matched = true;
            }
            if (matched) {
                card.style.position = 'relative';
                card.appendChild(statusTag);
            }
        });
    }
    function fetchDataAndUpdateUI() {
        fetch(jsonUrl)
            .then(response => response.json())
            .then(data => {
                applyStatusTags(data);
                const cacheData = {
                    data: data,
                    timestamp: Date.now()
                };
                localStorage.setItem(cacheKey, JSON.stringify(cacheData));
            })
            .catch(error => console.error('Error fetching test-flink result.json:', error));
    }
    const cachedData = localStorage.getItem(cacheKey);
    if (cachedData) {
        const { data, timestamp } = JSON.parse(cachedData);
        if (Date.now() - timestamp < cacheExpirationTime) {
            applyStatusTags(data);
            return;
        }
    }
    fetchDataAndUpdateUI();
}
setTimeout(() => {
    addStatusTagsWithCache('https://check.api.418121.xyz/result.json');
}, 0);
</script>

原帖	作者
Github Action实现友链状态检测	LiuShen

16. 朋友圈

点击效果，即可跳转，往下拖到最后。

这里只讲前端配置，完整教程请看参考。

动态获取json，适配 solitude主题 的方法，根目录下新建 links.js 文件输入以下内容：

const fs = require('fs');
const https = require('https');

const dataUrl = 'https://cdn.418121.xyz/links/active.json'; // 替换成你的数据来源的URL
const outputFilePath = './source/flink_count.json'; // 替换成你想要保存json文件的路径

function generateLinkCountJson(dataUrl, outputFilePath) {
  https.get(dataUrl, (response) => {
    let data = '';

    // 检查响应状态
    if (response.statusCode !== 200) {
      console.error(`请求失败，状态码: ${response.statusCode}`);
      return;
    }

    // 监听数据块
    response.on('data', (chunk) => {
      data += chunk;
    });

    // 完成请求
    response.on('end', () => {
      try {
        const jsonData = JSON.parse(data);
        
        if (!Array.isArray(jsonData.content)) {
          console.error("错误: JSON 文件中没有有效的 content 数组");
          return;
        }

        const ls = [];
        console.log(`链接列表条目数: ${jsonData.content.length}`);

        for (const item of jsonData.content) {
          console.log(`正在处理链接: ${item.title}`);
          ls.push({
            name: item.title,
            link: item.link,
            avatar: item.avatar || '',
            descr: item.descr || '无描述',
            topimg: item.topimg || null
          });
        }

        // 计数
        const length = ls.length;
        console.log(`总链接数: ${length}`);

        // 将结果写入到 JSON 文件中
        fs.writeFileSync(outputFilePath, JSON.stringify({ link_list: ls, length: length }, null, 2));
        console.log(`创建文件成功 flink_count.json at ${outputFilePath}`);
        
      } catch (error) {
        console.error('解析数据失败:', error);
      }
    });
  }).on('error', (error) => {
    console.error('请求错误:', error);
  });
}

// 调用函数生成 JSON 文件
generateLinkCountJson(dataUrl, outputFilePath);

使用命令生成 flink_count.json
1
node links.js

我使用 Github Action 构建站点，在前面加上：

- name: 安装依赖
  if: steps.cache.outputs.cache-hit != 'true'
  run: |
    npm install gulp-cli -g #全局安装gulp
    npm install --save
    npm install yamljs --save   //加入这一句

- name: 更新友链朋友圈
  run: |
    node link.js    
    node links.js   //加入这一句
    node autolinks.js

在友链的页面 /pyq/index.md 添加以下内容：

---
title: 朋友圈
date: 2024-11-17 06:08:33
type: banner
container: true
---
<div id="friend-circle-lite-root"></div>
<script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
            // 填写你的fc Lite地址
            private_api_url: 'https://fc.api.418121.xyz/',
            // 点击加载更多时，一次最多加载几篇文章，默认20
            page_turning_number: 20,
            // 头像加载失败时，默认头像地址
            error_img: 'https://api.vvhan.com/api/avatar/niche',
        }
    }
</script>
<link rel="stylesheet" href="https://fc.api.418121.xyz/main/fclite.css">
<script src="https://fc.api.418121.xyz/main/fclite.js">//https://cdn.jsdelivr.net/gh/yeminxi/Friend-Circle-Lite/main/fclite.js
</script>

原帖	作者
Friend-Circle-Lite:轻量友链朋友圈	LiuShen

17. 动态友链结合友链状态检测及朋友圈

https://github.com/ymxblog/friends/

动态获取json生成 links.yml 友链文件，适配 solitude主题 的方法，根目录下新建 autolinks.js 文件输入以下内容：

const fs = require('fs');
const https = require('https');
const yaml = require('js-yaml');

// 定义输入 URL 和输出文件名
const inputUrls = [
    'https://cdn.418121.xyz/links/花架.json',
    'https://cdn.418121.xyz/links/花友.json',
    'https://cdn.418121.xyz/links/花族.json',
    'https://cdn.418121.xyz/links/花主.json',
    'https://cdn.418121.xyz/links/suspend.json',
    'https://cdn.418121.xyz/links/404.json',
];
const outputFileName = './source/_data/links.yml';

// 自定义名称和描述字典，可以根据 URL 或文件名进行变更
const customNames = {
    '花架': '花架',
    '花友': '花友',
    '花族': '花族',
    '花主': '花主',
    'suspend': '花单',
    '404': '花失',
};

const descriptions = {
    '花架': '鸣谢提供框架及主题、技术支持',
    '花友': '造物主自玫瑰诞生起便策划了这场名为救赎的邂逅',
    '花族': '本站已加入的族织',
    '花主': '许是太久没有惊艳了，花也会忘了它是什么样子',
    'suspend': '单向友链，请添加本站链接后在GitHub提交issue留言',
    '404': '失效友链，请在GitHub提交issue修改后留言',
};

// 自定义类型字典
const customTypes = {
    '花架': 'item',
    '花友': 'item',
    '花族': 'item',
    '花主': 'item',
    'suspend': 'discn',
    '404': 'discn',
};

// 用于存储所有分类的数组
const allCategories = [];

// 读取每个 JSON URL 并处理数据
const readJsonUrls = async () => {
    for (let index = 0; index < inputUrls.length; index++) {
        const url = inputUrls[index];
        try {
            const jsonObj = await fetchJson(url);
            
            // 提取 URL 最后一部分作为分类名称（去掉扩展名）
            const className = url.split('/').pop().replace('.json', '');

            // 获取对应的描述、自定义名称和类型，如果不存在则使用默认
            const descr = descriptions[className] || `来自 ${className} 的链接`;
            const customName = customNames[className] || `默认名称 ${className}`;
            const customType = customTypes[className] || 'default'; // 默认类型

            // 将当前文件内容转换为 YAML 格式的数据结构
            let links = jsonObj.content.map(item => ({
                name: item.title,
                link: item.link,
                avatar: item.avatar,
                descr: item.descr,
                topimg: item.topimg || '',
                tag: item.tag || '',
                color: item.color || ''
            }));

            // 如果是第二个 URL，我们进行乱序处理
            if (index === 1) { // 注意这里的 index 从 0 开始，所以2号的位置是1
                links = shuffleArray(links); // 乱序
            }

            links.reverse(); // 逆序处理
            
            // 创建分类对象并推入分类数组
            allCategories.push({
                class_name: customName,
                descr: descr,
                type: customType,
                suffix: '',
                link_list: links
            });
            
        } catch (err) {
            console.error(`读取 URL ${url} 时出错:`, err.message);
        }
    }
};

// 随机打乱数组的函数
const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // 交换元素
    }
    return array;
};
// 使用 https 模块获取 JSON 数据
const fetchJson = (url) => {
    return new Promise((resolve, reject) => {
        https.get(url, (res) => {
            let data = '';

            // 收集数据
            res.on('data', chunk => {
                data += chunk;
            });

            // 请求结束后解析 JSON
            res.on('end', () => {
                try {
                    resolve(JSON.parse(data));
                } catch (e) {
                    reject(new Error('无法解析 JSON'));
                }
            });
        }).on('error', (err) => {
            reject(err);
        });
    });
};

// 生成 YAML 数据并写入文件
const generateYaml = () => {
    const yamlData = {
        banner_suffix: '',
        links: allCategories
    };

    // 将生成的数据转换为 YAML 格式，强制使用双引号来防止折叠格式
    const generatedYaml = yaml.dump(yamlData, {
        noRefs: true,
        lineWidth: -1 // 设置行宽为 -1，避免自动折行
    }); 

    // 写入到 YAML 文件
    fs.writeFileSync(outputFileName, generatedYaml, 'utf8');
    console.log('YAML 文件已成功生成。');
};

// 执行读取和写入流程
const processUrls = async () => {
    await readJsonUrls();
    generateYaml();
};

processUrls();

请参考原教程到5. 配置 config.yml，后接着下来我的步骤，或者直接Fork我的仓库进行修改。

# 网络请求设置
request:
  timeout: 10 # 超时设置
  ssl: false # ssl设置

# 要抓取的 issues 配置
issues:
  repo: ymxblog/friends # 仓库持有者/仓库名
  label:
  groups: ['active','checklist','suspend','404','花架','花友','花族','花主'] #标签有多少个就都写进去
  sort:

修改 /generator/main.py 文件：

1	outputdir = os.path.join(version, 'links') # 第十行。输出文件结构变化时，更新输出路径版本

修改 .github/workflows/generator.yml 文件：

name: Generator

on:
  issues:
  watch:
    types: [started]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v4
    - name: Set up Python
      uses: actions/setup-python@v5
      with:
        python-version: 3.x
    - name: Install requirements #安装requests
      run: |
        pip install -r requirements.txt
    - name: Update links #更新
      run: |
        python generator/main.py
    - name: Commit & Push
      uses: action-x/commit@v2.9
      with:
        github-token: ${{ secrets.PAT }}
        push-branch: 'output'
        force-push: 'true'
        commit-message: 'Generate Json'
        name: ${{ secrets.GITHUBUSERNAME }}
        email: ${{ secrets.GITHUBEMAIL }}
    - name: Checkout CDN repository
      run: |
          git clone https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.PAT }}@github.com/${{ secrets.GITHUBUSERNAME }}/CDN.git
          cd CDN
          
          # 确保没有未加入分支的内容
          git fetch origin

          # 如果需要删除完整的 links 目录，请使用 -r 参数
          git rm -r links/  # 删除整个 links 目录（如有必要）
          # 配置用户信息
          git config --global user.name "${{ secrets.GITHUBUSERNAME }}"
          git config --global user.email "${{ secrets.GITHUBEMAIL }}"
          git commit -m "Delete links directory"
          git push origin main
    - name: 延迟30s执行
      run: |
          echo "Starting delay..."
          sleep 30  # 延迟 30 秒
          echo "Delay completed."
    - name: Push changes to CDN repository
      run: |
          cd ./v2
          
          # 设置默认主分支为 'main'
          git config --global init.defaultBranch main
          
          if [ ! -d ".git" ]; then
            git init
            echo "Initialized new Git repository."
          fi

          # 配置用户信息
          git config --global user.name "${{ secrets.GITHUBUSERNAME }}"
          git config --global user.email "${{ secrets.GITHUBEMAIL }}"
          
          git remote add origin https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.PAT }}@github.com/${{ secrets.GITHUBUSERNAME }}/CDN.git
          
          # 更新本地分支以确保所有更改都已拉取
          git fetch origin
          
          # 合并最新的主分支
          git merge origin/main --allow-unrelated-histories || { echo "Merge conflict detected"; exit 1; }
          
          # 显示当前状态
          git status
          
          # 列出特定目录的内容
          ls -la ./links/
          
          # 添加文件并提交
          git add .
          
          if [ -n "$(git status --porcelain)" ]; then
            git commit -m "友链更新" || echo "No changes to commit"
          else
            echo "No changes to commit."
          fi
          
          # 推送到远程
          git push -u origin main || { echo "Push failed, please resolve the issues."; exit 1; }
    - name: 发送请求至本仓库的另外一工作流
      uses: peter-evans/repository-dispatch@v3
      with:
        token: ${{ secrets.GITHUB_TOKEN }}  # 使用默认的 GITHUB_TOKEN
        repository: ${{ github.repository }}  # 指向当前仓库
        event-type: linkschange
        client-payload: '{"branch": "output"}'

创建 .github/workflows/autolinks.yml 文件：

name: 更新网站友链
on:
  repository_dispatch:
    types: [linkschange]  # 本工作流由 change 事件触发

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 步骤1：检出代码（根据需求可选）
      - name: Checkout Code
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.client_payload.branch || 'main' }}

      # 步骤2：执行本地任务
      - name: Run Tasks
        run: echo "成功触发，当前分支：${{ github.event.client_payload.branch }}"

      # 步骤3：触发账号B的私有仓库工作流（关键修改部分）
      - name: 触发更新
        uses: peter-evans/repository-dispatch@v3
        with:
          token: ${{ secrets.MY_SECRET_TOKEN }}  # 必须使用账号B的PAT
          repository: yeminxi/hexo_code          # 格式：owner/repo
          event-type: linkspush              # 与目标仓库的事件类型严格匹配
          client-payload: '{"branch": "output"}' # 简化参数，移除冗余字段

我使用 Github Action 构建站点，在前面加上就可以实现友链检测，朋友圈，友链的三同步：

name: 自动部署
# 当有改动推送到master分支时，启动Action
on:
  repository_dispatch:
    types: [linkspush]  # 本工作流由 change 事件触发
  push:
    branches:
      - solitude
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published

jobs:
  
  deploy:
    permissions:
      actions: write
      checks: write
      contents: write
    runs-on: ubuntu-latest
    steps:
    - name: 延迟三十秒执行
      run: |
        echo "Starting delay..."
        sleep 30  # 延迟 30 秒
        echo "Delay completed."
    - name: 检查分支
      uses: actions/checkout@v4
      with:
        ref: solitude

    - name: 安装 Node
      uses: actions/setup-node@v4
      with:
        node-version: "20.x" #action使用的node版本，建议大版本和本地保持一致。可以在本地用node -v查询版本号。

    - name: 安装 Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g

    - name: 缓存 Hexo
      uses: actions/cache@v4
      id: cache
      with:
        path: |
          node_modules
          .deploy_git
          public
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install gulp-cli -g #全局安装gulp
        npm install --save
        npm install yamljs --save

    - name: 清除缓存
      run: |
        hexo clean

    - name: 更新友链朋友圈
      run: |
        node link.js
        node links.js
        node autolinks.js

    - name: 生成静态文件
      run: |
        hexo generate
    
    - name: 提交索引至Algolia
      run: |
        hexo algolia

    - name: 压缩文件
      run: |
        gulp
    
    # - name: 部署    
    #   uses: JamesIves/github-pages-deploy-action@v4
    #   with:
    #     token: ${{ secrets.GITHUBTOKEN }}
    #     repository-name: ${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io
    #     branch: v3.0.0
    #     folder: public
    #     commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"
    - name: 部署到Cloudfare Vercel Pages #此处master:master 指从本地的master分支提交到远程仓库的master分支，若远程仓库没有对应分支则新建一个。如有其他需要，可以根据自己的需求更改。
      run: |
        cd ./public
        git init
        git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
        git config --global user.email '${{ secrets.GITHUBEMAIL }}'
        git branch -M solitude
        git add .
        git commit -m "${{ github.event.head_commit.message }} $(date -u +"%Y-%m-%dT%H:%M:%SZ") Updated By Github Actions"
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/hexo_code_Solitude.git" solitude:v3.0.0
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/hexo_code_Solitude.git" solitude:main
  
    - name: 推送谷歌url
      run: |
        hexo deploy

需要在仓库添加的环境变量，至于怎么获取token这里不多介绍，我这里是用了两个账号所以有两个token，一个只用设置PAT就好。
name value
GITHUBUSERNAME 你Github的用户名
GITHUBEMAIL 你Github的邮箱
PAT 包含repo和work的权限token
MY_SECRET_TOKEN 另一账号仓库包含repo和work的权限token
说一下是什么原理
获取issues的内容 -> 按label生成对应的json -> 推送至output分支和CDN仓库 -> 发送请求至本仓库的另外一工作流 -> 收到请求后，发送请求至另外账号仓库的构建站点的工作流 -> 实现动态友链更新

原教程只能生成json文件到本仓库的 *output 分支的v2文件夹里，这里我加了一个推送到我的CDN仓库的操作。然后通过Github Action获取CDN的json内容生成友链文件，友链检测文件，朋友圈文件，实现三端同步实时更新。
同理可得动态即可短文。

原帖	作者
Stellar动态友链教程	星日语

18. 添加回复时引用该评论

点击效果，即可跳转，随便找条评论试试，只适用Waline。

新建 source/custom/js/replycontent.js 文件填入内容：

(function() {
    let walineContainer = null;
    let observer = null;

    const initWalineReply = () => {
        // 移除旧的事件监听器
        if (walineContainer) {
            walineContainer.removeEventListener('click', handleClick);
        }

        // 获取新的评论容器
        walineContainer = document.getElementById('waline-wrap');
        
        if (!walineContainer) {
            return; // 如果没有找到容器则退出
        }

        // 添加点击事件监听器
        walineContainer.addEventListener('click', handleClick, { passive: true });

        // 如果旧观察者存在，则断开连接
        if (observer) {
            observer.disconnect();
        }

        // 创建新的 MutationObserver 实例并开始观察
        observer = new MutationObserver(() => {
            // 在 DOM 变化时重新初始化
            initWalineReply();
        });

        observer.observe(walineContainer, {
            childList: true,
            subtree: true
        });
    };

    const handleClick = (e) => {
        const replyBtn = e.target.closest('button.wl-reply');
        if (!replyBtn || walineContainer.dataset.pjaxLoading === 'true') return;

        // 精准定位当前评论内容
        const commentItem = replyBtn.closest('.wl-card-item');
        const contentNode = commentItem.querySelector('.wl-card > .wl-content');

        if (!contentNode) {
            return;
        }

        // 沙盒处理（保留链接结构）
        const sandbox = contentNode.cloneNode(true);
        
        // 移除干扰元素
        sandbox.querySelectorAll(
            'span, .wl-meta, svg, img, .wl-quote, blockquote, a[href^="#"], pre'
        ).forEach(n => n.remove());

        // 转换普通链接为Markdown格式（保留非锚点链接）
        sandbox.querySelectorAll('a:not([href^="#"])').forEach(a => {
            const text = a.textContent.trim();
            const href = a.getAttribute('href') || '';
            a.replaceWith(`[${text}](${href})`);
        });

        // 提取纯净文本（增加过滤@符号）
        const pureText = sandbox.textContent
            .replace(/@\S+/g, '')               // 新增@提及过滤
            .replace(/\n{3,}/g, '\n\n')
            .trim()
            .substring(0, 500);

        // 获取编辑器实例
        const editor = walineContainer.querySelector('.wl-editor');
        if (!editor) {
            return;
        }

        // 执行插入
        insertEditorContent(editor, pureText);
    };

    // 通用插入方法（支持Markdown）
    const insertEditorContent = (editor, text) => {
        const insertText = `> ${text}\n\n`;
        const inputEvent = new Event('input', { bubbles: true });

        if (editor.tagName === 'TEXTAREA' || editor.tagName === 'INPUT') {
            // 原生文本域处理
            const start = editor.selectionStart;
            editor.value = 
                editor.value.slice(0, start) + 
                insertText + 
                editor.value.slice(editor.selectionEnd);
            editor.selectionEnd = start + insertText.length;
        } else if (editor.isContentEditable) {
            // 富文本编辑器处理
            const range = document.createRange();
            const selection = window.getSelection();
            range.selectNodeContents(editor);
            range.collapse(false); // 光标移到最后
            range.insertNode(document.createTextNode(insertText));
            selection.removeAllRanges();
            selection.addRange(range);
        }

        editor.dispatchEvent(inputEvent);
        editor.focus();
    };

    // 初始化及事件监听
    document.addEventListener('pjax:complete', initWalineReply);
    initWalineReply(); // 初次调用以进行初始化
})();

修改主题配置文件：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <script data-pjax src="/custom/js/replycontent.js"></script>

19. 弹出式欢迎界面

首次进入本站即显示，点击效果即刻跳转。

新建 source/custom/js/welcome.js 文件填入以下内容（可改）：

document.addEventListener("DOMContentLoaded", (function() {
    if (!getCookie("agreementAccepted")) {
        const referrer = document.referrer ? new URL(document.referrer).hostname : "直接访问";
        
        swal({
            title: "欢迎来到 叶泯希 <(￣︶￣)↗[GO!]",
            content: {
                element: "div",
                attributes: {
                    innerHTML: `
                        <img src='/images/avatar.webp' alt='自定义图标' 
                            style='width:80px; height:auto; border-radius: 50%; 
                            display: block; margin: 0 auto;' /><br />
                        您来自: ${referrer}<br />
                        请您在继续浏览本站之前，仔细阅读以下协议：<br /><br />
                        1. <a href='/privacy/' title='隐私协议' data-pjax-state=''>隐私协议</a>&nbsp;&nbsp;
                        2. <a href='/disclaimer/' title='免责声明' data-pjax-state=''>免责声明</a>&nbsp;&nbsp;<br />
                        3. <a href='/copyright/' title='版权协议' data-pjax-state=''>版权协议</a>&nbsp;&nbsp;
                        4. <a href='/comment/' title='评论协议' data-pjax-state=''>评论协议</a>&nbsp;&nbsp; 
                        5. <a href='/cookies/' title='Cookies' data-pjax-state=''>Cookies</a>&nbsp;&nbsp;<br /><br />
                        点击“同意”表示您已阅读并同意遵守以上协议。
                    `
                }
            },
            buttons: {
                cancel: "不同意",
                confirm: "同意"
            },
            text: "若未获取新内容请清浏览器缓存。"
        }).then(willProceed => {
            willProceed ? setCookie("agreementAccepted", "true", 30) :
            window.history.length > 1 ? window.history.back() :
            window.location.href = "https://xxx";// 替换为希望重定向的 URL
        });
    }

    function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + 24 * days * 60 * 60 * 1000); //添加30天的cookie
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
    }

    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(";");

        for (let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (" " === c.charAt(0)) c = c.substring(1, c.length);
            if (0 === c.indexOf(nameEQ)) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
}));

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 弹出框样式 */
.swal-modal,.swal-text,.swal-title {
  font-family: var(--efu-font) !important;
  background-color: var(--efu-secondbg);
  color: var(--efu-fontcolor) !important;
}

.swal-text {
  font-size: 14px;
}

.swal-content a:hover {
  background-color: var(--efu-theme-op-deep);
}
.swal-content a:not(.fancybox) {
  color: var(--efu-fontcolor);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px dotted var(--efu-lighttext);
  padding: 0px 4px;
  border-radius: 4px 4px 0px 0px;
}

.swal-button--confirm  {
  color: var(--efu-fontcolor);
  background-color: var(--efu-theme-op-deep);
}

修改主题配置文件：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/custom/css/custom.css">
    - <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    - <script src="/custom/js/welcome.js"></script>

原帖	作者
SweetAlert	官网
【Hexo+NexT主题】弹出欢迎弹窗	pai233

20. 添加小米字体

所见即所得。

修改主题配置文件

# Font
# 字体
font:
  font-size: 20px
  code-font-size: 16px
  # Global font
  # 全局字体
  font-family: "MiSans, sans-serif"

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">

21. 配置swpp和PWA（主题是v2 现版本v3）

进入页面即可显示。特别感谢Liushen的帮助！

安装

1 2	npm install swpp-backends@3.0.0-alpha.908 --save npm install hexo-swpp@4.0.0-alpha.131 --save

在Hexo配置文件最后添加：

# swpp
# npm install swpp-backends@3.0.0-alpha.902 --save
# npm install hexo-swpp@4.0.0-alpha.131 --save
# https://kmar.top/posts/b70ec88f/
# https://github.com/EmptyDreams/hexo-swpp
swpp:
  # 是否启用，默认 false
  enable: true
  # 配置文件路径，以 `/` 结尾表示加载指定文件夹下的所有文件，注意文件夹中只能有配置文件，不能有其它文件及文件夹
  config_path: 'swpp.config.ts'
  # 是否生成 sw
  serviceWorker: true
  # 是否向所有 HTML 插入注册 sw 的代码
  auto_register: true
  # 是否生成 DOM 端的 JS 文件并在 HTML 中插入 script
  gen_dom: true
  # 是否追踪链接，默认 false
  # ⚠️警告！！！未启用链接追踪时不要使用永久缓存，否则会导致被缓存的数据永远不会更新，在您不再使用该资源时，缓存也不会被删除！！！
  track_link: true
  # 生成的 diff 文件的路径（可以是绝对路径也可以是相对路径，使用相对路径时相对于网站发布目录），留空表示不生成（默认为 null）
  gen_diff: './diff.json'
  # 是否在执行 hexo deploy 时自动执行 swpp 指令
  # auto_exec: false
  # 检查更新的网址，默认 "https://registry.npmjs.org"，注意不能以斜杠结尾
  npm_url: 'https://registry.npmmirror.com'
  #
  # 排序规则。
  # 该配置项是为了对 hexo 中的一些变量进行排序，避免每次生成 HTML 时由于这些变量的顺序变动导致生成结果不完全相同。
  # 示例：
  # ```yaml
  # # 下面给出的值为插件的缺省值，用户设置该项不会直接覆盖这些值，只有用户也声明 posts、pages 或 tags 时才会覆盖对应的值。
  # swpp:
  #   sort_rules:
  #     posts: 'title'
  #     pages: 'title'
  #     tags: 'name'
  # ```
  # 其中 key 值为要排序的变量的名称，value 为变量排序时的依据，
  # 填 false 表示禁用该项排序，填 true 表示以 value 本身为键进行排序，填字符串表示以 value[tag] 为键进行排序。
  # sort_rules:

在根目录下创建 swpp.config.ts 文件，把我的域名改成你自己的（不懂就看参考里的教程）：

import {
    defineConfig
} from 'swpp-backends'

defineConfig({
    compilationEnv: {
        DOMAIN_HOST: new URL('https://blog.418121.xyz'),
        SERVICE_WORKER: "sw",
        JSON_HTML_LIMIT: 10,
        isStable: (url: URL) => {
            return [
                /^(https?:\/\/|\/\/)(cdn|fastly)\.jsdelivr\.net\/npm\/.*@\d+\.\d+\.\d+\//,
                /^(https?:\/\/|\/\/)jsdelivr\.topthink\.com\/.*@\d+\.\d+\.\d+\//,
                /^(https?:\/\/|\/\/)cdn\.jsdmirror\.com\/.*@\d+\.\d+\.\d+\//,
                /^(https?:\/\/|\/\/)cdn\.staticfile\.org\/.*\/\d+\.\d+\.\d+\//,
                /^(https?:\/\/|\/\/)lf\d+-cdn-tos\.bytecdntp\.com\/.*\/\d+\.\d+\.\d+\//,
                /^(https?:\/\/|\/\/)npm\.elemecdn\.com\/.*@\d+\.\d+\.\d+\//
            ].some(it => it.test(url.href))
        },
        VERSION_LENGTH_LIMIT: 512,
        NETWORK_FILE_FETCHER: {
            referer: "https://blog.418121.xyz",
            getStandbyList(url: string | URL): (string | URL)[] {
                if (typeof url === 'string') url = new URL(url)
                if (url.hostname === 'npm.elemecdn.com') {
                    return [`https://fastly.jsdelivr.net${url.pathname}`]
                }
                return [url]
            }
        }
    },

    crossEnv: {
        CACHE_NAME: "BlogCache",
        VERSION_PATH: "https://id.v3/",
        ESCAPE: 15,
    },

    runtimeDep: {
        getStandbyRequests: (request: Request): {t: number, l: () => Request[]} | void => {
            const srcUrl = request.url
            const {host, pathname} = new URL(srcUrl)
            // noinspection SpellCheckingInspection
            const commonCdnList = ['jsdelivr.topthink.com', 'cdn.jsdmirror.com', 'fastly.jsdelivr.net']
            // noinspection SpellCheckingInspection
            const elme = 'npm.elemecdn.com'
            const urlMapper = (it: string) => new Request(it, request)
            if (host === elme) {
                return {
                    t: 2000,
                    l: () => [...commonCdnList.map(it => `https://${it}/npm${pathname}`)].map(urlMapper)
                }
            }
            if (host === 'jsdelivr.topthink.com') {
                commonCdnList.splice(0, 1)
                return {
                    t: 2000,
                    l: () => [...commonCdnList.map(it => `https://${it}${pathname}`)].map(urlMapper)
                }
            }
        }
    },

    crossDep: {
        matchCacheRule: {
            runOnBrowser: (url: URL)  => {
                let { host, pathname } = url;

                // 处理省略index.html的情况
                if (pathname.endsWith('/')) pathname += 'index.html';

                // 仅仅对于blog.418121.xyz')) { 处理 html 和 json
                if (host.endsWith('blog.418121.xyz')) {
                    if (pathname.endsWith('.json')) return 2592000000; // 30 dyas
                    if (pathname.endsWith('.html')) return 2592000000; // 30 dyas
                    if (pathname.endsWith('.webp') || pathname.endsWith('.jpg') || pathname.endsWith('.png') || pathname.endsWith('.gif')) return 2592000000; // 30 dyas
                }
                if (/\.(js|css|woff2|woff|ttf|cur|json)$/.test(url.pathname)) return 2592000000; // 30 dyas
                
                // return ((url.host.endsWith('blog.418121.xyz')) {') && /(\/|\.json)$/.test(url.pathname)) || /\.(js|css|woff2|woff|ttf|cur)$/.test(url.pathname)) ? 86400000 : false
            },
            runOnNode(url: URL) {
                // @ts-ignore
                return this.runOnBrowser(url)
            }
        }
    },
})

敲 hexo swpp , 使用Github Action 可以在压缩之前加上：

# ...
    - name: 缓存swpp
      run: |
        hexo swpp

    - name: 压缩文件
      run: |    
        gulp
# ...

配置 PWA ，修改主题文件 _config_solitude.yml（按自己的来）：

# ...
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
  enable: true
  manifest: /manifest.json # manifest.json
  theme_color: "#ff8080" # Theme colort
  mask_icon: /img/pwa/favicon.png # Mask icon
  apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
  bookmark_icon: /img/pwa/favicon.png # Bookmark icon
  favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
  favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------
# ...

新建 source/manifest.json 文件（并准备好对应的图片）：

{
    "lang": "zh",
    "name": "叶泯希",
    "short_name": "叶泯希",
    "description": "blog.418121.xyz",
    "theme_color": "#ff8080",
    "background_color": "#ff8080",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
            "src": "/img/pwa/favicon_36.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

网址右边出现安装应用，即成功。

原帖	作者
Hexo配置SWPP实现PWA	Liushen
Swpp Backends 官方文档	空梦
Github仓库	EmptyDreams

22. 赞赏侧边栏

按照LiuShen的教程顺序就好。

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 赞赏页面样式 */
:root {
  /* ========== nav ========== */
  --liushen-nav-bg: rgba(255, 255, 255, 0.8);
  --liushen-nav-shadow: rgba(133, 133, 133, 0.6) 0px 5px 6px -5px;

  /* ========== ai_summary ========== */
  --liushen-title-font-color: #0883b7;
  --liushen-maskbg: rgba(255, 255, 255, 0.85);
  --liushen-ai-bg: conic-gradient(
    from 1.5708rad at 50% 50%,
    #d6b300 0%,
    #42a2ff 54%,
    #d6b300 100%
  );

  /* ========== card ========== */
  --liushen-card-bg: #fff;
  --liushen-card-secondbg: #f1f3f8;
  --liushen-card-border: 1px solid #e3e8f7;

  /* ========== button ========== */
  --liushen-button-bg: #f1f3f8;
  --liushen-button-hover-bg: var(--theme-color);

  /* ========== text ========== */
  --liushen-text: #4c4948;
  --liushen-secondtext: #3c3c43cc;
}

[data-theme='dark'] {
  /* ========== nav ========== */
  --liushen-nav-bg: rgba(18, 18, 18, 0.8);
  --liushen-nav-shadow: rgba(133, 133, 133, 0) 0px 5px 6px -5px;

  /* ========== ai_summary ========== */
  --liushen-maskbg: rgba(0, 0, 0, 0.85);
  --liushen-ai-bg: conic-gradient(
    from 1.5708rad at 50% 50%,
    rgba(214, 178, 0, 0.46) 0%,
    rgba(66, 161, 255, 0.53) 54%,
    rgba(214, 178, 0, 0.49) 100%
  );

  /* ========== card ========== */
  --liushen-card-bg: #2d2d2d;
  --liushen-card-secondbg: #3e3f41;
  --liushen-card-border: 1px solid #42444a;

  /* ========== button ========== */
  --liushen-button-bg: #30343f;
  --liushen-button-hover-bg: var(--theme-color);

  /* ========== text ========== */
  --liushen-text: #ffffffb3;
  --liushen-secondtext: #a1a2b8;
}
.card-widget.card-reward {
    padding: 8px;
}

.card-widget.card-reward .item-headline {
    margin: 4px 4px 4px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-widget.card-reward .item-headline .headline-content i {
    font-size: 1.1em;
}

.card-widget.card-reward .item-headline .headline-content span {
    font-size: 1em;
    font-weight: 600;
    color: var(--liushen-text);
}

.card-widget.card-reward .item-headline .show-more-inline .btn-show-more-inline {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: var(--liushen-card-bg);
    border: var(--liushen-card-border);
    color: var(--liushen-text);
    text-decoration: none;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.card-widget.card-reward .item-headline .show-more-inline .btn-show-more-inline span {
    margin-left: 0;
}

.card-widget.card-reward .item-headline .show-more-inline .btn-show-more-inline:hover {
    background-color: var(--default-bg-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-widget.card-reward .item-content {
    margin: 0 4px 4px 4px;
}

.card-widget.card-reward .item-content .top-sponsor-carousel {
    margin-bottom: 15px; /* Uncomment if rotating the carousel */
    /* position: relative; */
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item {
    width: 100%;
    display: flex !important;
    align-items: center;
    padding: 8px;
    background-color: var(--liushen-card-bg);
    border-radius: 12px;
    border: var(--liushen-card-border);
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item.carousel-item-new {
    animation: slideIn 0.5s ease-out;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--liushen-text);
    width: 100%;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-avatar {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--liushen-card-secondbg);
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-info {
    min-width: 0;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-info .sponsor-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--liushen-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-info .sponsor-desc {
    font-size: 14px;
    line-height: 1;
    color: var(--liushen-secondtext);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-widget.card-reward .item-content .sponsors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.card-widget.card-reward .item-content .sponsors-list .sponsor-item {
    display: flex;
    align-items: center;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--liushen-text);
    text-decoration-style: dashed;

    color: var(--liushen-text);
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.card-widget.card-reward .item-content .sponsors-list .sponsor-item:hover {
    color: var(--default-bg-color);
    text-decoration-color: var(--default-bg-color);
    transform: translateY(-2px);
}

.card-widget.card-reward .item-content .sponsors-list .sponsor-item .sponsor-small-name {
    font-size: 14px;
    font-weight: 500;
}

.card-widget.card-reward .item-content .sponsors-note {
    text-align: center;
    font-size: 12px;
    color: var(--liushen-secondtext);
    opacity: 0.8;
}

.card-widget.card-reward .item-content .sponsors-note p {
    margin: 0;
}

.card-widget.card-reward .item-content .no-sponsors {
    text-align: center;
    padding: 20px;
    color: var(--liushen-secondtext);
}

.card-widget.card-reward .item-content .no-sponsors p {
    font-size: 14px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

修改 _config.solitude.yml 文件：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/custom/css/custom.css">

修改 source/_data/about.yml 文件赞赏位置添加：

award:
  enable: true
  description: 感谢那些欣赏和支持我的人。因为你，我觉得写博客可以为你创造价值。这将使我在这条道路上走得更远。
  tips: 总金额： ¥ {sum} , 将用于博客的维护和更新。 # Must include {sum}, otherwise the total amount will not be displayed
rewardList: # Bottom donations
  - name: 唐若辰
    money: 10
    time: 2024-05-24
    icon: fab fa-weixin
    # icon: fab fa-alipay
    # icon: fab fa-gratipay
    color: green
    #以下是新添加
    avatar: https://images.418121.xyz/file/blog/page/qt.webp
    website: /
    description: 执子之手
  - name: test
    money: 10
    time: 2024-05-24
    icon: fab fa-weixin
    # icon: fab fa-alipay
    # icon: fab fa-gratipay
    color: green
    avatar: https://images.418121.xyz/file/blog/page/qtn.webp
    website: /
    description: test

添加 themes/solitude/layout/includes/widgets/aside/asideRewards.pug 文件：

.card-widget.card-reward
  .item-headline
    .headline-content
      i.fa-solid.fa-person-praying
      span 能量榜
    .show-more-inline
      - var pageUrl = '/reward/'
      a(href=url_for(pageUrl) class="btn-show-more-inline")
        span 前往赞赏
  .item-content
    if site.data.about && site.data.about.rewardList && site.data.about.award.enable
      - var allSponsors = site.data.about.rewardList.slice()
      - allSponsors.sort(function() { return Math.random() - 0.5 })
      - var carouselSponsors = allSponsors.slice(0, 40)
      - var listSponsors = allSponsors.slice(0, 20)
      
      if carouselSponsors.length > 0
        .top-sponsor-carousel
          .carousel-container
            .carousel-item
              a.sponsor-link-card(target="_blank" rel="nofollow noopener")
                .sponsor-avatar
                  img.sponsor-avatar-img(src=url_for(carouselSponsors[0].avatar) alt=carouselSponsors[0].name onerror=`this.onerror=null;this.src='${url_for('/img/default_avatar.webp')}';`)
                .sponsor-info
                  .sponsor-name= carouselSponsors[0].name
                  .sponsor-desc= carouselSponsors[0].description
        
        if listSponsors.length > 1
          .sponsors-list
            each sponsor in listSponsors
              if sponsor.website
                a.sponsor-item(href=sponsor.website target="_blank" rel="nofollow noopener")
                  .sponsor-small-name= sponsor.name
              else
                .sponsor-item
                  .sponsor-small-name= sponsor.name

            if allSponsors.length > 20
              - var pageUrl = '/reward/'
              a.sponsor-item.more-sponsor(href=url_for(pageUrl) target="_blank" rel="nofollow noopener")
                .sponsor-small-name
                  |  查看更多
                  i.fa-solid.fa-angles-right
          
          .sponsors-note
            p 你们的赞赏是我最大的动力
            p ※ 此处数据随机显示
        
        script.
          if (!window.sponsorsData) {
            window.sponsorsData = !{JSON.stringify(carouselSponsors)};
          }
          
          function initRewardCarousel() {
            const container = document.querySelector('.carousel-container');
            const link = container.querySelector('.sponsor-link-card');
            const avatar = container.querySelector('.sponsor-avatar-img');
            const name = container.querySelector('.sponsor-name');
            const desc = container.querySelector('.sponsor-desc');
            
            if (!container || sponsorsData.length === 0) return;
            
            let currentIndex = 0;
            let intervalId = null;
            let isTransitioning = false;
            
            function updateSponsorInfo(sponsor) {
              if (sponsor.website) {
                link.href = sponsor.website;
                // 确保有链接时移除 pointer-events 样式
                link.style.pointerEvents = '';
                link.style.cursor = 'pointer';
              } else {
                link.removeAttribute('href');
                // 只有在没有链接时才添加 pointer-events: none
                link.style.pointerEvents = 'none';
                link.style.cursor = 'default';
              }
              
              avatar.src = sponsor.avatar;
              avatar.alt = sponsor.name;
              
              name.textContent = sponsor.name;
              desc.textContent = sponsor.description;
            }
            
            function showSponsor(index) {
              if (index < 0 || index >= sponsorsData.length || isTransitioning) return;
              
              isTransitioning = true;
              const sponsor = sponsorsData[index];
              
              container.style.opacity = '0';
              
              setTimeout(() => {
                updateSponsorInfo(sponsor);
                container.style.opacity = '1';
                currentIndex = index;
                
                setTimeout(() => {
                  isTransitioning = false;
                }, 300);
              }, 300);
            }
            
            function nextSponsor() {
              const nextIndex = (currentIndex + 1) % sponsorsData.length;
              showSponsor(nextIndex);
            }
            
            function startAutoPlay() {
              if (intervalId) clearInterval(intervalId);
              intervalId = setInterval(nextSponsor, 3000);
            }
            
            function stopAutoPlay() {
              if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
              }
            }
            
            const carousel = document.querySelector('.top-sponsor-carousel');
            if (carousel) {
              carousel.addEventListener('mouseenter', stopAutoPlay);
              carousel.addEventListener('mouseleave', startAutoPlay);
            }
            
            container.style.transition = 'opacity 0.3s ease-in-out';
            
            // 初始化第一个赞助者信息
            updateSponsorInfo(sponsorsData[0]);
            
            startAutoPlay();
            
            return {
              showSponsor,
              nextSponsor,
              startAutoPlay,
              stopAutoPlay
            };
          }
          initRewardCarousel();
          //- document.addEventListener("pjax:complete", function() {
          //-   initRewardCarousel();
          //- });
      else
        .no-sponsors
          p 暂无赞助者，成为第一个支持本站的朋友吧！
    else
      .no-sponsors
        p 暂无赞助者数据

修改 themes/solitude/layout/includes/widgets/aside/asideSwitch.pug 文件：

//- ===========================================
//- 侧边栏组件切换器
//- ===========================================

include ../../mixins/common.pug

//- 主切换逻辑
case item
  when 'about'
    include ./asideInfoCard.pug
  when 'flip'
    include ./asideFlipCard.pug
  when 'newestPost'
    include ./asideNewestPost.pug
  when 'allInfo'
    include ./asideAllInfo.pug
  when 'ads'
    include ./asideAdsense.pug
  when 'newest_comment'
    include ./asideNewstComments.pug
    //- 添加这两行==============================
  when 'rewards'
    include ./asideRewards.pug
    //- 结束====================================
  default
    //- 处理自定义组件
    - const custom = site.data && site.data.aside && site.data.aside.find((i) => i.name === item)
    +conditionalWrapper(custom)
      include ./asideCustom.pug

添加 themes/solitude/layout/includes/page/reward.pug 文件：

if page.banner
    include ../widgets/page/banner
if site.data.about
    #about-page
        - award = site.data.about.award

        - var sum = 0
        if site.data.about.rewardList && site.data.about.award.enable
            .author-content
                .author-content-item.single.reward
                    .author-content-item-tips= _p('award.thanks')
                    span.author-content-item-title= _p('award.title')
                    .author-content-item-description
                        != award.description
                    .reward-list-all
                        each reward in site.data.about.rewardList.sort((a, b) => b.time - a.time) || []
                            - sum += reward.money
                            .reward-list-item
                                .reward-list-item-name= reward.name
                                .reward-list-bottom-group
                                    .reward-list-item-money(style="background-color:" + reward.color)
                                        if reward.icon
                                            i.solitude(class=reward.icon)
                                        | ¥ #{reward.money}
                                    time.datetime.reward-list-item-time(datetime=moment(reward.time).format())
                        if theme.post.award.enable
                            .post-reward
                                .post-reward(onclick="AddRewardMask()")
                                .reward-button(title=_p('award.tipping'))
                                    i.solitude.fas.fa-heart
                                    = _p('award.tipping')
                                .reward-main
                                    ul.reward-all
                                        span.reward-title= theme.post.award.title
                                        ul.reward-group
                                            - var rewards = theme.post.award.list
                                            each reward in rewards
                                                li.reward-item
                                                    a(href=url_for(reward.url))
                                                        img.post-qr-code-img(alt=reward.name, src=reward.qcode, style="border-color:" + reward.color)
                                                    .post-qr-code-desc= reward.name
                    .reward-list-tips
                        p= award.tips.replace('{sum}', sum.toFixed(2))

修改 themes/solitude/layout/page.pug 文件（about下方）添加：

default
  case page.type
    when 'categories'
      include includes/page/categories
    when 'tags'
      include includes/page/tags
    when 'links'
      include includes/page/links
    when 'about'
      include includes/page/about
      //- 这里添加=========================
    when 'reward'
      include includes/page/reward
      //- 结束=============================
    when 'brevity'
      include includes/page/brevity
    when 'kit'
      include includes/page/kit
    when 'music'
      include includes/page/music
    default
      include includes/page/default

创建 source/reward/index.md 文件：

---
title: 致谢赞赏
date: 2025-11-15 16:17:49
type: reward
data: about
aside: false
banner: true
desc: 感谢每一份慷慨的赞赏
leftend: 感谢赞赏，请在评论区留下您的备注，谢谢！
---

修改 _config.solitude.yml 文件：

# ...
# Aside
# 侧边栏
aside:
  # Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)
  # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), flip(官方账号二维码), newest_comment(最新评论)，rewards(赞赏)

  # Sticky: Fixed position / noSticky: Not fixed position
  # Sticky: 固定位置 / noSticky: 不固定位置
  home: # on the homepage
    noSticky: "about,rewards"
    Sticky: "love,likeme,allInfo"
  post: # on the article page
    noSticky: "about"
    Sticky: "rewards,flip,newestPost,likeme"
  page: # on the page
    noSticky: "about"
    Sticky: "rewards,flip,likeme"
  # 菜单栏位置(0: 左 1: 右)
  position: 0 # Sidebar positioning(0: left 1: right)
# ...
  # Reward
  # 打赏
  award:
    enable: true
    appreciators: /reward/ # Reward page
    # Reward Title
    # 打赏标题
    title: 感谢您的赞赏 # Thanks for your appreciation. / 感谢您的赞赏
    desc: 由于您的支持，我才能够实现写作的价值。 # Because of your support, I realize the value of writing articles. / 由于您的支持，我才能够实现写作的价值。
    # Reward list
    # 打赏列表
    list:
      # - name: Github Sponsor
      #   qcode: https://s3.qjqq.cn/47/661ba900c4bc1.webp!color
      #   url: https://github.com/sponsors/everfu
      #   color: var(--efu-black)
      - name: 微信
        qcode: /images/wxm.webp
        url: /images/wxm_l.webp
        color: var(--efu-green)
      - name: 支付宝
        qcode: /images/zfbm.webp
        url: /images/zfbm_l.webp
        color: var(--efu-blue)

完成，再次感谢LiuShen的大力支持！

原帖	作者
Butterfly主题实现赞赏页面及侧边卡片	LiuShen

结尾

至此，全篇结束。希望对你有所帮助，有任何问题请在下方留言。可以关注我的公众号以及订阅我的文章，感谢你的支持，是对我最大的动力，当然了，更多的是因为热爱。

你出现又幻灭是错觉

你出现又幻灭是错觉

你出现又幻灭是错觉