博客使用-基础篇

2025年5月10日

前期准备

在使用本个人博客系统之前，您有些准备工作需要做，以下是您需要修改的文件，我已经高亮标注，同时添加了相关备注：

astro.config.mjs
文件夹src/
- 文件夹components/
  - Footer.astro
- 文件夹content/
  - 文件夹docs/
    index.mdx

1
export default defineConfig({
2
  site: 'https://canjie.org',
3
//博客系统的URL，是否是外链的判断标准，修改为site: 'https://您的域名',
4
...
5
starlightGiscus({
6
          repo: 'tgimgcdn/blog',
7
//GIthub用户名/仓库名，评论系统需要，修改为您的GIthub用户名/仓库名
8
          repoId: 'R_kgDOOjxhOw',
9
//GIthub仓库ID，修改为您的GIthub仓库ID
10
          category: 'General',
11
          categoryId: 'DIC_kwDOOjxhO84Cp6EN',
12
//讨论类别ID，修改为您的讨论类别ID
13
          mapping: 'pathname',
14
          strict: '0',
15
          reactionsEnabled: '1',
16
          emitMetadata: '0',
17
          inputPosition: 'bottom',
18
          theme: 'preferred_color_scheme',
19
          lang: 'zh-CN',
20
          loading: 'lazy',
21
          crossorigin: 'anonymous'
22
        }),
23
...
24
authors: {
25
            cmssky: {
26
              name: 'cmssky',
27
//作者名称，修改为您的作者名称
28
              picture: 'https://img20.360buyimg.com/openfeedback/jfs/t1/297564/4/2943/9987/6816f2f6Ff7a97a86/37decef475f8f719.jpg',
29
//作者头像，修改为您的作者头像
30
              url: 'https://canjie.org',
31
//作者网站，修改为您的网站
32
            },
33
...
34
title: '参界说',
35
//网站标题，修改为您的网站标题
36
      components: {

1
<span class="copyright">©2023 - 2025 By 参界说</span>
2
//页脚标题，修改为您自己的页脚标题
3
...
4
function updateRunDays() {
5
        const startDate = new Date('2023-01-01T00:00:00+08:00'); // 使用北京时间
6
//用于显示页脚处的网站运行时间，修改为您的网站实际建立时间
7
        const now = getBeijingTime();

1
---
2
title: 分享技术，记录生活!
3
//首页显示的文字，修改为您希望展示的文字
4
description: 欢迎来到我的博客
5
template: splash

评论系统相关参数的修改，可以参考博客使用-设置评论系统

编写博客

博客文章位于blog目录，您可以将您编写的mdx或者md文件上传到这个目录

如果需要创建分类，也是在blog目录下创建新的文件夹，比如我就在blog目录下面创建了一个tech的文件夹，所有的技术类的文章都放置在这个文件夹里面

文件夹src/
- 文件夹content/
  - 文件夹docs/
    文件夹blog/
    文件夹tech/
    …

温馨提示

文件夹src/
- 文件夹content/
  - 文件夹docs/
    文件夹blog/
    文件夹tech/
    …
    文件夹categories/
    index.mdx
    tech.mdx

tech.mdx内容如下，如果您创建的其它分类，相应修改内容即可，需要修改的地方我都标注好了。

1
---
2
title: 技术文章
3
description: 查看所有技术相关文章
4
template: splash
5
---
6

7
import CategoryList from '../../../components/CategoryList.astro';
8

9
<CategoryList category="tech" />

如果上述工作您都准备好了，那么恭喜您，您可以开始编写您的第一篇博客文章了，比如您创建了一个life的分类，那么您可以在该文件夹里面创建一个mdx文件，例如My-first-blog.mdx（实际上您完全可以使用My first blog.mdx），作为您的第一篇博客文章。

文件夹src/
- 文件夹content/
  - 文件夹docs/
    文件夹blog/
    文件夹life/
    My-first-blog.mdx
    文件夹categories/
    index.mdx
    life.mdx

My-first-blog.mdx的内容如下,必填的选项我都已经高亮标注，同时添加了相关备注：

1
---
2
title: "我的第一篇博客"
3
//必填项，博客标题
4
excerpt: "这是我的第一篇博客，欢迎您的到来！"
5
//选填项，博客摘录，介绍博客的大致内容，支持基本的 Markdown 格式，不需要可以删除该行
6
giscus: true
7
//选填项，开启评论，默认所有页面关闭评论，如需开启评论需保留，不需要可以删除该行
8
date: 2025-05-09
9
//必填项，博客发布日期
10
lastUpdated: 2025-05-10
11
//选填项，博客更新日期，如无更新日期可以删除该行
12
category: life
13
//选填项，博客分类，如果博客在/src/content/docs/blog文件夹里面，在此处设定博客分类会将博客自动归到life分类，如果博客在/src/content/docs/blog/life文件夹里面，会自动归为life分类
14
thumbnail: https://cdn.canjie.org/AgAD4BgAAmga2VQ.webp
15
//选填项，缩略图，可以为url，也可以为图片地址，如果为图片地址的话将文件置于/public文件夹下面，比如文件位于/public/images里面，则此处填写/public/images/My first blog.jpg 其中My first blog为图片名称，需更改为真实的图片名称，如果不填写此项，默认使用/public文件夹下面的social-card.webp文件
16
tags:
17
  - "博客"
18
  - "Blog"
19
//选填项，标签，每行一个
20
---
21
这是我的第一篇博客，欢迎您的到来！
22
This is my first blog, welcome!
23
//博客正文