Zayck' Blog

罗xy是帅哥

Zayck' Blog — Sat, 25 Apr 2026 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/000-%E7%BD%97xy/

前言

今天我们不聊框架，不聊部署，也不聊报错。
今天只聊一个朴素而重要的话题：罗xy是帅哥。

为什么说罗xy是帅哥

先说结论，再给论据，这是成熟写作人的基本素养。

1. 气质稳定

有的人帅在照片里，有的人帅在滤镜里，罗xy属于第三种：
随便一站都像“今天状态还行”的那种帅。

2. 说话有节奏

真正的帅，不只是五官，还是表达。
罗xy说话有一种“我不急，但我很有道理”的节奏感，听起来让人莫名信服。

3. 审美在线

从穿搭到配色，再到“选图不翻车”的能力，都透露出一种高级感。
简单说：他是那种连表情包都挑得很好看的人。

帅哥观察日志（非严谨版）

上午：路过镜子，镜子先打招呼。
中午：风一吹，发型自动进入“拍摄模式”。
下午：同事提出问题，他先微笑，问题就已经解决一半。
晚上：打开前置摄像头，手机亮度自动提高 10%（传闻）。

一点认真总结

“帅”其实是综合分：外表 + 气质 + 情绪稳定 + 对人友好。
罗xy刚好把这几项都点到了，所以结论非常稳定：罗xy是帅哥。

结尾

本文到这里，逻辑闭环，论证完整。
如果你问我还有没有补充？有。

罗xy不仅是帅哥，还是耐看型帅哥。

WAC | 把 Gemini 3 Pro 生成的博客网站部署到 Cloudflare

Zayck' Blog — Wed, 31 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/013-%E6%8A%8A-gemini-3-pro-%E7%94%9F%E6%88%90%E7%9A%84%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99%E9%83%A8%E7%BD%B2%E5%88%B0-cloudflare/

兄弟们，上次不是把一个博客网站整成一个 HTML 文件吗？只是这个网站不是传统的博客模板，更像是一个作品集。

然后呢，我就魔改了一下。兄弟们，这次是真的可以变成博客了，先来看下效果吧。

博客魔改

样式是参照我的 Kael 博客主题来改的，几乎一模一样了。

我把这个articles功能独立出来，里面的每一个文件夹就是一个分类，文件夹里面的.md文件自动归属于相对应的分类。

实现了动态监测文件夹和文件变更，只需要在文章的yaml区写上对应的信息——

---
title: 青囊 | 辨治别论
Date: 2023-06-14
image: https://zayck-img.pages.dev/file/青囊/1765228331536_幻灯片5.jpg
tags:
  - 中医
  - 辨证
---

不过现在的这个文章功能还是有欠缺的，我魔改到这里的时候，发现这个目录不能实现悬浮固定效果。

你看我的博客，是可以在看文章的时候，随着页面的下拉，目录是跟随固定的。

我在这个网站试了好几次都不成功，就放弃了。

这个仓库已经开源了，地址我会放到简介和评论区，看看有没有大佬出手优化一下。

GitHub Actions 部署

你 Fork 我的仓库之后，可以下载修改再上传，这里的步骤我就不详细介绍了，参考之前的《手把手 9 分钟带你 0 成本部署个人博客网站》，里面有很详细的步骤了。

那上传之后，怎么部署呢？

进入你的仓库，然后点击Settings，找到左侧边栏的Pages，把Build and deployment的Source选成GitHub Actions，接着等待一会就部署成功了。

Cloudflare 部署

然后呢，这个博客怎么部署到 Cloudflare 上呢？

我看了一下，原作者只是部署到 github 上，用的 GitHub Actions 来部署的，并没有用 Cloudflare 来部署。

相对来说，用 GitHub Actions 国内是比较难访问的。

如果想部署到 Cloudflare 上面，需要修改根目录下的 vite.config.ts。

把原来的base配置修改——

base: '/',

接着，还是老样子，用 Cloudflare Pages 来部署。

这里的Framework preset选React(Vite)，下面这些不用管，它会自动填写，最后点击Save and Deploy，等一会你的个人博客网站就上线啦！！！。

然后呢，兄弟们，我就发现 GitHub Actions 部署失败了！

这是咋个回事呢？

