Goosequill

Goosequill Shortcodes 全量用法速查

Mon, 20 Apr 2026 00:00:00 GMT

目前可用的 shortcodes 如下： - `Alert` - `ImageCode` - `Video` - `Youtube` - `Bilibili` - `Steam` - `Spotify` - `CRT` ## 使用方式在 MDX 中，这些组件已经通过 `ExtendMarkdown.astro` 注入，所以你可以直接写： ```mdx Hello ``` 无需单独 import。 ## 1. `Alert` 用于渲染 GitHub 风格的提示块。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `type` | `'note' \| 'tip' \| 'important' \| 'warning' \| 'caution'` | `'note'` | 提示块类型 | ### 示例 ```mdx 这是一条提示信息。这是一条警告信息。 ``` ### 说明 - 内容通过默认插槽传入。 - 未传 `type` 时使用 `note`。 ## 2. `ImageCode` 用于渲染图片，并附带一组可组合的样式类。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `url` | `string` | — | 原图地址，必填 | | `url_min` | `string` | `undefined` | 压缩图地址；传入后页面展示压缩图，点击跳转原图 | | `alt` | `string` | `''` | 图片替代文本 | | `full` | `boolean` | `false` | 让图片占满内容宽度 | | `full_bleed` | `boolean` | `false` | 让图片突破内容区，使用更宽展示 | | `start` | `boolean` | `false` | 图片靠左浮动 | | `end` | `boolean` | `false` | 图片靠右浮动 | | `pixels` | `boolean` | `false` | 使用像素风缩放效果 | | `transparent` | `boolean` | `false` | 去掉背景式装饰，更适合透明图片 | | `no_hover` | `boolean` | `false` | 关闭悬停缩放效果 | | `spoiler` | `boolean` | `false` | 启用剧透遮挡效果 | | `solid` | `boolean` | `false` | 与 `spoiler` 配合使用，显示更强遮挡 | ### 示例 ```mdx ``` ### 说明 - `solid` 只有在 `spoiler` 为真时才会生效。 - `url_min` 存在时，组件会输出一个包裹图片的链接，点击后打开 `url`。 - `full`、`full_bleed`、`start`、`end` 这些布局类最好按场景选择，不建议同时混用太多。 ## 3. `Video` 用于渲染本地或远程视频，同样支持与图片一致的大部分样式类。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `url` | `string` | — | 视频地址，必填 | | `alt` | `string` | `''` | 作为 `aria-label` 使用的可访问性文本 | | `full` | `boolean` | `false` | 占满内容宽度 | | `full_bleed` | `boolean` | `false` | 更宽展示 | | `start` | `boolean` | `false` | 靠左浮动 | | `end` | `boolean` | `false` | 靠右浮动 | | `pixels` | `boolean` | `false` | 像素风渲染样式 | | `transparent` | `boolean` | `false` | 透明样式 | | `spoiler` | `boolean` | `false` | 剧透遮挡 | | `solid` | `boolean` | `false` | 与 `spoiler` 搭配时增强遮挡 | | `autoplay` | `boolean` | `false` | 自动播放 | | `controls` | `boolean` | `false` | 显示控制条 | | `loop` | `boolean` | `false` | 循环播放 | | `muted` | `boolean` | `false` | 静音 | | `playsinline` | `boolean` | `false` | 尽量以内联方式播放 | ### 示例 ```mdx ``` ### 说明 - 组件不会自动推断视频格式，直接把 `url` 填到 ``。 - `solid` 同样只在 `spoiler` 开启时有意义。 - 与 `ImageCode` 不同，`Video` 不支持 `url_min` 和 `no_hover`。 ## 4. `Youtube` 用于嵌入 YouTube 视频，使用 `youtube-nocookie.com` 域名。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `id` | `string` | — | YouTube 视频 ID，必填 | | `autoplay` | `boolean` | `false` | 是否自动播放 | | `start` | `number` | `undefined` | 起播秒数 | ### 示例 ```mdx ``` ### 说明 - 生成的嵌入地址格式为：`https://www.youtube-nocookie.com/embed/`。 - 只有在传入参数时才会拼接查询字符串。 ## 5. `Bilibili` 用于嵌入 Bilibili 播放器。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `bvid` | `string` | `undefined` | BV 号 | | `aid` | `string` | `undefined` | AV 号 | | `cid` | `string` | `undefined` | 资源 ID / 弹幕 ID | | `page` | `number` | `1` | 分 P 页码 | | `autoplay` | `boolean` | `false` | 是否自动播放 | ### 示例 ```mdx ``` ### 说明 - 组件会把已传入的参数拼接到 `//player.bilibili.com/player.html?...`。 - 除了你传入的参数外，还会固定附加 `isOutside=true`。 - `bvid`、`aid`、`cid` 都是可选的，但实际嵌入通常至少应提供 `bvid` 或 `aid`。 ## 6. `Spotify` 用于嵌入 Spotify 的专辑、歌单、单曲、播客等内容。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `type` | `'track' \| 'album' \| 'artist' \| 'playlist' \| 'episode' \| 'show'` | `undefined` | 通用类型写法 | | `id` | `string` | `undefined` | 与 `type` 搭配使用的内容 ID | | `track` | `string` | `undefined` | 单曲 ID 简写 | | `album` | `string` | `undefined` | 专辑 ID 简写 | | `artist` | `string` | `undefined` | 艺人 ID 简写 | | `playlist` | `string` | `undefined` | 歌单 ID 简写 | | `episode` | `string` | `undefined` | 单集播客 ID 简写 | | `show` | `string` | `undefined` | 播客节目 ID 简写 | | `height` | `string \| number` | 自动推断 | 自定义 iframe 高度 | ### 示例 ```mdx ``` ### 说明 - 可以用两种方式传参： - 简写：`album="..."`、`track="..."` - 通用：`type="album" id="..."` - 如果两种方式同时存在，组件优先使用简写参数。 - 如果既没有简写参数，也没有完整的 `type + id`，组件会直接抛错。 - 默认高度： - `track` 为 `152` - 其他类型为 `352` ## 7. `Steam` 用于展示 Steam 商店卡片。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `appid` | `string \| number` | — | Steam App ID，必填 | | `variant` | `'horizontal' \| 'vertical'` | `'horizontal'` | 卡片样式 | ### 示例 ```mdx ``` ### 说明 - 组件会自动生成： - 商店链接：`https://store.steampowered.com/app//` - 横版封面：`header.jpg` - 竖版封面：`library_600x900_2x.jpg` - `vertical` 模式下会给媒体容器写入固定宽度 `200px`。 - 组件本身不请求 Steam API，只是按固定 URL 规则拼接资源地址。 ## 8. `CRT` 用于输出带 CRT 风格的代码块容器。 ### 参数 | 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `code` | `string` | — | 要显示的代码文本，必填 | | `no_scanlines` | `boolean` | `false` | 是否关闭扫描线效果 | ### 示例 ```mdx ``` ### 说明 - 如果 `code` 的首字符是换行，组件会自动裁掉这个首个换行，方便你在 MDX 里写多行模板字符串。 - `no_scanlines` 为 `false` 时会额外附加 `scanlines` 类。 ## 参数选择建议 ### 媒体类 - 需要图片缩略图跳原图：优先用 `ImageCode` + `url_min` - 需要剧透遮挡：使用 `spoiler`，需要更强遮挡再叠加 `solid` - 需要大图铺满版心：用 `full` - 需要突破版心：用 `full_bleed` ### 嵌入类 - YouTube：传 `id` - Bilibili：优先传 `bvid` - Spotify：优先用简写参数，如 `album="..."` - Steam：传 `appid`，再按展示需要选择 `variant` ### 提示与展示类 - 提示块：用 `Alert` - 复古代码块：用 `CRT` - 常规代码高亮：直接用 Markdown 代码块，除非你明确想要 CRT 风格

