对Chirpy进行简单美化 | manalogues
文章

对Chirpy进行简单美化

发表于 更新于
作者 花咲まな
13 分钟阅读

最近收到了之前向ぺそ老师约的稿，除了主图以外还收到了两张sticker，于是便想要用这些sticker来装饰manalogue的界面，顺便对Chirpy的结构进行简单的解析。

想要达成的效果如下：

  • 增大侧边栏的头像大小
  • 侧边栏添加“杂项”并创建对应页面
  • 增加更广泛的Markdown语法支持
  • sticker常驻右下角，且跟随页面大小而缩放
  • 每次刷新页面时从stickers中随机挑选一个显示（sticker的约稿还未结束）

文件结构

Chirpy的部分文件架构如下，了解这些将有助于后续的文件修改：

Root
├─_data (存储了部分网页配置)
│  └─locales (语言本地化)
├─_includes (为不同功能预先写好的html模块，可以在使用时直接include)
├─_javascript
├─_layouts (不同的layout预设以供页面选择)
├─_plugins
├─_posts (文章存储的位置)
├─_sass (CSS文件)
├─_tabs (Chirpy创建的Collection，对应侧边栏的标签)
└─assets (网页所需的素材)

增大侧边栏的网站头像大小

网站头像（avatar）主要由内部的图片和外框组成，前者定义于/_includes/sidebar.html，后者定义于/_sass/addon/commons.scss，要想要调整头像大小，就要同时修改二者的大小定义。

修改sidebar.html

文件中对于头像文件的定义位于header中：

1
2
3
4
5

<a href="/" id="avatar" class="rounded-circle">
      <!-- 省略会被Jekyll读取的一些代码 -->
        <img src="" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
      <!-- 省略会被Jekyll读取的一些代码 -->
</a>

其中，width和height均为固定值，我将其扩展至120px。

修改commons.scss

文件中对于头像外框的定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  #avatar {
    display: block;
    width: 7rem;
    height: 7rem;
    overflow: hidden;
    box-shadow: var(--avatar-border-color) 0 0 0 2px;
    transform: translateZ(0); /* fixed the zoom in Safari */

    img {
      transition: transform 0.5s;

      &:hover {
        transform: scale(1.2);
      }
    }
  }

其中，width和height均为固定值，我将其扩展至9rem。

在侧边栏添加“杂项”标签

Chirpy定义了名为tabs的Collection，_tabs文件夹中的md文件决定了侧边栏标签的数量和样式，而_data/locales下的yml文件决定了所有标签的本地化翻译，包括侧边栏。tabs在config.yml中的定义如下：

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

collections:
  tabs:
    output: true
    sort_by: order

defaults: # 对应type的默认配置
  - scope:
      path: ""
      type: tabs # see `site.collections`
    values:
      layout: page
      permalink: /:title/

添加侧边栏标签需要完成以下操作：

  • 在_tabs下新建misc.md文件，选择合适的layout并编辑内容
  • 在_data/locales中为各语言添加翻译

另外，根据实测，如果locales中的对应内容没有翻译，Chirpy会自动将*.md的文件名（Name）以全大写的形式作为标题（Title）。

image-20240913190536336

新建misc.md

作为tab的md文件Front Matter内一般有如下内容：

1
2
3
4
5

---
layout: 布局预设
icon: 标签中显示的图标
order: 标签的顺序，从0开始
---

layout源于_layouts中的文件名，我直接使用了自带的page预设。另外，我添加了toc: true以强制启用目录。

icon源于Font Awesome，在官网上可以找到各个图标的内部名称，将该名称填入即可生效。Chirpy目前支持到最新的V6免费版，最终我选择了fas fa-hard-drive作为图标。

增加本地化翻译

本地化翻译就比较简单，只需要找到对应语言的yml文件，增加相关内容即可，例如：

1
2
3
4
5
6
7
8
9

# The tabs of sidebar
tabs:
  # format: <filename_without_extension>: <value>
  home: 首页
  categories: 分类
  tags: 标签
  archives: 归档
  misc: 杂项 # 手动增加的内容
  about: 关于

相关变量的命名都非常直观，直接在tabs下增加一项即可。不过，受限于语言水平，我最终只增加了简体中文、繁体中文、韩语、俄语、法语和英语的翻译（官方居然没有日语的翻译，之后有机会可以自己手动翻译和添加）。

增加更广泛的Markdown语法支持

