1568 字
8 分钟
文章模板
此模板使用 Astro 构建。对于本指南中未提及的内容,您可以在 Astro 文档 中找到答案。
每篇文章都应包含以下固定格式的 YAML 头信息:
---title: My First Blog Postpublished: 2023-09-09description: This is the first post of my new Astro blog.image: ./cover.jpgtags: [Foo, Bar]category: Front-enddraft: 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.mdGitHub 仓库卡片
添加链接到 GitHub 仓库的动态卡片,页面加载时,仓库信息将从 GitHub API 拉取。
Waiting for api.github.com...
使用代码 ::github{repo="<owner>/<repo>"} 创建 GitHub 仓库卡片。
告诫框
支持以下类型的告诫框:note tip important warning caution
NOTE强调用户即使在略读时也应注意的信息。
TIP有助于用户更顺利完成任务的可选信息。
IMPORTANT用户成功所必需的关键信息。
WARNING因潜在风险而需要用户立即注意的关键内容。
CAUTION操作可能产生的负面后果。
:::noteHighlights information that users should take into account, even when skimming.:::
:::tipOptional 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 语法。
内容
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
内联数学公式如下所示:
另请注意,您可以对希望按字面显示的所有标点符号进行反斜杠转义,例如:`foo`、*bar* 等。
插入YouTube视频
只需复制来自 YouTube 或其他平台的嵌入代码,并将其粘贴到 Markdown 文件中。
YouTube
Bilibili
常规语法高亮
console.log('This code is syntax highlighted!')字体格式
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 165166 167 168 169 170 171172 173 174 175 176 177
Full RGB colors:ForestGreen - RGB(34, 139, 34)
Text formatting: Bold Dimmed Italic Underline代码编辑器框架
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 framefunction 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'}向行标记添加标签
<button role="button" {...props} value={value} className={buttonClassName} disabled={disabled} active={active}> {children && !active && (typeof children === 'string' ? <span>{children}</span> : children)}</button>在单独的行上添加长标签
<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 insertedthis line will be marked as deletedthis 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 wrapfunction 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=falsefunction 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=falsefunction 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 collapsedimport { 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 defaultengine.doSomething(1, 2, 3, calcFn)
function calcFn() { // You can have multiple collapsed sections3 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 againengine.closeConnection()engine.freeMemory()engine.shutdown({ reason: 'End of example boilerplate code' })显示每个代码块的行号
// This code block will show line numbersconsole.log('Greetings from line 2!')console.log('I am on line 3')// Line numbers are disabled for this blockconsole.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
-
脚注文本放在这里。 ↩