1568 字
8 分钟
文章模板
2025-12-03

此模板使用 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   博文的封面图片路径。
1. 以 http://https:// 开头:使用网络图片
2. 以 / 开头:用于 public 目录中的图片
3. 不带任何前缀:相对于 Markdown 文件
tags    博文的标签。                                                                           
category  博文的分类。                                                                           
draft   如果此博文仍是草稿,则不会被显示。                                                                

文章文件的数据结构#

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

GitHub 仓库卡片#

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

Fabrizz
/
MMM-OnSpotify
Waiting for api.github.com...
00K
0K
0K
Waiting...

使用代码 ::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[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 语法。

内容 被隐藏了 ayyy!

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

一级标题#

段落之间以空行分隔。

项目列表:

  • this one
  • that one
  • the other one

块引用

二级标题#

有序列表:

  1. first item
  2. second item
  3. third item

三级标题#

嵌套列表:

  1. 首先,获取这些配料:
  • carrots
  • celery
  • lentils

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

后面是一条水平分割线。


这是一个“行块”:

| Line one | Line too | Line tree

内联数学公式如下所示:

ω=dϕ/dt\omega = d\phi / dt

I=ρR2dVI = \int \rho R^{2} dV

π=3.1415926535   8979323846  2643383279  5028841971  6939937510  5820974944   5923078164  0628620899  8628034825  3421170679  \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!')

字体格式#

Terminal window
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold:    Red Green Yellow Blue Magenta Cyan
- Dimmed:  Red Green Yellow Blue Magenta Cyan
256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
Full RGB colors:
ForestGreen - RGB(34, 139, 34)
Text formatting: Bold Dimmed Italic Underline

代码编辑器框架#

my-test-file.js
console.log('Title attribute example')

<div>File name comment example</div>

终端窗口框架#

Terminal window
echo "This terminal frame has no title"

PowerShell 终端示例
Write-Output "This one has a title!"

覆盖框架类型#

echo "Look ma, no frame!"

PowerShell Profile.ps1
# 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"

选择行标记类型(标记、插入、删除)#

line-markers.js
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.')

转义正斜杠#

Terminal window
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'
}

代码块折叠#

5 collapsed lines
// 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
3 collapsed lines
  const a = 1
  const b = 2
  const c = a + b
  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}
4 collapsed lines
// 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')

Footnotes#

  1. 脚注文本放在这里。

文章模板
https://qiqiblog.top/posts/模板/文章模板/
作者
Qiqi
发布于
2025-12-03
许可协议
CC BY-NC-SA 4.0