添加赛博摇一摇立牌

  • 修改方法
引用站外链接
添加石蒜模拟器网页小组件
基于sakana-widget
  • 自定义角色

最简单的方法就是直接更换原有角色的图片（个人建议使用1:1比例的图片）

这里需要引用自己修改的js文件，最简单的方法就是将教程中提到的sakana.min.js文件存到博客资源文件夹中进行修改，然后直接引用

  • 修改示例
themes/solitude/source/sakana_rimrose.js
1
2
3
4
var N = {
    chisato: {
        // 原图那串base64代码太长了就不在这儿放了
        image: "https://rimrose.top/img/Scene_1000px_1.png", // 自定义图片
_config.yml
1
2
3
4
5
body:
- <script
  async
  onload="initSakanaWidget()"
  src="https://rimrose.top/sakana_rimrose.js"></script> # 这里是自定义的js文件

图例：可爱的稀音小姐（画师：菌菌）

修改链接卡片样式

  • 支持对 tag-link-tips 的修改（比如上边这个链接卡片左上角的“引用站外链接”）
  • 支持自定义图标或图片
1
{% link [标题] [副标题] [链接] (自定义Tips) (自定义图标/图片) %}


全球最大的同性交友平台


GitHub

软件源代码托管服务平台

</div>

</div>

Photoshop比PS专业（bushi）


</div>
Photoshop

由 Adobe 开发和发行的图像处理软件

</div>

</div>

1
2
{% link GitHub 软件源代码托管服务平台 https://github.com/ 全球最大的同性交友平台 'fab fa-github' %}
{% link Photoshop '由 Adobe 开发和发行的图像处理软件' https://www.adobe.com/products/photoshop.html Photoshop比PS专业（bushi） '/img/logos/photoshop.png' %}
  • 修改方式
    node_modules/hexo-solitude-tag/dist/index.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    /*将原有的LinkTag部分修改为以下内容*/
    function linkTag([title, subtitle, link, customTips, customIcon]) {
      _link = true;
      const isLocal = link.startsWith('/');
      const tipsContent = customTips || (isLocal ? '站内链接' : '引用站外链接');

      // 根据 customIcon 判断使用字体图标还是背景图片
      const iconHTML = customIcon
              ? (customIcon.startsWith('fa')
                      ? `<i class="solitude ${customIcon}"></i>`
                      : `<div class="tag-link-left" style="background-image: url('${customIcon}');"></div>`)  // 使用图片作为背景
              : '<i class="solitude fas fa-link"></i>';

      const bottom = `
        <div class="tag-link-tips">${tipsContent}</div>
        <div class="tag-link-bottom">
            <div class="tag-link-left">
              ${iconHTML}
            </div>
            <div class="tag-link-right">
                <div class="tag-link-title">${title}</div>
                <div class="tag-link-sitename">${subtitle}</div>
            </div>
            <i class="solitude fas fa-chevron-right"></i>
        </div>`;

      return (0, hexo_util_1.htmlTag)('a', {
        class: 'tag-link',
        href: link,
        target: isLocal ? '_self' : '_blank'
      }, bottom, false);
    }
node_modules/hexo-solitude-tag/dist/css/link.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/*修改后的代码如下*/
.article-container
  a.tag-link
    background var(--efu-secondbg)
    border-radius 8px !important
    display flex
    border var(--style-border)
    flex-direction column
    padding 0.5rem 1rem !important
    border-width 1px
    margin 1rem 0
    //max-width 600px /* 设置最大宽度 */
    //width: 90% /* 占据父容器的90%，使其居中并有适当的边距 */
    margin-left: auto
    margin-right: auto

    &:hover
      background var(--efu-main)
      border var(--style-border-hover) !important

    i
      transition .3s
      margin-left auto
      opacity .6

    .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
      background-position: center
      border-radius 8px
      background-color var(--efu-card-bg)
      display: flex
      align-items: center
      justify-content: center

      i
        padding 0
        margin auto
        font-size 24px
        color var(--efu-fontcolor)

    .tag-link-right
      margin-left 1rem
      max-width calc(100% - 76px - 1rem)

      .tag-link-title
        font-weight: bold
        color: var(--efu-fontcolor) /* 保持原样，标题颜色 */

      .tag-link-sitename
        color: var(--efu-gray-darker) /* 副标题颜色调整 */
        opacity: 0.8 /* 副标题亮度稍暗 */

    /* 新增：调整 tag-link-tips 样式，使副标题的亮度稍微暗一点 */
    .tag-link-tips
      border-bottom var(--style-border)
      padding-bottom 4px
      font-size 12px
      color var(--efu-gray) /* 修改颜色为稍暗的灰色 */
      font-weight 400
      opacity: 0.7 /* 使提示文字亮度稍暗 */
      transition .3s

@media (max-width: 768px)
  .article-container a.tag-link
    width: 100%
    max-width: none

添加游戏页面

  • 修改方法
引用站外链接
Solitude 主题改造记录
其他修改-新增游戏界面

添加追番页面

  • 安装 hexo-bilibili-bangumi 插件
1
npm install hexo-bilibili-bangumi --save
  • 写入插件配置

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
bangumi: # 追番设置
  enable: true
  source: bili
  bgmInfoSource: 'bgmv0'
  path:
  vmid:
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order: latest
  proxy:
    host: '代理host'
    port: '代理端口'
  extra_options:
    key: value
  coverMirror:
cinema: # 追剧设置
  enable: true
  path:
  vmid:
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order:
  extra_options:
    key: value
  coverMirror:
game: # 游戏设置，仅支持source: bgmv0
  enable: true
  path:
  source: bgmv0
  vmid:
  title: '游戏列表'
  quote: '生命不息，游戏不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order:
  extra_options:
    key: value
  coverMirror:

请按需修改各项配置参数，必须修改的有source, vmid, lazyload，vmid的获取方式以及其他参数请看README‘

  • 使用

    • 在 hexo generate 或 hexo deploy 之前使用hexo bangumi -u命令更新追番数据

    • 一切就绪之后使用 hexo generate 命令即可生成追番页面，默认路径为bangumis/index.html

在主题配置文件里添加追番页面到导航栏，例如：

_config.solitude.yml
1
2
3
4
nav:
  menu:
     我的:
       追番列表: /bangumis/ || fas fa-tv
  • 示例
站内链接
我的追番
追番数据由bangumi提供