对Arknights主题的一些修改

First Post:

2024-05-23

Last Update:

2024-07-02

博主没学过前端，请客观地看待下边的内容。

个性签名（头像下边的小字） | description

签名默认是没有内容的，需要自己添加

内容可以在_config.yml里的description修改（没有的话需要自己添加）

样式可以在themes/arknights/source/css/_core/aside/aside.styl里修改

暂未解决

解决记录

我已经从最表层的修改图标找到生成图标样式的代码了（也许），最表层在_config.arknights.yml，生成图标样式的代码在themes/arknights/layout/includes/aside.pug第9~13行：

if theme.social  
  #social-links  
    each value, name in theme.social  
      a.social(href= value.split('||')[0].trim())  
        i(alt=name,class=value.split('||')[1].trim())

打算参考这个来解决问题：聊聊纯 CSS 图标 (antfu.me)

文章的图片显示问题

可以在themes/arknights/source/css/_page/post/post.styl里进行修改来调整图片的显示方式，下边是一种方案：

// 在任意一个 #post-content 下添加以下代码（注意正确的缩进）
  .item-img img  
    display: block  
    max-width: 100%  
    max-height: 80vh  
    object-fit: contain  
    margin: auto

解决记录

这个主题加载图片默认是没有设置缩放的，不过这对于Home页面来说并无大碍，我可以用画幅较宽的图片作为题图，并且这样与主题会很搭配，舟味儿很浓（这里特指主题作者做的主题预览demo里的活动预告）。但是在单个文章里边，这会导致图片宽度太大时会特别占地方（指占满整个宽度），特别影响阅读，所以我考虑给图片加个限制。

在研究themes/arknights（也就是arknights主题的文件目录）的构成时，在themes/arknights/source/css看到了一个arknights.styl，这个文件的内容是

// ===== 基础样式  
// == base style  
@import '_core/core';  
  
// ===== 组件相关  
// == modules  
@import '_modules/modules';  
  
// ===== 页面样式  
// == page style  
@import '_page/page';  
  
// ===== 自定义样式  
// == custom style  
@import '_custom/*';

