Karene's Blog
回到文章列表
参考

这个博客能写成什么样

约 2 分钟

这篇是留给自己的参考。写文章的时候不确定某个格式怎么写、写出来长什么样，翻这一篇就行。

需要的话可以直接把 src/content/posts/markdown-cheatsheet.md 复制一份当模板。

每篇文章的开头

文件最上面那段用 --- 包起来的东西叫 frontmatter，是给网站看的说明，不会显示在文章里：

---
title: 文章标题
date: 2026-07-26
description: 一句话摘要，会显示在首页头条和分享卡片上
tags: ['CSS', '笔记']
series: linear-algebra
order: 2
draft: false
---

只有 title 和 date 是必填的。几个可选项：

  • description —— 建议写。只有最新那篇会在首页显示摘要
  • tags —— 标签，可以写几个。第一个会显示在标题上方
  • series —— 属于哪个合集，填 src/series.ts 里定义的 key。拼错了构建会报错
  • order —— 在合集里排第几，不写就按日期排
  • draft: true —— 草稿。写着一半不想发布就加上这行，网站上就看不到了

标题

## 二级标题
### 三级标题

一级标题不用写，文章标题会自动用 frontmatter 里的 title。二级标题上方会自动出现一条细分割线，起到分栏的作用。

三级标题长这样

再往下的层级基本用不到，一篇笔记分两层就够清楚了。

强调和链接

加粗用两个星号，斜体用一个，行内代码用反引号。

链接写成 [显示的文字](网址)，比如 Astro 官方文档。

列表

无序列表：

  • 第一项
  • 第二项
    • 缩进两个空格就是子项
  • 第三项

有序列表：

  1. 第一步
  2. 第二步
  3. 第三步

引用

引用会显示成衬线斜体，左边带一条红线。

适合放别人说过的话，或者你想强调的一句结论。

代码

行内的写法是 const x = 1。整块代码用三个反引号包起来，后面跟语言名字就会自动上色：

```css
.header {
  display: flex;
}
```

效果：

// 语言写 javascript、css、html、python、bash 等都支持
function greet(name) {
  return `你好，${name}`;
}

console.log(greet('世界'));

代码太长时会在框子里横向滚动，不会把页面撑宽。

表格

| 属性 | 作用 |
| --- | --- |
| gap | 元素之间的间距 |

效果：

属性作用常用值
gap元素之间的间距1rem
padding盒子内部的留白1rem 2rem
margin盒子外部的间距auto

图片

图片文件放进 src/content/posts/attachments/，然后用双括号插进来：

![[screenshot.png|这里写图片说明]]

| 后面那句是图片说明。图片加载失败时会显示它，用读屏软件的人也靠它了解图片内容 —— 别偷懒留空。

标准 Markdown 的写法也能用，效果一样：

![这里写图片说明](./attachments/screenshot.png)

放在 attachments/ 里的图片会被自动优化（转成 webp、写进宽高、懒加载），而且读者点一下就能放大。

更多写法（公式、双链、提示框）看 obsidian-math。

分割线

三个减号单独一行，会显示成居中的三个点：

用来分隔正文和结尾的话，比一条横线好看。

发布的流程

写完保存，然后：

git add .
git commit -m "写了新文章"
git push

推上去大概一分钟后，Cloudflare 就会自动更新网站。