后来我发现，如果我想成功部署到 GitHub Actions 呢？

又需要把base配置修改成下面的——

base: '/LuN3cy/',

总而言之，言而总之，就是能部署 GitHub Actions 就不能部署 Cloudflare；能部署 Cloudflare 就不能部署 GitHub Actions。

这不是耍我吗？

后面我就问 AI，兄弟们，还得是 AI 有用啊。

实现动态base路径配置。可以通过环境变量来区分不同部署环境，让构建时自动选择正确的base值。

总之，改了3个文件，现在就是能同时部署 GitHub Actions 和 Cloudflare 了。

仓库地址：https://github.com/zayck/LuN3cy

体验网址：https://zayck-blog.pages.dev

文档地址：https://mp.weixin.qq.com/s/FeGIWNhQdSlIeZq_ZqISXA

WAC | 如何白嫖 Cloudflare 部署 HTML？

Zayck' Blog — Tue, 30 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/012-%E5%A6%82%E4%BD%95%E7%94%A8-cloudflare-%E9%83%A8%E7%BD%B2-html/

兄弟们，之前不是做了几个 HTML 文件吗？特别是这个博客网站，就想部署到 Cloudflare 上面。

没想到啊，兄弟们，直接上传这个 HTML 是不行的，把名字改成index.html也不成。

这个在 B站好像没有人提出来，后来我摸索出了两种方法。

一、上传 github 再部署

直接上传 HTML 不是不行吗？

我上传到 github，然后再用 Cloudflare 部署，没想到这次就行了。

二、增加 _headers 文件

用 Cloudflare 部署的时候，选择上传文件夹，文件夹里除了原本的index.html，还要另外加上一个 _headers 文件。

新建一个TXT文件，里面增加以下内容——