在粘贴上边的代码的时候我发现了一个特性（？），由markdown代码生成html时能渲染两个前边有块引用标记>的代码块标记``` 之间的不带块引用标记的代码，而markdown编辑器不能这样渲染，会严格按照块引用标记来渲染（至少我在用的obsidian和webstorm不行）

于是找到themes/arknights/source/css/_page/post/post.styl这个文件，在第27~28行可以看到这样的代码

1 2	`img max-width 100%`

在尝试修改max-width的值为50%之后，我发现文章里的图片确实变小了。（By the way，按百分比来设置宽度要比我一开始想的直接修改图片宽度的像素值要合理很多，这样也不用担心不同分辨率屏幕下的适配问题）

但是有一个问题，这两行代码是在#post-bg下边的，也就是说应该是post的background，并且在这个post.styl的开头就有#post-content，所以在#post-bg下修改好像并不合理。所以我往下找了找，发现62~91行是post-content的详细设置，于是我把前边#post-bg下边那个img的设置改了回去，在第91行后边添加这样的代码：

1 2	`img max-width 50%`

这样就实现了图片合理缩放

还有一个问题，图片默认是左对齐的，缩小之前看不出来（因为占满了），调整之后会比较难看，我个人倾向于将图片居中放置。但是我又不会写，所以问了一下copilot，它告诉我可以在post.styl文件的img选择器下添加display: block;和margin: auto;，我试了一下，成功让图片居中了。

这里我放一下完整问答，感兴趣的可以展开看一下

与Copilot的对话

Q - Rimrose

在文件post.styl里有一段这样的代码：

#post-content
  padding-bottom 1em
  table
    width 100%
  .footnote-ref:before
    content ''
    display inline-block
    margin-top -60px
    width 1px
    height 60px
    visibility hidden
  .footnotes li:before
    content ''
    display block
    margin-top -60px
    height 60px
    visibility hidden
  .headerlink
    background-color var(--theme-highlight)
    margin 5px 7px 5px 0
  h1, h2
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 6px
  h3, h4 ,h5 ,h6
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 5px
  img
    max-width 50%

现在网页中的post-content标签内有一个这样的元素：

<p class="item-img" data-src="https://images.rimrose.site/images/屏幕截图_2024-05-23_120805.jpg" data-lg-id="5ff8c16c-9e7d-45ee-9588-9e344f1f2886"><img src="https://images.rimrose.site/images/屏幕截图_2024-05-23_120805.jpg" alt="">

请问在post.styl的这段代码里该如何修改才能让图片居中显示

A - Copilot

要让图片居中显示，你可以在post.styl文件的img选择器下添加display: block;和margin: auto;。这样，图片就会在其父元素中居中显示。修改后的代码如下：

#post-content
  padding-bottom 1em
  table
    width 100%
  .footnote-ref:before
    content ''
    display inline-block
    margin-top -60px
    width 1px
    height 60px
    visibility hidden
  .footnotes li:before
    content ''
    display block
    margin-top -60px
    height 60px
    visibility hidden
  .headerlink
    background-color var(--theme-highlight)
    margin 5px 7px 5px 0
  h1, h2
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 6px
  h3, h4 ,h5 ,h6
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 5px
  img
    max-width 50%
    display: block
    margin: auto

这样，所有在#post-content下的img元素都会居中显示。如果你只想让特定的图片居中显示，你可以为这些图片添加一个特定的类，然后在这个类下应用上述的样式。例如，你可以为你的图片添加一个.center类，然后在.center类下添加display: block;和margin: auto;。

不过这样调整也有不太好的地方，这会让宽幅图片显示过小，算是对竖构图的图片显示的优化，但算是对横向构图的图片的负优化。所以我又问了一下Copilot，它给出了这样的做法：

.item-img img  
  display: block  
  max-width: 100%  
  max-height: 100vh  
  object-fit: contain  
  margin: auto

与Copilot的对话

Q - Rimrose

文件post.styl里有这样一段代码：

#post-content
  padding-bottom 1em
  table
    width 100%
  .footnote-ref:before
    content ''
    display inline-block
    margin-top -60px
    width 1px
    height 60px
    visibility hidden
  .footnotes li:before
    content ''
    display block
    margin-top -60px
    height 60px
    visibility hidden
  .headerlink
    background-color var(--theme-highlight)
    margin 5px 7px 5px 0
  h1, h2
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 6px
  h3, h4 ,h5 ,h6
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 5px

并且在这个文件参与渲染的网页里有这样一个元素：

<p class="item-img" data-src="https://images.rimrose.site/images/屏幕截图_2024-05-23_120805.jpg" data-lg-id="5ff8c16c-9e7d-45ee-9588-9e344f1f2886"><img src="https://images.rimrose.site/images/屏幕截图_2024-05-23_120805.jpg" alt="">

我想让这个图片元素居中显示，并且如果这个图片height与width比例较大，图片会显示过大，占满屏幕（整个post-bg区域），我想解决这两个问题，应该在post.styl里如何修改，请告诉我添加或者修改的方法

A - Copilot

你可以在 post.styl 文件中添加一些 CSS 规则来调整图片的显示方式。以下是一种可能的解决方案：

#post-content
  padding-bottom 1em
  table
    width 100%
  .item-img img
    display: block
    max-width: 100%
    max-height: 100vh
    object-fit: contain
    margin: auto
  .footnote-ref:before
    content ''
    display inline-block
    margin-top -60px
    width 1px
    height 60px
    visibility hidden
  .footnotes li:before
    content ''
    display block
    margin-top -60px
    height 60px
    visibility hidden
  .headerlink
    background-color var(--theme-highlight)
    margin 5px 7px 5px 0
  h1, h2
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 6px
  h3, h4 ,h5 ,h6
    &:target .headerlink
      background-color var(--theme-subcolor)
    .headerlink
      padding 0 0 0 5px

这段代码会将 .item-img img的 display``属性设置为block，这样图片就可以居中显示了。同时，max-width: 100%和max-height: 100vh会限制图片的最大宽度和高度，使其不会超过屏幕的宽度和高度。object-fit: contain会保证图片在保持原始宽高比的情况下缩放，以适应其容器的大小。margin: auto`会使图片在其容器中居中。这样，无论图片的宽高比如何，它都会适当地缩放并居中显示。

