复活

Thu, 13 Aug 2026 00:00:00 GMT

好消息！qiqiblog.top 复活了！

文章模板

Wed, 03 Dec 2025 00:00:00 GMT

此模板使用 Astro 构建。对于本指南中未提及的内容，您可以在 Astro 文档中找到答案。

每篇文章都应包含以下固定格式的 YAML 头信息：

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

属性	描述
`title`	博文的标题。
`published`	博文发布日期。
`description`	博文的简短描述。显示在索引页面上。
`image`	博文的封面图片路径。<br/>1. 以 `http://` 或 `https://` 开头：使用网络图片<br/>2. 以 `/` 开头：用于 `public` 目录中的图片<br/>3. 不带任何前缀：相对于 Markdown 文件
`tags`	博文的标签。
`category`	博文的分类。
`draft`	如果此博文仍是草稿，则不会被显示。

文章文件的数据结构

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

GitHub 仓库卡片

添加链接到 GitHub 仓库的动态卡片，页面加载时，仓库信息将从 GitHub API 拉取。

::github{repo="Fabrizz/MMM-OnSpotify"}

使用代码 ::github{repo="<owner>/<repo>"} 创建 GitHub 仓库卡片。

告诫框

支持以下类型的告诫框：note tip important warning caution

:::note 强调用户即使在略读时也应注意的信息。 :::

:::tip 有助于用户更顺利完成任务的可选信息。 :::

:::important 用户成功所必需的关键信息。 :::

:::warning 因潜在风险而需要用户立即注意的关键内容。 :::

:::caution 操作可能产生的负面后果。 :::

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

自定义标题

告诫框的标题可以自定义。

:::note[我的自定义标题] 这是一个带有自定义标题的注意框。 :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub 语法

[!TIP] 同样支持 GitHub 语法。

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

剧透

您可以在文本中添加剧透隐藏内容。文本同样支持 Markdown 语法。

内容 :spoiler[被隐藏了 ayyy]!

The content :spoiler[is hidden **ayyy**]!

一级标题

段落之间以空行分隔。

项目列表：

this one
that one
the other one

块引用

二级标题

有序列表：

first item
second item
third item

三级标题

嵌套列表：

首先，获取这些配料：

carrots
celery
lentils

这是一个指向一个网站、一个本地文档和当前文档中一个节标题的链接。这是一个脚注 ^1。

后面是一条水平分割线。

这是一个“行块”：

| Line one | Line too | Line tree

内联数学公式如下所示：

$\omega = d\phi / dt$

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

另请注意，您可以对希望按字面显示的所有标点符号进行反斜杠转义，例如：`foo`、*bar* 等。

插入YouTube视频

只需复制来自 YouTube 或其他平台的嵌入代码，并将其粘贴到 Markdown 文件中。

YouTube

Bilibili

常规语法高亮

console.log('This code is syntax highlighted!')

字体格式

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

代码编辑器框架

console.log('Title attribute example')

<div>File name comment example</div>

终端窗口框架

echo "This terminal frame has no title"

Write-Output "This one has a title!"

覆盖框架类型

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

标记整行和行范围

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

选择行标记类型（标记、插入、删除）

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

向行标记添加标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

在单独的行上添加长标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

使用类 Diff 语法

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

结合语法高亮与类 Diff 语法

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

标记行内的个别文本

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

正则表达式

console.log('The words yes and yep will be marked.')

转义正斜杠

echo "Test" > /home/test.txt

选择内联标记类型（标记、插入、删除）

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

配置每个代码块的自动换行

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

配置换行后的缩进

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

代码块折叠

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

显示每个代码块的行号

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

更改起始行号

console.log('Greetings from line 5!')
console.log('I am on line 6')

Qiqi's Blog

复活