基础设置 - 云弈斋

基础站点配置#

保存设置的文件位置在src目录下的config.ts文件中

网站基础设置

1
export const siteConfig: SiteConfig = {
2
  title: "云弈斋",
3
  subtitle: "Blog",
4
  lang: "zh_CN", // 网站的默认语言，支持'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th', 'vi'
5
  themeColor: {
6
    hue: 250, // 网站默认主题色, 范围是0 - 360
7
    fixed: false, // 是否隐藏网页的主题色选择器，false为显示。当不知道选什么颜色可以先在网页中手动调一下试试。
8
  },
9
  banner: {
10
    enable: true,
11
    src: "https://t.alcy.cc/pc", // 网站头图，使用相对地址也就是最开始不是斜杠的话默认是src目录下的内容，/加地址可以访问public目录下对应的内容，我这里使用的是随机在线图片
12
    position: "center", // 头图位置，默认是居中 支持'top', 'center', 'bottom'
13
    credit: {
14
      enable: false, // 是否显示头图的版权信息
15
      text: "", // 版权信息的具体内容
16
      url: "", // 一个指向原始作品或者作者的url，也可以不用输入，这不是必选项
17
    },
18
  },
19
  toc: {
20
    enable: true, // 是否在文章的右侧显示文章的大纲
21
    depth: 2, // 大纲的最大深度，如果是2的话就是最多显示到二级标题
22
  },
23
  favicon: [
24
    // 如果这个数组是空的就会使用默认的图标，如果有多个图标可以添加多个元素，网站会根据你的内容进行对应的适配
25
    {
26
      src: "/favicon/favicon.ico", // 图标路径，默认是public目录下的内容
27
      // theme: "light", // 可选 支持'light', 'dark' 对应的是网站当前的主题是亮色还是暗色，可以对不同情况进行适配
28
      // sizes: "32x32", // 可选 图标的大小，会自动请求对应大小的图标
29
    },
30
  ],
31
};

顶部导航栏

LinkPreset是一个枚举类型，如果是内部页面的导航建议在LinkPreset中添加并增加对应的i18n，例如友链等内容

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,  // 首页
4
    LinkPreset.Archive,  // 归档页
5
    LinkPreset.About,  // 关于页
6
    {
7
      name: "统计",
8
      url: "https://umami.gabrlie.cn/share/aYsGHqFzCOLYe7IQ/astro.gabrlie.cn", // 自定义链接的地址
9
      external: true, // 点击后是否打开一个新标签页来显示，false就会直接在当前页面进行跳转
10
    },
11
  ],
12
};

侧边栏

1
export const profileConfig: ProfileConfig = {
2
  avatar: "https://avatars.githubusercontent.com/u/57052263?v=4", // 头像地址，规则与banner的头图地址规则一样，相对地址为src目录，绝对地址是public目录，链接除外
3
  name: "Gabrlie",  // 名称
4
  bio: "Code create the world.",  // 简介
5
  links: [  // 你的社交地址，可以输入邮件，github，b站账户等内容
6
    {
7
      name: "GitHub",  // 名称
8
      icon: "fa6-brands:github",  // 图标，更多图标在 https://icon-sets.iconify.design
9
      url: "https://github.com/gabrlie",  // 跳转地址
10
    },
11
  ],
12
};

不知道这个做什么用的默认就行了，有需求的可以自己修改

1
export const licenseConfig: LicenseConfig = {
2
  enable: true,
3
  name: "CC BY-NC-SA 4.0",
4
  url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
5
};

代码块样式

fuwari主题使用了Expressive Code增强代码块相关文档 Expressive Code

1
export const expressiveCodeConfig: ExpressiveCodeConfig = {
2
  // Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
3
  // Please select a dark theme, as this blog theme currently only supports dark background color
4
  theme: "github-dark",
5
};

页脚配置#

页脚的内容在src/components/Footer.astro中，不仅可以修改信息与添加备案信息，也可以添加其它代码例如站点统计。.astro文件类似于tsx与vue，具体的语法可以前往astro的官方文档查看。

1
---
2

3
import { profileConfig } from "../config";
4

5
const currentYear = new Date().getFullYear();
6
---
7

8
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
9

10
<div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6">
11
    <div class="transition text-50 text-sm text-center flex flex-wrap justify-center items-center gap-2">
12
        <!-- 版权信息 -->
13
        <div class="github-badge">
14
            <span class="badge-subject">Copyright</span>
15
            <span class="badge-value bg-blue">©{currentYear} {profileConfig.name}</span>
16
        </div>
17

18
        <!-- 技术支持 -->
19
        <div class="github-badge">
20
            <span class="badge-subject">Powered by</span>
21
            <a href="https://astro.build" target="_blank" class="badge-link">
22
                <span class="badge-value bg-green">Astro</span>
23
            </a>
24
        </div>
25

26
        <!-- 主题信息 -->
27
        <div class="github-badge">
28
            <span class="badge-subject">Theme</span>
29
            <a href="https://github.com/saicaca/fuwari" target="_blank" class="badge-link">
30
                <span class="badge-value bg-orange">Fuwari</span>
31
            </a>
32
        </div>
33
    </div>
34

35
    <style>
36
        /* 徽章样式 */
37
        .github-badge {
38
            display: inline-block;
39
            border-radius: 4px;
40
            text-shadow: none;
41
            font-size: 12px;
42
            color: #fff;
43
            line-height: 15px;
44
            background-color: #abbac3;
45
            margin: 2px;
46
            overflow: hidden;
47
        }
48

49
        .badge-subject {
50
            display: inline-block;
51
            background-color: #4d4d4d;
52
            padding: 4px 6px;
53
            border-top-left-radius: 4px;
54
            border-bottom-left-radius: 4px;
55
        }
56

57
        .badge-value {
58
            display: inline-block;
59
            padding: 4px 6px;
60
            border-top-right-radius: 4px;
61
            border-bottom-right-radius: 4px;
62
        }
63

64
        .badge-link {
65
            text-decoration: none;
66
            color: inherit;
67
            display: inline-block;
68
        }
69

70
        .bg-blue { background-color: #007ec6 }
71
        .bg-orange { background-color: #ffa500 }
72
        .bg-green { background-color: #3bca6e }
73

74
        /* 暗色模式适配 */
75
        @media (prefers-color-scheme: dark) {
76
            .github-badge {
77
                background-color: #3a4a55;
78
            }
79
            .badge-subject {
80
                background-color: #2d2d2d;
81
            }
82
        }
83
    </style>
84
</div>
85

86
<script defer src="https://umami.gabrlie.top/script.js" data-website-id="dd2cf105-7f2b-4a4b-b9ec-f7341431bd97"></script>

单个文章配置#

这个内容在每个文章的最上方，使用pnpm new-post <filename>创建新文章后会自动添加对应模板，文章的存放位置为src/content/posts/中

1
---
2
title:         <!-- 标题，默认这里会填入创建时的文章名称 -->
3
published:       <!-- 发布日期，创建时会自动填入当前时间 -->
4
description: ''    <!-- 简介 -->
5
image: ''      <!-- 封面 -->
6
tags: []      <!-- 标签，多个用逗号隔开 -->
7
category: ''    <!-- 分类，会自动创建对应分类 -->
8
draft: false     <!-- 是否为草稿，草稿只有开发模式下才可见 -->
9
lang: ''      <!-- 语言，默认使用基础设置中的语言设置 -->
10
---