这样就是以屏幕大小为依据来调整图片显示了，十分的合理，也符合我的预期。

链接卡片

写法如下

{% linkcard %}
item1: //标题
  src: 'https://example.com' //链接地址
  avatar: 'https://example.com/avatar.png' //图标
  descr: "This is an example link." //描述
  img: 'https://example.com/background.png' //背景
  style: //自定义样式
	  example: example
{% endlinkcard %}

例如：

{% linkcard %}
link1:
  src: 'https://blog.rimrose.site'
  avatar: 'https://images.rimrose.site/images/QQ图片20231031210606.ico'
  descr: "Rimrose's Blog"
link2:
 src: 'https://blog.rimrose.site/TEC/Modifications_to_Arknights_theme/#%E9%93%BE%E6%8E%A5%E5%8D%A1%E7%89%87'
 avatar: 'https://images.rimrose.site/images/QQ图片20231031210606.ico'
 descr: "对Arknights主题的一些修改"
{% endlinkcard %}

原回答

在ToUNVRSe的博客里看到有链接卡片，摸索了一下发现是这样写的：

<div>
<a href="your-link-url" class="link-card">
  <div class="link-background">
    <!-- 背景图片 -->
  </div>
  <div class="link-main">
    <div class="link-ico">
      <img src="icon-url.png" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">标题</div>
      <div class="link-descr">描述</div>
    </div>
  </div>
</a>
</div>

也可以进行一些更细致的修改：比如在第一个<div>标签里加上style="display: flex; justify-content: center; text-align: center;"就可以让卡片整体与卡片上显示的文字一起居中显示。如果同时想让文字不居中，则可以对class属性为link-data的<div>标签单独添加类似于style="text-align: left"这样的内容来进一步调整文字内容的显示（当然你也可以细分到link-title和link-descr，不过我觉得没必要）

请注意，需要一行放置多个link-card时，可以添加flex-wrap: wrap;到最外层的<div>样式中，以确保当多个.link-card元素在一行中无法全部显示时，它们可以正确地换行到下一行。这样，无论在大屏幕还是小屏幕设备上，.link-card元素都能够更好地显示。（这个方法也是Copilot教我的）

当然，也可以修改link-card.styl来自动添加前边增加的样式，比如这样：

//在link-card.styl里添加下边的内容
.link-container //自定义的一个类名，可以使link-card类元素的父div标签自动添加下边的样式
  display: flex
  justify-content: center
  text-align: center
  flex-wrap: wrap; //自动换行

如果添加了这些内容，就需要修改链接卡片的模板，在模板的最外层div标签里加上class="link-container"

链接卡片示例：

通过直接复制这个模板来生成的卡片会单独占一行，就像这样：

<!--Link-1-->
<div class="link-container">
<a href="https://blog.rimrose.site/REC/搭建记录-使用hexo框架搭建个人博客/#链接卡片" class="link-card">
  <div class="link-background">
    <img src='https://images.rimrose.site/images/163_16808348627320.jpg'>
  </div>
  <div class="link-main">
    <div class="link-ico">
      <img src="https://images.rimrose.site/images/QQ图片20240517130109.jpg" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">Link-1</div>
      <div class="link-descr">我是link-1</div>
    </div>
  </div>
</a>
</div>