KaTeX 公式示例

Wed, 17 Sep 2025 00:00:00 GMT

这是一篇用于验证 KaTeX 是否正常工作的示例文章。 ## 行内公式爱因斯坦质能方程：$E = mc^2$。当 $a \ne 0$ 时，一元二次方程 $ax^2 + bx + c = 0$ 的解为 $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$。 ## 块级公式高斯求和公式： $$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$ 欧拉公式： $$ e^{i\pi} + 1 = 0 $$ ## 矩阵 $$ A = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix} $$ ## 分段函数 $$ f(x) = \begin{cases} x^2, & x \ge 0 \\ -x, & x < 0 \end{cases} $$ ## 积分与极限 $$ \int_0^1 x^2\,dx = \frac{1}{3} $$ $$ \lim_{x \to 0} \frac{\sin x}{x} = 1 $$

如何部署这个 Astro 主题

Sat, 08 Mar 2025 00:00:00 GMT

## 1. 准备运行环境这个主题基于 Astro，建议先准备好以下工具： - Node.js 20+ - npm - Git 克隆项目后，先安装依赖： ```bash git clone git@github.com:ErinaYip/goosequill.git cd goosequill npm install ``` 本地开发使用： ```bash npm run dev ``` 生产构建使用： ```bash npm run build ``` 这个项目的构建脚本不只是执行 `astro build`，还会额外运行 Pagefind 来生成搜索索引，所以正式部署前最好始终用 `npm run build` 做一次完整验证。 ## 2. 先改这几个关键配置部署前，建议优先检查下面几个文件。 ### `astro.config.mjs` 这里最重要的是 `site` 和 `base`： - `site`：你的正式站点地址，例如 `https://blog.example.com` - `base`：如果站点部署在子路径下，比如 `https://example.com/blog/`，这里需要改成 `/blog` 如果你部署到根域名，通常保持： ```js site: 'https://blog.example.com', base: '/', ``` ### `src/config.ts` 这里控制站点标题、描述、RSS、搜索、目录和分页等行为。你至少应该确认这些字段： - `title` - `description` - `defaultLocale` - `rss.enable` - `search.enable` - `pagination.posts_per_page` 如果你想用单语言模式： ```ts defaultLocale: 'en' ``` 如果你想开启多语言模式： ```ts defaultLocale: undefined ``` 这个项目现在的路由行为是： - 单语言模式：页面走无前缀路径，如 `/about`、`/blog/post` - 多语言模式：页面走带语言前缀路径，如 `/en/about`、`/zh-cn/blog/post` ## 3. 内容文件怎么组织博客文章放在 `src/content/blog/` 下，每篇文章一个目录。例如： ```text src/content/blog/my-post/ index_en.mdx index_zh-cn.mdx ``` 推荐做法： - 单语言项目：至少提供当前默认语言的那份内容 - 多语言项目：为每种语言分别提供一份 `index_.mdx` 如果你只维护英文，最简单的方式就是写英文内容文件并保持： ```ts defaultLocale: 'en' ``` ## 4. 本地验证上线前状态正式部署前，建议按这个顺序检查： ```bash npm run build npm run preview ``` `npm run preview` 会使用构建后的产物进行本地预览，这比开发模式更接近真实线上环境。建议重点检查： - 首页、博客列表页、文章详情页是否能打开 - 图片路径是否正常 - RSS 是否可访问 - 搜索是否工作 - 多语言切换链接是否正确 - `sitemap-index.xml` 是否生成 ## 5. 最省事的部署方式：Vercel / Netlify / Cloudflare Pages 这是一个静态站点，因此部署到常见静态平台都比较直接。 ### 方案 A：Vercel 在 Vercel 中导入仓库后，通常可以直接使用： - Build Command: `npm run build` - Output Directory: `dist` 如果没有特殊需求，其他选项保持默认即可。 ### 方案 B：Netlify Netlify 也适合这个主题，配置通常是： - Build command: `npm run build` - Publish directory: `dist` ### 方案 C：Cloudflare Pages 如果你想把博客托管在 Cloudflare 上，也可以使用相同思路： - Build command: `npm run build` - Build output directory: `dist` ## 6. GitHub Pages 部署要注意什么如果你部署到 GitHub Pages，一般最容易踩坑的是 `base`。例如你的仓库地址是： ```text https://.github.io/goosequill/ ``` 那么你通常需要： ```js base: '/goosequill' ``` 同时 `site` 也建议改为对应的最终地址。如果 `base` 不正确，常见现象包括： - CSS 资源 404 - JS 资源 404 - 图片不显示 - 页面链接跳错 - 搜索资源加载失败 ## 7. 自定义域名上线前的最后检查在绑定正式域名之前，建议再确认下面几项： - `astro.config.mjs` 里的 `site` 已替换为真实域名 - `base` 与部署路径一致 - RSS 链接可访问 - `robots.txt`、sitemap 与站点地址一致 - 社交分享卡片中的图片和标题正常如果你启用了 RSS 和 sitemap，但 `site` 还保留示例地址，生成出来的绝对链接通常会是错误的。 ## 8. 常见问题 ### 构建成功，但页面样式丢失优先检查： - `base` 是否正确 - 静态资源路径是否写成了错误的绝对路径 - 托管平台是否真的发布了 `dist/` ### 搜索框能打开，但搜不到内容这个主题使用 Pagefind，搜索依赖构建后的索引文件。请确认： - 你部署的是 `npm run build` 产物 - `dist/pagefind/` 已随站点一起发布 ### 多语言页面 404 优先检查： - `src/config.ts` 中 `defaultLocale` 是否符合预期 - 文章或页面文件是否按语言后缀命名 - 当前语言对应的内容文件是否真实存在 ## 9. 一套推荐上线流程如果你想用一套稳妥又简单的流程，可以直接照着做： 1. Fork 或克隆项目 2. 修改 `astro.config.mjs` 中的 `site` 和 `base` 3. 修改 `src/config.ts` 中的站点名称、描述和语言模式 4. 添加你自己的文章内容 5. 本地执行 `npm run build` 6. 本地执行 `npm run preview` 7. 推送到 Git 仓库 8. 连接到 Vercel、Netlify 或 Cloudflare Pages 9. 上线后再检查 RSS、sitemap 和搜索 ## 总结这个主题的部署本质上并不复杂，核心就三件事： - 配好 `site` 和 `base` - 确认 `src/config.ts` 的语言模式与内容文件结构一致 - 始终用 `npm run build` 验证最终产物只要这三点处理正确，部署到大多数静态托管平台都会比较顺利。如果你后续还想继续完善这篇文章，可以再补一节专门介绍： - 如何部署到 GitHub Pages - 如何开启自定义域名 - 如何接入评论或统计服务