/*
  Content-Type: text/html; charset=UTF-8

然后把这个 TXT 文件重命名为_headers，最后把这个文件夹直接部署就 OK 了。

好了，兄弟们，快去试试吧！

文档地址：https://mp.weixin.qq.com/s/eEZsPzRfSlomRwWUE7yKuA

WAC | 把一个博客网站做成一个HTML文件

Zayck' Blog — Mon, 29 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/011-%E6%8A%8A%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99%E5%81%9A%E6%88%90%E4%B8%80%E4%B8%AAhtml%E6%96%87%E4%BB%B6/

兄弟们，我又找到一个风格简约，又比较符合我审美的博客模板。

整体是这样一种黑白的强调色，然后搭配了红、蓝、绿，来做颜色的点缀。

而且怎么说呢，这个网站给人的感觉，交互比较快速，动效切换很丝滑。

下面的这些弹出框设计得比较好，右上角还有一个小彩蛋交互。

然后呢，延续前面的优良传统和思维惯性，肯定是想想办法，看能不能把这个网站做成一个 HTML 文件。

诶，还真成了！不过大小飙升了，417kb。

一开始是做出这个445kb的，后面一看这个代码不容易修改和维护，特别是一些日常要更新的地方。

所以呢，就有了这个易修改版，在这里面可以对所有项目进行一个增修删减，这样就比较直观。

不过这个网站，它的文章是链接到微信公众号那里去了，不是在原本的网站上加载。

这个网站不是传统的博客模板，更像是一个作品集。

好了，兄弟们，快去试试吧！

在线预览：https://zayck.pages.dev/html/LuN3cy/

文档地址：https://mp.weixin.qq.com/s/XBqAXfWIQq6OtzGV5t0BtQ

WAC | 从 0 手搓了一个音乐网站 & 拥有一个博客≈拥有所有网站

Zayck' Blog — Sun, 28 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/010-%E4%BB%8E-0-%E6%89%8B%E6%90%93%E4%BA%86%E4%B8%80%E4%B8%AA%E9%9F%B3%E4%B9%90%E7%BD%91%E7%AB%99--%E6%8B%A5%E6%9C%89%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2%E6%8B%A5%E6%9C%89%E6%89%80%E6%9C%89%E7%BD%91%E7%AB%99/

兄弟们，我又做了一个音乐网站，点击导航——音乐网站，就能看到了。

之前在B站搜到了这样简约风格的音乐网站，这个配色比较戳我，就想复刻下来。

不过呢，找了一圈竟然没有源码，就自己从零开始搓了一个 HTML 文件，18 kb大小，先来看下效果吧。

点击播放按钮，可以自动播放音乐，按钮左边会显示当前播放的歌曲名称和歌手。

鼠标移动到导航栏，会有放大的波动交互效果；鼠标移动到list，会自动出现一个下拉菜单，这个就是音乐列表；你点击一下还可以立刻跳转播放对应的歌曲。

BLOG就是回到博客，SEASON就是跳转到我的栏目廿四网页，后面这个RESOURCE还没配置好。

整体来说，还是比较简单。兄弟们，快去试试吧。

体验网址：https://zayck.pages.dev/html/music/

文档地址：https://mp.weixin.qq.com/s/-mBJsy_55YkrW151rJBIYQ

WAC | 做了一个 24 节气网站 & 拥有一个博客≈拥有所有网站

Zayck' Blog — Sat, 27 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/009-%E5%81%9A%E4%BA%86%E4%B8%80%E4%B8%AA-24-%E8%8A%82%E6%B0%94%E7%BD%91%E7%AB%99--%E6%8B%A5%E6%9C%89%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2%E6%8B%A5%E6%9C%89%E6%89%80%E6%9C%89%E7%BD%91%E7%AB%99/

兄弟们，我花了一点时间做的一个关于 24 节气网站，放在我的博客里面，点击导航栏少阳手记——廿四，就能看到了，先来看下效果吧。

廿四，就是我公众号里面第一个完本的栏目，做成了一个网站，同样是简约的风格。

按钮我都做了变色的交互效果，点击开始探索，就会跳转到下面的页面。点击查看更多，跳转到下面对应的书签合集。

鼠标移动到书签上面，会有个轻微放大的交互，点击书签，可以跳转到对应的博客文章。

上面这里还有一个画廊，展示了所有的 24 节气。鼠标移动到左右两边的箭头区域，图片就会自动滑动。

鼠标放到图片上面，图片会变阴暗，展示标题；点击图片，同样可以跳转到对应的博客文章。

这个网站，其实就是一个HTML文件，放在src\pages文件夹里面，然后提交变更，就能自动部署了。

文件才 53 kb，当然这是单网页，里面的图片链接是跳转回对应的博客文章。

理论上来说，你拥有一个博客，就等于拥有了所有网站。兄弟们，快去试试吧。

体验网址：https://zayck.pages.dev/html/廿四/

文档地址：https://mp.weixin.qq.com/s/ZbTZfbxaSUwxdWQtORPrIg

WAC | 手把手 9 分钟带你 0 成本部署个人博客网站

Zayck' Blog — Fri, 26 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/008-%E6%89%8B%E6%8A%8A%E6%89%8B%E5%B8%A6%E4%BD%A0-0-%E6%88%90%E6%9C%AC%E9%83%A8%E7%BD%B2%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/

今天给大家讲一下如何 0 成本部署博客网站，薅一下 Cloudflare 的羊毛。所有步骤已经做成文档，在博客和公众号同步更新，网址放在简介和评论区，有需要的自取。

你不需要懂任何代码，跟着步骤一步步来，小白完全可以上线属于自己的个人博客网站。

下载仓库

跟着仓库写的 READ ME 操作也可以，新建一个文件夹，用vscode打开（没有请自行下载）,这里有个面板图标，点击输入——

git clone https://github.com/zayck/Kael.git Kael

定位文件夹：

cd Kael

链接仓库

在github网站上新建一个仓库，点击这个+，选择New repository，在Repository name这里填写仓库名称，点击下面的Create repository。

这里需要知道以下几个代码，按需输入即可（一般只需要输入2和3）——

1、查看当前远程仓库地址：

git remote get-url origin

2、移除当前远程仓库：

git remote remove origin

3、添加自己的远程仓库：

git remote add origin https://github.com/你的github用户名/你的github仓库.git

如果你是直接Fork仓库，然后下载自己的仓库，就简单多了——Fork仓库之后，在自己的仓库里面，点击code，复制这行命令，到vscode下面输入这行代码，就会自动下载仓库。前面这些步骤可以省掉，直接下一步。（我是不能 Fork 自己的仓库，只能这么操作）

下载依赖

npm i -g pnpm
pnpm i

本地预览

pnpm run dev

上面这个生成索引，我自己使用下来的感觉，不用这个命令也可以，而且你的文章多了以后，这个命令的运行时间会比较长。

修改文件

根据自己的情况，修改Kael.config.yaml里面的设置。你可以一边修改，一边查看效果。

如果想上传文章，在src\content\blog文件夹里，自己创建.md文件，要注意这里的 yaml 区要求。

名称	含义	是否必要
title	文章标题	是
description	文章简介	是
pubDate	文章日期	是
image	文章封面	否
categories	文章分类	否
tags	文章标签	否
badge	文章徽标	否
draft	草稿状态	否

上传修改

修改文件之后，vscode的左侧边栏这里有个源代码管理图标，你点击一下就会显示详情——什么文件作出了什么修改，都会详细记录。

上面这里有个框，随便输点东西，然后点击提交。

部署 Cloudflare

刚刚只是在本地运行，把内容推送到 github 仓库，现在就是把 github 仓库的这些内容上传到网上，让别人也能访问。

打开 Cloudflare网站，左侧边栏找到Compute & Al——Workers & Pages，点击右上角的Create application，选择下面的Get started，继续选择Get started，第一次会有一个链接 github 的操作，按照提示操作就可以了。操作完之后，选择你要部署的仓库，点击下面的Begin setup。

Project name这里填写名称，这个名称和 Cloudflare 给你的域名是相对应的，按自己的喜好来填写就行了。

Framework preset这里选Astro，下面这些不用管，它会自动填写，最后点击Save and Deploy，等一会你的个人博客网站就上线啦！！！

kael主题模板：https://github.com/zayck/Kael

在线预览：https://zayck-demo.pages.dev

我的博客：https://zayck.pages.dev

文档地址：https://mp.weixin.qq.com/s/vupg5clrVZtFtmxnqJAdeg

Astro | 在 Markdown 中测试数学公式

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/003-%E5%9C%A8-markdown-%E4%B8%AD%E6%B5%8B%E8%AF%95%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F/

本文档用于测试在 Markdown 中使用 $$ 符号渲染数学公式。

基础代数

让我们从一些基本的代数表达式开始。

二次方程的求根公式为: $$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

一个简单的线性方程: $$y = mx + c$$

二项式平方的展开: $$(a+b)^2 = a^2 + 2ab + b^2$$

微积分

Here are some common expressions from calculus.

The limit definition of a derivative: $$f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$$

A definite integral: $$\int_{a}^{b} f(x) dx$$

The Taylor series expansion of $e^x$ around $x=0$: $$e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots$$

三角函数

Some basic trigonometric identities.

Pythagorean identity: $$\sin^2\theta + \cos^2\theta = 1$$

Angle addition formula for sine: $$\sin(\alpha + \beta) = \sin\alpha\cos\beta + \cos\alpha\sin\beta$$

Euler's formula: $$e^{i\theta} = \cos\theta + i\sin\theta$$

统计和概率

Formulas commonly used in statistics and probability.

The formula for the mean ($\mu$) of a set of $n$ numbers $x_1, x_2, \ldots, x_n$: $$\mu = \frac{1}{n} \sum_{i=1}^{n} x_i$$

The probability density function of a normal distribution: $$f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$$

Bayes' theorem: $$P(A|B) = \frac{P(B|A)P(A)}{P(B)}$$

线性代数

Examples from linear algebra.

A 2x2 matrix: $$A = \begin{pmatrix} a & b \ c & d \end{pmatrix}$$

The determinant of a 2x2 matrix: $$\det(A) = ad - bc$$

Matrix multiplication of two matrices A and B: $$C = AB$$

物理学

A couple of well-known physics equations.

Einstein's mass-energy equivalence: $$E = mc^2$$

Newton's second law of motion: $$F = ma$$

This should provide a good test of how various mathematical formulas are rendered.

Astro | Markdown Mermaid 图表

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/006-markdown-mermaid-%E5%9B%BE%E8%A1%A8/

Markdown 中 Mermaid 图表完整指南

本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例

流程图非常适合表示流程或算法步骤。

graph TD
    A[开始] --> B{条件检查}
    B -->|是| C[处理步骤 1]
    B -->|否| D[处理步骤 2]
    C --> E[子过程]
    D --> E
    subgraph E [子过程详情]
        E1[子步骤 1] --> E2[子步骤 2]
        E2 --> E3[子步骤 3]
    end
    E --> F{另一个决策}
    F -->|选项 1| G[结果 1]
    F -->|选项 2| H[结果 2]
    F -->|选项 3| I[结果 3]
    G --> J[结束]
    H --> J
    I --> J

时序图示例

时序图显示对象之间随时间的交互。

sequenceDiagram
    participant User as 用户
    participant WebApp as 网页应用
    participant Server as 服务器
    participant Database as 数据库

    User->>WebApp: 提交登录请求
    WebApp->>Server: 发送认证请求
    Server->>Database: 查询用户凭据
    Database-->>Server: 返回用户数据
    Server-->>WebApp: 返回认证结果
    
    alt 认证成功
        WebApp->>User: 显示欢迎页面
        WebApp->>Server: 请求用户数据
        Server->>Database: 获取用户偏好
        Database-->>Server: 返回偏好设置
        Server-->>WebApp: 返回用户数据
        WebApp->>User: 加载个性化界面
    else 认证失败
        WebApp->>User: 显示错误消息
        WebApp->>User: 提示重新输入
    end

甘特图示例

甘特图非常适合显示项目进度和时间线。

gantt
    title 网站开发项目时间线
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section 设计阶段
    需求分析      :a1, 2023-10-01, 7d
    UI设计                 :a2, after a1, 10d
    原型创建        :a3, after a2, 5d
    
    section 开发阶段
    前端开发      :b1, 2023-10-20, 15d
    后端开发       :b2, after a2, 18d
    数据库设计           :b3, after a1, 12d
    
    section 测试阶段
    单元测试              :c1, after b1, 8d
    集成测试       :c2, after b2, 10d
    用户验收测试   :c3, after c2, 7d
    
    section 部署
    生产环境部署     :d1, after c3, 3d
    发布                    :milestone, after d1, 0d

类图示例

类图显示系统的静态结构，包括类、属性、方法及其关系。

classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User "1" -- "*" Article : 写作
    User "1" -- "*" Comment : 发表
    Article "1" -- "*" Comment : 拥有
    Article "1" -- "*" Category : 属于

状态图示例

状态图显示对象在其生命周期中经历的状态序列。

stateDiagram-v2
    [*] --> 草稿
    
    草稿 --> 审核中 : 提交
    审核中 --> 草稿 : 拒绝
    审核中 --> 已批准 : 批准
    已批准 --> 已发布 : 发布
    已发布 --> 已归档 : 归档
    已发布 --> 草稿 : 撤回
    
    state 已发布 {
        [*] --> 活跃
        活跃 --> 隐藏 : 临时隐藏
        隐藏 --> 活跃 : 恢复
        活跃 --> [*]
        隐藏 --> [*]
    }
    
    已归档 --> [*]

饼图示例

饼图非常适合显示比例和百分比数据。

pie title 网站流量来源分析
    "搜索引擎" : 45.6
    "直接访问" : 30.1
    "社交媒体" : 15.3
    "推荐链接" : 6.4
    "其他来源" : 2.6

总结

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。

尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！

Astro | 在 Kael 博客中嵌入视频

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/007-%E5%9C%A8-kael-%E5%8D%9A%E5%AE%A2%E4%B8%AD%E5%B5%8C%E5%85%A5%E8%A7%86%E9%A2%91/

只需从 bilibili 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。

<iframe src="//player.bilibili.com/player.html?bvid=BV1oXBrBrE8z&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" &autoplay=0> </iframe>

Bilibili

Astro | Markdown 样式指南

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/002-markdown-%E6%A0%B7%E5%BC%8F%E6%8C%87%E5%8D%97/

以下是一个在 Astro 中编写 Markdown 内容时可以使用的部分基本 Markdown 语法示例。

1.标题

以下HTML中的 <h1>—<h6> 元素表示六个级别的章节标题。<h1> 是最高级别，而 <h6> 是最低级别。

H1

H2

H3

H4

H5

H6

2.段落

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.

3.图片

语法

![Alt text](https://zayck-img.pages.dev/file/来自新世界/1764985164363_BandiView_background-light.webp)

输出

Alt text

4.块引用

块引用元素表示从另一来源引用的内容，可附带引用信息(该信息必须位于脚注或引用元素内)，并可能包含一些内嵌改动，如注释和缩写。

4.1 无署名的引用

语法

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.

输出

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

4.2 有署名的引用

语法

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

输出

Don't communicate by sharing memory, share memory by communicating.

— Rob Pike[^1]

[^1]: The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.

4.3 表格

语法

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

输出

Italics	Bold	Code
italics	bold	`code`

4.4 代码块

语法

we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash

```cpp
#include <bits/stdc++.h>
using namespace std;
const int N = 1e5 + 5;
int n, k, a[N];
long long ans;
vector<int> v[N];
int main()
{
    scanf("%d%d", &n, &k);
    for (int i = 1; i <= n; i++)
    {
        scanf("%d", &a[i]);
        v[i % k].push_back(a[i]);
    }
    for (int i = 0; i < k; i++)
        sort(v[i].rbegin(), v[i].rend());
    for (int i = 0; i < k; i++)
    {
        for (int j = 0; j + 1 < v[i].size(); j += 2)
        {
            ans += v[i][j] + v[i][j + 1];
        }
    }
    printf("%lld\n", ans);
    return 0;
}


#### 输出

```cpp
#include <bits/stdc++.h>
using namespace std;
const int N = 1e5 + 5;
int n, k, a[N];
long long ans;
vector<int> v[N];
int main()
{
    scanf("%d%d", &n, &k);
    for (int i = 1; i <= n; i++)
    {
        scanf("%d", &a[i]);
        v[i % k].push_back(a[i]);
    }
    for (int i = 0; i < k; i++)
        sort(v[i].rbegin(), v[i].rend());
    for (int i = 0; i < k; i++)
    {
        for (int j = 0; j + 1 < v[i].size(); j += 2)
        {
            ans += v[i][j] + v[i][j + 1];
        }
    }
    printf("%lld\n", ans);
    return 0;
}

4.5 有序列表

语法

1. First item
2. Second item
3. Third item

输出

First item
Second item
Third item

4.6 无序列表

语法

- List item
- Another item
- And another item

输出

List item
Another item
And another item

4.7 嵌套列表

语法

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

输出

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

4.8 其他

语法

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

输出

GIF is a bitmap image format.

H2O

Xn + Yn = Zn

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Astro | Markdown 扩展功能

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/004-markdown-%E6%89%A9%E5%B1%95%E5%8A%9F%E8%83%BD/

GitHub 仓库卡片

::github{repo="zayck/kael"}

::github{repo="zayck/kael"}

提醒框

支持以下类型的提醒框：note tip important warning caution，支持基本语法和 GitHub 语法。

:::note 突出显示用户应该考虑的信息，即使在快速浏览时也是如此。 :::

:::note
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
:::

> [!NOTE]
> 突出显示用户应该考虑的信息，即使在快速浏览时也是如此。

:::tip 可选信息，帮助用户更成功。 :::

:::tip
可选信息，帮助用户更成功。
:::

> [!TIP]
> 可选信息，帮助用户更成功。

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

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

> [!IMPORTANT]
> 用户成功所必需的关键信息。

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

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

> [!WARNING]
> 由于潜在风险需要用户立即注意的关键内容。

:::caution 行动的负面潜在后果。 :::

:::caution
行动的负面潜在后果。
:::

> [!CAUTION]
> 行动的负面潜在后果。

文字隐藏

内容 :spoiler[被隐藏了哈哈]！

内容 :spoiler[被隐藏了 **哈哈**]！

Astro | READ ME

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/001-readme/

🖥️ Kael Demo 🖥️ 我的博客

📷 预览

image.png

✨ 特点

✅ 白天 / 黑夜模式可用
✅ 极速的访问速度与优秀的 SEO
✅ 视图过渡动画（使用 ClientRouter）
✅ 支持文章全文搜索（Pagefind）
✅ 使用 Tailwind CSS 与 daisyUI 构建自适应页面
✅ RSS 订阅支持
🛠️ 博客易上手
- 只需在 Kael.config.yaml 配置你的博客内容
🛠️ 本博客基于 RyuChan 主题下进行修改

📝 功能新增和修改（作者：Zayck）

✅ 修复搜索功能，精确呈现文章标题以及自动删除搜索历史
✅ 修改导航栏背景，由原来的毛玻璃透明效果改为纯色
✅ 修改导航栏的搜索框位置，让其贴近右边的光暗调节按钮
✅ 修改搜索框内文字的高对比度显示效果
✅ 删除~~番组组件、樱花特效~~组件
✅ 修改About页面，仿Markdown格式的页面浏览
✅ 修改友链页面，下方添加评论组件
✅ 修改评论组件为卡片式布局
✅ 修改Rss页面，暗黑模式下的美观页面浏览
✅ 新增网址导航目录，网址多时可以方便跳转
✅ 修改Umami 统计配置一键开关显示博客访问量
✅ 修改文章字体、标签字体和文章导航分页字体，由原来的增大一号
✅ 修改文章排版，设置成两端对齐、两端缩进1个字符，更加美观的浏览体验
✅ 修改高亮样式，由原来的灰色改为主题蓝色，字体改为和文章字体一致
✅ 修改引用代码块样式，由原来的灰色改为主题蓝色
✅ 修改代码块样式，并修复点击复制按钮的交互功能
✅ 修改网络卡片阴影效果，由原来的三周环绕改为四周环绕
✅ 新增license组件的打赏功能
✅ 新增license组件分享按钮微信、QQ、微博方式
✅ 修改license组件间距
✅ 修改鼠标样式

😅 计划中……(期待大佬的参与)

❌ 动画效果：博客内跳转页面时太单调，想添加一些丝滑的过渡动画
❌ ……

✒️ 文章信息

名称	含义	是否必要
title	文章标题	是
description	文章简介	是
pubDate	文章日期	是
image	文章封面	否
categories	文章分类	否
tags	文章标签	否
badge	文章徽标	否
draft	草稿状态	否

[!TIP]

你可以通过把 badge 属性设置为 Pin 来置顶你的文章

设置 draft: true 可将文章标记为草稿，草稿文章不会在列表显示

⬇️ 使用方法

安装 pnpm 包管理器（如果你没有安装过的话）

npm i -g pnpm

克隆项目

git clone https://github.com/zayck/Kael.git Kael

进入项目文件夹

cd Kael

安装依赖

pnpm i

调试、运行项目

首次运行或更新内容后，请先执行 search:index 来生成搜索索引：

# 生成搜索索引以供开发时使用
pnpm run search:index

pnpm run dev

🔧 配置

Kael 使用 Kael.config.yaml 作为配置文件，你可以在此文件中配置网站的基本信息、导航栏、页脚等内容。

网站基本信息 (site)

site:
  tab: Zayck # 浏览器标签栏上显示的文本
  title: Zayck # 网站的主标题
  description: A clean, elegant, and fast static blog template! # 网站描述，用于SEO
  language: zh # 网站的语言代码，如"en"表示英文，"zh"表示中文
  favicon: /goat.svg # 网站图标路径

主题设置 (theme)

theme:
  light: winter # 浅色模式的主题，基于daisyUI的主题
  dark: dracula # 深色模式的主题，基于daisyUI的主题
  code: github-dark # 代码块的主题样式

主题基于 daisyUI 提供的主题选项
代码块主题使用 Shiki 提供的样式

日期格式 (date_format)

date_format: ddd MMM DD YYYY # 日期显示格式

菜单配置 (menu)

menu:
  - id: home # 菜单项唯一标识符
    text: Home # 菜单显示的文本
    href: / # 链接地址
    svg: "material-symbols:home-outline-rounded" # 图标
    target: _self # 链接打开方式

每个菜单项包含以下属性：

id: 唯一标识符
text: 显示的文本
href: 链接地址
svg: 图标代码，使用 Iconify 的图标集
target: 链接打开方式(_self当前窗口或_blank新窗口)

子菜单项 (subItems)

你可以通过添加 subItems 配置子菜单项，格式与主菜单项相同。

用户信息 (user)

user:
  name: zayck # 用户名称
  site: "https://example.com" # 用户网站
  avatar: /profile.png # 用户头像

社交媒体配置 (social)

侧边栏和页脚可以配置不同的社交媒体链接：

sidebar:
  social:
    - href: "https://github.com/zayck" # 链接地址
      ariaLabel: Github # 无障碍标签
      title: Github # 鼠标悬停时的提示
      svg: "ri:github-line" # 图标代码

图标设置 (icon)

Kael 使用 Iconify 作为图标库。你可以在其网站上搜索你喜欢的图标，然后复制图标的代码到配置文件中的 svg 字段。

语言设置 (language)

Kael 支持多语言，通过以下方式配置：

在 Kael.config.yaml 中设置网站默认语言：

site:
  language: zh # 设置为 "zh" 使用中文，"en" 使用英文

通过 src/i18n/translations.yaml 文件管理所有界面文本翻译：

en: # 英文翻译
  label:
    noTag: No tags assigned
    tagCard: Tags
    # 其他英文标签...

zh: # 中文翻译
  label:
    noTag: 未分配标签
    tagCard: 标签
    # 其他中文标签...

添加或修改翻译

要添加新的语言支持或修改现有翻译：

在 translations.yaml 文件中添加新的语言代码和对应翻译，或修改现有翻译
在 Kael.config.yaml 中更改 site.language 为你要使用的语言代码

🚀 自动更新

你可以使用我们提供的更新脚本保持项目与 Kael 的最新版本同步：

bash Kael.update.sh

该脚本将：

克隆最新版本 的 Kael 仓库。
安全地更新 你的项目文件，根据 .updateignore 文件添加和覆盖文件。
智能地删除 官方仓库中已移除的文件，而不会影响你忽略的文件。
清理任何残留的空文件夹和临时文件。
使用 pnpm 安装或更新 依赖项。

👀 问题

如果你有任何问题或建议，可以通过提交 Issues 来反馈或同开发者交流！

Astro | 代码块示例

Zayck' Blog — Sat, 06 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://zayck.pages.dev/posts/astro%E9%AD%94%E6%94%B9/005-%E4%BB%A3%E7%A0%81%E5%9D%97%E7%A4%BA%E4%BE%8B/

在这里，我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。

表达性代码

语法高亮

常规语法高亮

console.log('此代码有语法高亮!')

渲染 ANSI 转义序列

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('标题属性示例')

<!-- src/content/index.html -->
<div>文件名注释示例</div>

终端框架

echo "此终端框架没有标题"

Write-Output "这个有标题!"

覆盖框架类型

echo "看，没有框架!"

# 如果不覆盖，这将是一个终端框架
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本和行标记

标记整行和行范围

// 第1行 - 通过行号定位
// 第2行
// 第3行
// 第4行 - 通过行号定位
// 第5行
// 第6行
// 第7行 - 通过范围 "7-8" 定位
// 第8行 - 通过范围 "7-8" 定位

选择行标记类型 (mark, ins, del)

function demo() {
  console.log('此行标记为已删除')
  // 此行和下一行标记为已插入
  console.log('这是第二个插入行')

  return '此行使用中性默认标记类型'
}

为行标记添加标签

// 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 的语法

+此行将标记为已插入
-此行将标记为已删除
这是常规行

--- 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() {
    // 整个块都会以 JavaScript 高亮显示，
    // 并且我们仍然可以为其添加 diff 标记！
-   console.log('要删除的旧代码')
+   console.log('新的闪亮代码！')
  }

标记行内的单独文本

function demo() {
  // 标记行内的任何给定文本
  return '支持给定文本的多个匹配项';
}

正则表达式

console.log('单词 yes 和 yep 将被标记。')

转义正斜杠

echo "Test" > /home/test.txt

选择内联标记类型 (mark, ins, del)

function demo() {
  console.log('这些是插入和删除的标记类型');
  // return 语句使用默认标记类型
  return true;
}

自动换行

为每个块配置自动换行

// 启用换行的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

// wrap=false 的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

配置换行的缩进

// preserveIndent 示例（默认启用）
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

// preserveIndent=false 的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

可折叠部分

// 所有这些样板设置代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 您可以有多个折叠部分
  const a = 1
  const b = 2
  const c = a + b

  // 这将保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}

// 直到块末尾的所有代码将再次被折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })

行号

为每个块显示行号

// 此代码块将显示行号
console.log('来自第2行的问候!')
console.log('我在第3行')

// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')

更改起始行号

console.log('来自第5行的问候!')
console.log('我在第6行')