<!--Link-2-->
<div style="display: flex; justify-content: center; text-align: center;">
<a href="https://blog.rimrose.site/REC/搭建记录-使用hexo框架搭建个人博客/#链接卡片" class="link-card">
  <div class="link-main">
    <div class="link-ico">
      <img src="https://images.rimrose.site/images/QQ图片20240517130109.jpg" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">Link-2</div>
      <div class="link-descr">我是Link-2</div>
    </div>
  </div>
</a>
</div>

如果要在一行内放置多个卡片，可以通过复制模板的<a>标签里的内容来实现，比如这样：

<div class="link-container">

<!--Link-1-->
<a href="https://blog.rimrose.site/REC/搭建记录-使用hexo框架搭建个人博客/#链接卡片" class="link-card">
  <div class="link-main">
    <div class="link-ico">
      <img src="https://images.rimrose.site/images/QQ图片20240517130109.jpg" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">Link-1</div>
      <div class="link-descr">我是Link-1</div>
    </div>
  </div>
</a>

<!--Link-2-->
<a href="https://blog.rimrose.site/REC/搭建记录-使用hexo框架搭建个人博客/#链接卡片" class="link-card">
  <div class="link-main">
    <div class="link-ico">
      <img src="https://images.rimrose.site/images/QQ图片20240517130109.jpg" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">Link-2</div>
      <div class="link-descr">我是Link-2</div>
    </div>
  </div>
</a>

<!--Link-3-->
<a href="https://blog.rimrose.site/REC/搭建记录-使用hexo框架搭建个人博客/#链接卡片" class="link-card">
  <div class="link-main">
    <div class="link-ico">
      <img src="https://images.rimrose.site/images/QQ图片20240517130109.jpg" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">Link-3</div>
      <div class="link-descr">我是Link-3</div>
    </div>
  </div>
</a>

<!--Link-4-->
<a href="https://blog.rimrose.site/REC/搭建记录-使用hexo框架搭建个人博客/#链接卡片" class="link-card">
  <div class="link-main">
    <div class="link-ico">
      <img src="https://images.rimrose.site/images/QQ图片20240517130109.jpg" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">Link-4</div>
      <div class="link-descr">我是Link-4</div>
    </div>
  </div>
</a>

</div>

解决记录

在看arknights主题的README时，看了一眼预览里边字号和主题作者Yue_plus一样大的ToUNVRSe佬的博客，在FRIEND页面看到有链接卡片的使用，遂想使用同款，但是不知道怎么做，就继续去研究主题目录（指theme/arknights）了

在翻的时候找到了这样一个文件themes/arknights/source/css/_modules/cards/link-card.styl，有了前边的经验（指调整图片显示），我就想着直接把这份代码丢给Copilot，让它教我写一个link-card。其实我觉得link-descr的默认字体不好看，就顺手改了一下，在link-card.styl的第65行

但是我问了Copilot两三次，两三次写的代码都不一样，虽然我按照它给的代码确实可以添加link-card，但是它点不动，并且都有一点显示上的问题（关于hover的）。所以我又去看了看ToUNVERSe博客里的FRIEND页面上的link-card，用开发者工具看了一下，发现这个link-card和Copilot提供的模板有区别，区别在第一行：Copilot提供的模板里写的是<div class="link-card">，而这个link-card上的是<a class="link-card" href="url">。所以我去拷打了一下Copilot，让它帮我写了一个没有bug的模板：其实这里的改动很简单，只需要把最外层的一组div标签改成a标签，再在a标签里写上href就可以了。到这儿再拷打Copilot，花费的时间都够我自己改一下模板再做出来好几个完整的link-card了

<a href="your-link-url" class="link-card">
  <div class="link-background">
    <!-- 背景图片 -->
  </div>
  <div class="link-main">
    <div class="link-ico">
      <img src="icon-url.png" alt="Icon">
    </div>
    <div class="link-data">
      <div class="link-title">标题</div>
      <div class="link-descr">描述</div>
    </div>
  </div>
