博客主题调整

添加自定义 css 和 js 文件

博客根目录下的 source 文件夹下创建 css 和 js 文件夹，分别用来存放自定义 css 和 js ，然后在主题配置文件的 inject 下引入。注意文件路径要用绝对路径，如 /css/自定义.css。css 文件一般在 head 引入，js 文件一般在 bottom 里引入，特殊情况除外。

1
2
3
4
5
6
7
8
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/custom.css">
    # 引入多个文件可在下面另加一行，格式和上面一样。
  bottom:
    # 自定义js
    - <script src="/js/xxx"></script>

手机端文章顶部遮罩居中显示

在自定义 css 中添加如下内容

1
2
3
4
#page-header.post-bg #post-top-cover::after {
  -webkit-box-shadow: 0px -130px 300px 60px var(--anzhiyu-bar-background) inset;
  box-shadow: 0px -130px 300px 60px var(--anzhiyu-bar-background) inset;
}

代码字体修改

在自定义 css 中引入相关字体文件

1
2
3
4
5
@font-face {
  font-family: "FiraCode";
  font-display: swap;
  src: url("/fonts/FiraCode.woff2") format("truetype");
}

修改主题配置文件

1
2
3
4
5
font:
  global-font-size: 16px
  code-font-size:
  font-family:
  code-font-family: FiraCode

新增导航页

使用 intCard卡片式外链标签和 flink 友链标签写一个简单的导航页。在/blog/source下创建一个名为 nav 的文件夹，再到该文件夹下创建一个index.md文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title:
date: 2023-08-01
comments: true
aside: false
top_img: false
---

{% intCard link img tip cardTitle %}
{% flink %}

- class_name:
  class_desc:
  flink_style: anzhiyu
  link_list: - name：
  link:
  avatar:
  descr:
  {% endflink %}

主题原本的 intCard 外链标签在宽屏下不会全屏显示，在自定义 css 中添加以下内容使其全屏显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.introduction-card {
  width: 100%;
  height: 260px;
}
@media screen and (max-width: 1200px) {
  .introduction-card {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .introduction-card {
    width: 100%;
  }
}