博客主题调整

添加自定义 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 的文件夹，再到该文件夹下创建一个<font style="color:rgb(38, 38, 38);">index.md</font>文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
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 %}

主题原本的 <font style="color:rgb(38, 44, 49);">intCard</font> 外链标签在宽屏下不会全屏显示，在自定义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%;
  }
}