介绍#
这是我开发的 Astro 开源博客主题，名字叫Astro-Yi，喜欢的可以点个 star 啦，感谢关注，欢迎 PR！
配置 Astro-Yi#
必不可少的配置（必须）#
Astro 项目的配置文件在/astro.config.mjs，其中有一些配置是必不可少的：
export default defineConfig({
site: "https://cirry.cn", // 请在这里修改为自己的网站地址
})
博客信息配置#
在 Astro-Yi 主题的配置文件src/consts.ts，其中有一些配置是很重要的：
// ...
export const site = {
title: "Cirry's Blog", // required
favicon: '/favicon.svg', // required
author: "Cirry", // required
avatar: '/avatar.png', // required
description: '',
motto: '',
url: 'https://cirry.cn', // required
recentBlogSize: 5, // required
archivePageSize: 25, // required
postPageSize: 10, // required
indexPageSize: 10, // required
beian: '',
}
// ...
favicon是网站图标存放位置。文件位置在/public/favicon.svg，请替换为自己的网站图标。
avatar是网站头像存放位置。文件位置在：/public/avatar.png，请替换为自己的网站头像。
评论系统配置#
/**
* enable 是否开启评论功能 true启用，false关闭
* waline 的服务端地址
* pageSize： The desired number of comments shown in each page.
* wordLimit: 评论字数限制。填入单个数字时为最大字数限制。设置为 0/或不设置时无限制
* requiredMeta： 评论必填项，可以是nick，mail，link中的一个或多个
* count: 侧边栏查询最近评论数
* pageview: 文章浏览量统计
* reaction: 文章增加表情互动功能
* whiteList: 文章反应白名单
*/
export const comment = {
enable: true, // 必填，设置为开启评论系统
serverUrl: "https://xxx.xx.app", // 必填，修改为您的Waline服务端地址
pageSize: 20, //
wordLimit: '',
requiredMeta: ["nick", "mail"], // 必填
count: 5,
pageview: true,
reaction: false,
whiteList: ['/message/', '/friends/', '/donate/'],
}
reaction并不是只能设置true/false，你也可以传入一个数组里面是图片的地址来实现自定义表情，具体详情可以参考这里文章反应。
赞助系统配置#
/**
* 赞助系统
* enable: true 开启, false 关闭
* tip: 赞助提示
* wechatQRCode: 微信二维码地址，图片地址应放在public目录下
* alipayQRCode: 支付宝二维码地址，图片地址应放在public目录下
* paypalUrl: Paypal二维码地址
* @type {{paypalUrl: string, alipayQRCode: string, enable: boolean, wechatQRCode: string, tip: string}}
*/
export const donate = {
enable: true,
tip: "感谢大佬送来的咖啡☕",
wechatQRCode: "/WeChatQR.png",
alipayQRCode: "/AliPayQR.png",
paypalUrl: "https://paypal.me/cirry0?country.x=C2&locale.x=zh_XC",
}
友情链接配置#
/**
* 友情链接
* name: 博客名称
* url: 博客地址
* avatar: 博客头像
* descript: 博客描述
* @type {[{name: string, description: string, avatar: string, url: string}]}
*/
export const friendlyLinks = [
{
name: "Cirry's Blog",
url: 'https://cirry.cn',
avatar: "https://cirry.cn/avatar.png",
description: '前端开发的日常'
},
]
建议的配置#
Astro-yi 中有很多配置可以丰富我们的页面功能，我有以下建议：
-
建议启用 Waline 评论系统。如果不会安装 Waline 系统，可以参考Waline 官网或者安装 waline 评论功能。
-
备案号，如果您是中国大陆的使用者，建议添加。
-
个人链接，让更多的人认识您和您的网站。
写作技巧#
Markdown 文档规范#
如果使用 Astro 作为博客的话，必不可少的需要使用到 Markdown，基础的规范可以参考 Github 的写作规范基本撰写和格式语法。
在 Vscode 中自动生成 frontmatter#
写每一篇文章中，如果需要手动去复制信息并填写日期的话，也是一件很复杂的事情，所以我提供了一个在使用 Vscode 编写博客时自动生成 frontmatter 的方法，具体内容可以参考这里Vscode 添加 Markdown-Frontmatter 代码片段。
编写博客页面#
在 Yi 的主题下，你只需要在src/content/blog中新建一个 md 文档，就可以开始编写你的博客了。
根据 Astro 的 Markdown 文档标准，每个文档都应该有自己的 frontmatter 信息，并在 md 中文档的头部添加---作为开头和结尾来标记 frontmatter，这给我们带来了很多的便利:
-
比如我们想要给文档添加标签和分类或者置顶某些文档，我们可以在 Frontmatter 中给文档添加一些属性，比如
tags,sticky等等。 -
比如为避免使用中文作为博客路径和文件名称，我们可以给 md 文档单独设置
title为中文标题，文件名使用英文并用-作为单词连接符号。
在 Astro-Yi 中，您只需要最简单的设置文档标题title和创作日期date标签，下面就是一个 Md 文档最简单的 frontmatter 的设置：
---
title: 菩萨蛮·花明月暗笼轻雾
date: 2024-03-05
---
如果您觉得这样的文档属性不太够用，Yi 也提供了更多的属性供您使用，这是一个完整的属性配置示例：
---
title: 菩萨蛮·花明月暗笼轻雾 // 文件名称
description: 此词当是李煜描写自己与小周后幽会之情景，创作于北宋乾德二年（公元964年）前后。 // 文档描述
date: "2023-01-25T10:23:31.210Z" // 发布日期
tags: // 文档标签支持数组和字符串
- 诗词
category: 诗词 // 文档分类支持数组和字符串
sticky: 100 // 文档置顶权重，数字越大，权重越大
slug: poem/ci // 文档永久链接
mathjax: false // 是否开启公式显示
draft: false // 是否为草稿
toc: true // 是否需要文章标题目录
donate: false // 是否需要开启赞助功能
comment: false // 是否需要开启评论功能
---
以上的属性除了title和date，其余都是可选的或者是有默认值的，您可以在src/content/config.js中修改他们是否可选或者默认值。
编写动态页面#
在 Yi 的主题下，你只需要在src/content/feed中新建一个 md 文档，就可以开始编写你的动态了。
动态页面应该是类似朋友圈、微博、推特这样，作为一个临时想说或者想吐槽一些什么的地方。
所以没有给它添加过多的 frontmatter 限制，您甚至不需要设置title（当然这样的内容也不需要 title），但是我们知道发布一个消息，最重要的属性就是发布时间，所以需要设置date。
所以动态页面的 Md 文档的 frontmatter 的基础设置应该是这样：
---
date: 2023-01-25 10:23:31
---
加载本地图片#
将你的图片文件放在/public/images目录下，如果没有images文件夹就创建一下 ，然后在 Markdown 中使用绝对路径/images/xx.png引用即可。
比如您有一张图片名为xxx.png， 将其移动到/public/images/2024/文件夹下，那您只需要在 md 文件中，这样引入就可以正常使用了。
修改图标#
博客中的所有的图标都是使用开源图标库remixicon，可以自行替换自己喜欢的图标。