</a>

By the way，用审查工具点我写的链接卡片时会出错，不知道为什么

后边我又问了Copilot，对link-card的单行显示进行了优化，具体内容已经写在一行放置多个link-card实例的后边

再后边还有一点点，某些网页的图标（favicon）尺寸过小，会出现显示偏移的情况，所以我问Copilot让它帮我加了点东西：

.link-ico {  
  height: 50px;  
  width: 50px;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  border-radius: 50%;  
  background-size: contain; /* 使背景图像适应容器大小，但不超过其原始大小 */  background-position: center; /* 将背景图像置于容器中心 */  img {  
    max-height: 100%;  
    max-width: 100%;  
    border-radius: 50%;  
  }  
}

这样可以将图标居中，美观了很多

再再后边，其实又因为某些图标用圆形框起来不好看所以把圆形边框去掉了

再再再后边，在某些时候会出现链接卡片上的图标无法加载出来的情况，所以我将图标放在了博客的文件夹里边以减少这种可能性

现在是2024.6.26，我在摸索hexo的标签插件时发现了arknights主题有关于linkcard的标签（。。。很无语啊，主题的README里并没有写这部分内容，这里提一下stellar主题，它就写了自定义标签插件，在这里）在themes/arknights/scripts/tags/link-card.js里边。

它定义了linkcard和linkc这两个hexo标签，写法如下：

{% linkcard %}
item1:
  src: 'https://example.com'
  avatar: 'https://example.com/avatar.png'
  descr: 'This is an example link.'
  img: 'https://example.com/background.png'
  style:
    color: 'red'
{% endlinkcard %}

我看了一下它的效果，默认是一行多个linkcard并且是左对齐显示，显示不下的时候会自动改成一行一个。但也是够用了，而且很方便。（其实是想把这个样式改一下的，但是我前边改的link-container是在多个link-card之外的，不好修改，所以就这样吧，最主要还是用着方便）

目录样式的修改

本来是想自己找找在哪改的，但是突然发现在配置文件里有目录的设置：

# 文章内目录  
toc:  
  list_number: false # true / false ；是否显示编号  
  max_depth: 6 # 最大目录深度  
  min_depth: 1 # 最小目录深度

自定义标签插件 | Tag plugin

arknights主题自带了三个标签插件：admonition、hide和link-card，不过因为馋别的主题的一些东西，索性又自己写了一点内容：

tip

写法：

1	`{% tip [class] "content" %}`

例如：

this is a piece of failure

this is a piece of success

this is a piece of warning

1
2
3

{% tip failure this is a piece of failure %}
{% tip success this is a piece of success %}
{% tip warning this is a piece of warning %}

实现方式

'use strict';  
  
function render(data) {  
    return hexo.render.renderSync({ text: data, engine: 'markdown' });  
}  
  
hexo.extend.tag.register('tip', (args) => {  
    let theme = args[0];  
    let content = args.slice(1).join(' ');  
    return `<div class="tip ${theme}"><i class="i-adm i-${theme} icon"></i><div class="p">${render(content.trim())}</div></div>`;  
});

.tip  
  display flex  
  align-items center  
  padding: 10px;  
  margin 5px 5px 0 0  
  color var(--theme-text-light) //普通的文本颜色会显得比较暗  
  &.success  
    background-color rgba(0,255,0,0.7)  
    border-left 5px solid rgb(0,255,0)  
  &.warning  
    background-color rgba(255,255,0,0.7)  
    border-left 5px solid rgb(255,255,0)  
  &.failure  
    background-color rgba(255,0,0,70%)  
    border-left 5px solid rgb(255,0,0)  
  .icon  
    margin-right 0.8em  
    transform scale(1.3)  
  .p  
    flex 1 /* 占据剩余空间 */

quot

写法：

1	`{% quot [class] "content" %}`

例如：

This is a quotation.

这是一条引用。