Markdown 指南

Wed, 19 Jun 2024 00:00:00 GMT

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. ## Headings The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 ## Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. ## Images ### Syntax ```markdown ![Alt text](./full/or/relative/path/of/image) ``` ### Output ![blog placeholder](blog-placeholder-about.jpg) ## Blockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. ### Blockquote without attribution #### Syntax ```markdown > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > Note that you can use _Markdown syntax_ within a blockquote. ``` #### Output > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > Note that you can use _Markdown syntax_ within a blockquote. ### Blockquote with attribution #### Syntax ```markdown > Don't communicate by sharing memory, share memory by communicating. > — Rob Pike[^1] ``` #### Output > Don't communicate by sharing memory, share memory by communicating. > — Rob Pike[^1] [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. ## Tables ### Syntax ```markdown | Italics | Bold | Code | | --------- | -------- | ------ | | _italics_ | bold | `code` | ``` ### Output | Italics | Bold | Code | | --------- | -------- | ------ | | _italics_ | bold | `code` | ## Code Blocks ### Syntax we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash ````markdown ```html Example HTML5 Document
Test
``` ```` ### Output ```html Example HTML5 Document
Test
``` ## List Types ### Ordered List #### Syntax ```markdown 1. First item 2. Second item 3. Third item ``` #### Output 1. First item 2. Second item 3. Third item ### Unordered List #### Syntax ```markdown - List item - Another item - And another item ``` #### Output - List item - Another item - And another item ### Nested list #### Syntax ```markdown - Fruit - Apple - Orange - Banana - Dairy - Milk - Cheese ``` #### Output - Fruit - Apple - Orange - Banana - Dairy - Milk - Cheese ## Other Elements — abbr, sub, sup, kbd, mark ### Syntax ```markdown GIF is a bitmap image format. H₂O Xⁿ + Yⁿ = Zⁿ Press `CTRL` + `ALT` + `Delete` to end the session. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. ``` ### Output GIF is a bitmap image format. H₂O Xⁿ + Yⁿ = Zⁿ Press `CTRL` + `ALT` + `Delete` to end the session. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

博客三

Fri, 22 Jul 2022 00:00:00 GMT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.