众所周知，Markdown本身的语法非常简单，能够实现的功能十分有限，对于更加高级的排版需求则无能为力。因此，一些Markdown的衍生语法应运而生，从而完善了Markdown的撰写体验。但是，Jekyll默认并没有启用这些衍生语法，对于html的标签支持也并不完善，而我个人使用Typora编辑Markdown文件，这就导致许多在Typora上可以实现的方法不被Jekyll支持。

GFM（Gtihub Flavored Markdown）语法是一个比较经典的Markdown规范，提供了相当丰富的功能。Jekyll使用Kramdown作为默认的Markdown渲染器，并默认使用GFM作为默认选项，但在实际使用中，我发现Chirpy似乎并没有正常识别GFM中的特殊语法，因此我在config.yml中显性声明了GFM的使用：

1
2

kramdown:
  input: GFM

在画面右下角添加Sticker

添加固定图片的方式有很多，为了方便对代码进行修改，我选择在_includes中新建background.html文件作为模板，并在其他layout中进行引用。

创建background.html

由于Chirpy大量采用了非透明的区域划分，如果直接将图片放在最底层，大部分图片都会被遮挡，因此我考虑通过将图片置于顶层+设置透明度的方式解决问题。最初，我想到直接用css，指定bottom: 0; right: 0完成，但是发现效果并不好，因为图片并不能缩放，同样的图像大小，虽然在桌面端显示正常，但在移动端会占据大量的显示面积，非常影响阅读：

image-20240913195650396

如果以百分比制定宽度，例如width: 20%，虽然可以做到图片随页面宽度变化，但由于图片的锚点坐标在初始化时已经确立，如果拉伸画面，图片将会出现显示不全等问题。另外，width等数据的百分比实际上取决于父级标签，在这里即为整个页面的大小，然而由于侧边栏在宽度不足时会自动隐藏，虽然此时画面上并没有显示侧边栏，但仍然会被记入页面大小中，这就会导致缩放比例失调。最终，我使用了css+js的方式，动态地改变sticker的宽度：

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

<style>
    #backgroundImg {
        position: fixed;
        bottom: 0;
        right: 0;
        height: auto;
        width: 0px;
        background-image: url('/assets/img/background/mana.png');
        opacity: 0.5;
        background-size: cover;
        pointer-events: none;
        z-index: 999;
    }
</style>

<script>
    function setBGSize() { 
        const topbar = document.getElementById("topbar-wrapper");
        const backgroundImg = document.getElementById("backgroundImg");
        // 根据topbar的长度设置背景图片的宽度
        backgroundImg.style.width = parseInt(topbar.offsetWidth) * 0.4 + 'px';
        // 根据背景图片的宽度设置其高度
        backgroundImg.style.height = backgroundImg.offsetWidth + 'px';
    }
window.onload = setBGSize; // 初始化时调用
window.onresize = setBGSize; // 窗口缩放时调用
</script>

<div id="backgroundImg"></div>

其中，由于画面中的上边栏（topbar）始终存在，并且会随着宽度变化而变化，因此选择将背景尺寸与上边栏的宽度按比例进行绑定，并在页面初始化/窗口缩放时自动匹配。除此之外，在样式表中还使用pointer-events: none关闭点击响应，避免无法点击被图片覆盖的内容，使用z-index: 999将图片置于最顶层。

在引用文件时，我大多使用相对路径，例如assets/img/background/mana.png，且没有出现任何问题。但在上述代码中，如果你位于其他tab的页面，图片将无法引用的问题，例如，在“归档”标签下，控制台会提示找不到/archive/assets/img/background/mana.png。这似乎是因为每一个tag都相当于网页中的一个二级目录，正如前文所说，tabs本身就是一个collection，而Jekyll会为每一个指定permalink的collection在对应位置新建目录，如果使用相对位置，工作目录将会切换到二级目录，而所有图片素材都是存在于根目录下的/assets/img下，导致找不到素材；而在我之前的设定中为了简化永久链接的长度，将所有的文章都作为根目录下的单独页面存在，因此即使使用相对路径也不会暴露问题。因此，Jekyll在进行素材引用时最好使用绝对路径，算是自己踩的一个小坑。

在layout模板中添加引用

Jekyll可以引用其他文件，因此我在所有layout模板中都插入了相关代码，这样对应的模板被调用时，我撰写的代码也会被自动插入。

image-20240913213853459

最终效果如下：

demostration

Reference

网络, 网页设计
Chirpy CSS JavaScript
本文由作者按照 CC BY 4.0 进行授权