日落飞锦绣长河，天地壮我行色。

1 2	`{% quot one This is a quotation. %} {% quot one 这是一条引用。 %}`

只适合居中且醒目的引用

实现方式

'use strict';  
  
hexo.extend.tag.register('quot', (args) => {  
    let icon = args[0];  
    let content = args.slice(1).join(' ');  
    return `<div class="quot ${icon}"><p>${content.trim()}</p></div>`;  
})

.quot  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  
.quot p  
  display: inline;  
  margin: 0;  
  font-size 1.3em;  
  font-family 'REEJI-CloudDaBiaoSongGBT', 'Times New Roman'  
  color var(--theme-border-light)  
  
.quot:before, .quot:after  
  content: "";  
  display: inline-block;  
  height: 2em; /* 调整图标的高度 */  width: 2em; /* 调整图标的宽度 */  margin: 5px 5px;  
  
.quot.one:before  
  background url('../img/left-1.png') no-repeat center/contain  
  
.quot.one:after  
  background url('../img/right-1.png') no-repeat center/contain

其他修改

这里记录的也是主题作者写的README里没有的（一点点魔改吧算是）

hide样式

（就像这样）在某些设备上显示过大，容易产生重叠，所以在themes/arknights/source/css/_modules/cards/hide.styl里把padding 5px改成了padding -1px，好看多了

侧边栏上的logo

摘自腾讯QQ头像获取直链（多方法整理） - 染念的笔记 (dyedd.cn)：

【腾讯QQ头像获取直链】用别人提供的不如用官方的

1.API接口（qq号式）：https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640

不想用ssl，请把s去掉；640是大小，可以是640,100

2.API接口（邮箱式）： https://q2.qlogo.cn/headimg_dl?dst_uin=QQ邮箱&spec=640

亲测100也有效

3.API接口（来自QQ空间）：https://qlogo.store.qq.com/qzone/QQ号/QQ号/大小

同时它的地址前缀可以换成qlogo1、qlogo2、qlogo3、qlogo4哦，其实都一样的。 640,100都行

还可以利用api接口地址获取你的QQ空间头像地址：http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=QQ号码

然后会返回一串json数据，里面的网址就是你的头像了。

再附一个https的QQ头像API接口：http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=QQ号码

同样会返回json数据，然后自行提取你的专属头像网址。

相册页面（未完成）

fakeyanss/Hexo-Album: add album&photos with Hexo blog (github.com)

Hexo的next主题个性化配置 | Yet Another Possibility (foreti.me)

添加字体

字体文件声明在themes/arknights/layout/includes/meta-data.pug这个文件里边

字体文件存放路径是themes/arknights/source/font

首先在link标签中预加载字体，比如

1	`link(rel="preload", as="font", crossorigin="anonymous", href=url_for("font/Song.ttf"))`

然后在style标签中使用@font-face规则定义字体，比如

@font-face {  
  font-family: 'REEJI-CloudDaBiaoSongGBT';  
  src: local('REEJI-CloudDaBiaoSongGBT'), url('#{config.root}font/Song.ttf') format('truetype');  
}

expand-box

这里改的是像details和note标签的那种可以展开的内容，原本它们的宽度是比post-content要窄的，但是我觉得这样太难看了，尤其是在expand-box正下边紧跟着写内容时，就会显得特别难看，所以我改了一下，在themes/arknights/source/css/_modules/expand.styl里，.expand-box下边的margin，改一下就行了

于此类似的还有代码块，这个的话在themes/arknights/source/css/_page/post/code.styl里，把.highlight下的margin改一下就可以了

≡

对Arknights主题的一些修改

个性签名（头像下边的小字） | description

侧边栏的其他网站图标 | social

文章的图片显示问题

链接卡片

目录样式的修改

自定义标签插件 | Tag plugin

tip

quot

其他修改

hide样式

侧边栏上的logo

相册页面（未完成）

添加字体

expand-box