Dreamy.

在当前 Astro 6 项目里接入 Vue，并修掉按钮发黑问题

Sun, 12 Apr 2026 00:00:00 GMT

这次改了什么

这次没有改博客本身的整体结构，而是在现有的 Astro + Svelte 项目里补上了 Vue 支持，并加了一个独立 demo 页面。

新增的入口是：

/vue-demo/

这页的作用很直接：

验证 @astrojs/vue 已经正常接入
验证 .vue 组件可以在当前项目里作为 island 使用
不动原有 Svelte 组件，保持现有结构继续可用

Vue 接入做法

这次接入保持了最小改动：

安装 @astrojs/vue 和 vue
在 astro.config.mjs 里注册 vue()
新增一个 Vue 组件作为 demo
新增一个 Astro 页面专门承载这个 demo

也就是说，这个仓库现在不是“从 Svelte 改成 Vue”，而是“在 Astro 项目里继续保留原有 Svelte，并额外支持 Vue”。

Demo 页面做了什么

/vue-demo/ 里放了一个简单的计数器组件，用来验证三件事：

.vue 单文件组件可以被 Astro 正常导入
组件可以通过 client:load 正常 hydration
Vue 的本地状态更新在当前项目里工作正常

如果后面要继续在这个项目里加 Vue 交互组件，可以直接沿用这个模式。

后面为什么又开始修按钮样式

Vue 接入之后，项目本身能跑，但在实际点页面时暴露出一串 UI 问题：

Categories 列表项目会莫名出现黑色填充
配色切换按钮会出现不对的底色
明暗切换面板里的按钮悬浮后会出现蓝色四角和黑线

这些问题看起来像是同一种现象，但根因其实有两层。

第一层问题：无效的按钮结构

Categories 列表原本用的是：

<a>
  <button>...</button>
</a>

这是无效 HTML。浏览器在这种结构上会掺进自己的默认按钮绘制，结果就会出现和设计稿不一致的背景、边框或者焦点态。

所以这里的修法不是继续补样式，而是把结构改成单层可点击元素：

<a>...</a>

这一步修掉了 categories 列表里那种最明显的黑色填充问题。

第二层问题：把 `bg-none` 当成了透明背景

后面明暗切换和配色切换还会出问题，根因更底层。

项目里不少按钮类用了 bg-none，但它实际表示的是“没有背景图片”，并不等于“透明背景”。
对于原生 <button>，浏览器自己的默认背景、边框和 focus 外观仍然可能存在。

所以后面做了几件事：

把按钮相关样式里的 bg-none 改成真正的 bg-transparent
给按钮类补 appearance: none、border: 0、outline: none、box-shadow: none
给实际的原生按钮补 type="button"

为什么刷新后一开始正常，过一会又出问题

这个现象说明不只是“浏览器默认按钮样式”这么简单。

后面继续排查后发现，btn-plain scale-animation 这套样式本来是靠 ::before 做悬浮背景动画的。它放在链接上没问题，但放在原生 button 上，某些浏览器环境里会和按钮自身绘制叠在一起，最后表现成蓝色角、黑线或者奇怪的填充。

最后的处理方式是：

保留链接元素上的 scale-animation 效果
对原生 button.btn-plain.scale-animation 单独做覆盖
不再让这些按钮依赖 ::before 动画层
改成直接使用普通的 hover:bg-* / active:bg-*

这一步之后，明暗切换和配色切换按钮才真正稳定下来。

这次改动的边界

这轮处理的原则一直没变：

不改博客整体结构
不把原有 Svelte 组件整体迁到 Vue
只增加一个 Vue demo 页面
只修复已经暴露出来的按钮和交互样式问题

当前结果

现在这个仓库已经具备下面几个状态：

Astro 6 正常工作
Vue 已经接入
/vue-demo/ 可访问
categories 列表不再出现异常黑色填充
配色切换和明暗切换按钮不再出现那种浏览器默认按钮外观污染

这次我也重新跑过：

pnpm check
pnpm build

都通过了。

如果后面继续扩展

后面如果要继续在这个项目里用 Vue，比较稳妥的做法是：

新增交互组件优先考虑统一用 Vue
原有 Svelte 先不动
按 island 的方式渐进式增加，而不是一次性重写

这样可以把演进成本压到最低，也不会把当前可用的博客结构打散。

Astro 6 新特性梳理和当前项目 Demo

Sat, 11 Apr 2026 00:00:00 GMT

Astro 6 带来了什么

Astro 官方在 2026-03-10 发布的 Astro 6.0 里，重点提到的能力包括：

内置 Fonts API
稳定版 Live Content Collections
稳定版 Content Security Policy API
重构后的 astro dev
围绕 Node 22 / Vite 7 / Zod 4 的底层升级
实验性的 Rust compiler、queued rendering、route caching

官方发布说明：

哪些适合在这个项目里直接试

不是每个新特性都适合这个仓库马上落地。

这个项目是一个静态博客模板，所以我优先挑了两类：

能直接看见效果的
和当前迁移结果本身直接相关的

最后选的是：

Fonts API
Content Layer API 在当前项目里的实际使用结果

已做的 Demo

这次加了一个独立页面：

/astro-6-demo/

这个页面演示了两件事：

1. Astro 6 Fonts API

在 astro.config.mjs 里为 Roboto 配置了 Astro 6 的 fonts 选项，并通过 local() provider 指向仓库里的本地字体文件。然后在 demo 页面里通过 <Font /> 把字体注入到页面头部，并把主标题切到这套字体变量上。

这意味着这个页面不是继续依赖旧的全局 @fontsource CSS 导入方式，而是直接走 Astro 6 提供的字体能力。

2. 当前项目迁好的 Content Layer

页面会读取当前 posts collection，展示最新文章列表。这个列表直接依赖迁移后的：

src/content.config.ts
glob() loader
Astro 6 的 collection entry API

所以它不只是一个展示页，也顺带验证了这次内容层迁移已经在实际页面里正常工作。

在线查看：

Astro 6 Demo

为什么没有把所有新特性都硬塞进来

有些 Astro 6 新特性虽然很强，但不适合这个仓库直接塞一个“看起来像 demo”的实现。

比如：

Live Content Collections 更适合有外部 CMS 或 API 的场景
CSP API 更偏安全配置和部署策略，不是最适合当前模板直接做成页面演示的能力
Queued Rendering、Rust compiler、Route Caching 目前仍偏实验性

所以这次 demo 的思路不是“功能越多越好”，而是“在当前项目里做一个真实可用、可访问、可解释的 Astro 6 示例”。

访问方式

本地启动项目后，可以直接访问：

/astro-6-demo/

如果你希望，我下一步还可以继续做第二轮 Astro 6 demo，例如：

把整个站点的主字体切到 Fonts API
尝试给当前项目启用 CSP API
单独做一个针对 Live Content Collections 的示例路由

修复首次页面切换时的横向偏移

Sat, 11 Apr 2026 00:00:00 GMT

现象

站点在新启动后，第一次从首页点击 About 或 Archive 时，页面会整体向左偏移一点。第一次触发之后，后续再点同类页面就不会再抖。

这个问题的特征很明确：

不是每次切页都发生
只在首次导航时出现
视觉上像是页面宽度瞬间变了

第一反应

这种“横向偏移一下”的问题，第一反应通常是滚动条宽度变化：

当前页有滚动条，目标页没有滚动条
或者某个脚本在首次导航时才真正接管滚动容器

所以排查从这两类地方开始：

全局滚动条占位
Swup 切页逻辑
OverlayScrollbars 是否接管了 body

实际原因

这次不是单点问题，而是几个因素叠在一起：

1. 页面级滚动条在首次导航时切换状态

原来布局里对整页启用了 OverlayScrollbars(body)。这类库如果接管的是整个页面，而不是局部容器，就很容易在首次真正初始化时替换原生滚动条，从而导致页面宽度发生一次变化。

这正好解释了为什么：

第一次点 About / Archive 会偏移
之后就稳定了

因为“接管动作”只发生一次。

2. 切页时还有一个临时的页面增高补丁

布局里原本还有一个 page-height-extend 元素，在 visit:start 到 visit:end 期间会把页面临时拉高，目的是防止切页滚动动画跳动。

这个补丁会影响页面在切换期间的滚动状态，也会放大滚动条相关的抖动问题。

3. 一部分全局样式是在运行时脚本里导入

OverlayScrollbars 和 PhotoSwipe 的样式原来是在 <script> 里导入的。开发模式下，首次导航时样式可能刚好才完成注入，于是页面首跳更容易出现一次性布局抖动。

最终修复

最后用了几步一起收口：

固定根滚动条占位

在根布局里加上：

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

这样即使页面内容高度变化，滚动条槽位也不会突然出现或消失。

不再让 `OverlayScrollbars` 接管整个 `body`

保留局部滚动区域的自定义滚动条，但去掉页面级 OverlayScrollbars(body)。

这是这次修复里最关键的一步。

去掉切页期间临时增高页面的补丁

删除 page-height-extend 和对应的 Swup 钩子逻辑，避免切页过程中人为改变页面滚动状态。

把全局样式提前到 Astro 前置导入

把：

overlayscrollbars/overlayscrollbars.css
photoswipe/style.css

从运行时脚本里移到布局文件的前置导入区，让它们在页面首屏就已经是稳定状态。

这次改动的结论

这种“只在第一次切页时偏一下”的问题，通常不要只盯着某一段动画代码。

更高概率的根因是：

页面级滚动容器被首次初始化
滚动条是否占位发生变化
全局样式在首次导航时才真正生效

如果项目里同时用了页面过渡、滚动条美化、运行时样式注入，这类问题尤其容易出现。

最后验证

修完后重新执行：

pnpm check
pnpm build

然后重启开发服务器，从首页第一次点击 About 和 Archive 验证。

这次在完成上述调整之后，首次导航的横向偏移已经消失。

从 Astro 5 升级到 Astro 6 的记录

Sat, 11 Apr 2026 00:00:00 GMT

背景

这次升级的直接原因，是项目准备继续引入新的官方集成，而 @astrojs/vue@6 已经要求 astro@^6.0.0。项目原本使用的是 Astro 5.13.10，所以不能只装新集成而不升级主框架。

升级前先确认两件事：

本地和部署环境都要切到 Node 22.12.0+
不要只改 package.json，先阅读 Astro 官方升级指南

官方推荐的升级命令是：

pnpm dlx @astrojs/upgrade

这次升级里最容易踩坑的地方

1. `src/content/config.ts` 不能再直接沿用

Astro 6 要求把内容集合配置放到：

src/content.config.ts

只把文件移动过去还不够。升级后如果集合没有配置 loader，构建阶段会直接把集合视为空集合，然后出现这类报错：

The collection "posts" does not exist or is empty.
About page content not found

修复方式是给每个 collection 显式声明 glob() loader：

import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";
import { z } from "astro/zod";

const postsCollection = defineCollection({
  loader: glob({
    pattern: "**/*.{md,mdx}",
    base: "./src/content/posts",
  }),
  schema: z.object({
    title: z.string(),
    published: z.coerce.date(),
  }),
});

2. `entry.slug` 需要改成 `entry.id`

升级到 Astro 6 之后，内容条目已经不再暴露旧的 slug 字段。之前像下面这种写法都会报错：

params: { slug: entry.slug }
link: `/posts/${post.slug}/`

统一改成：

params: { slug: entry.id }
link: `/posts/${post.id}/`

3. `entry.render()` 需要改成 `render(entry)`

旧代码里如果直接这样写：

const { Content } = await entry.render();

升级后会看到类似报错：

Property 'render' does not exist on type ...

正确写法是从 astro:content 导入 render：

import { render } from "astro:content";

const { Content, headings, remarkPluginFrontmatter } = await render(entry);

4. 嵌套文章的相对图片路径要注意

这个项目里有类似 src/content/posts/guide/index.md 这样的嵌套文章，并且封面图片是相对路径：

image: "./cover.jpeg"

在 Astro 5 的旧逻辑里，代码通过 entry.id 还能拿到接近文件路径的值；升级到 Astro 6 后，entry.id 变成了面向 URL 的 slug，再继续拿它推导目录，就可能把图片目录算错。

更稳妥的做法是改用 entry.filePath 推导文章所在目录，再去解析相对图片。

实际修改清单

这次迁移里做了这些改动：

把内容配置迁到 src/content.config.ts
为 posts 和 spec 补上 glob() loader
把 schema 里的日期改成 z.coerce.date()
把所有 entry.slug 替换为 entry.id
把所有 entry.render() 替换为 render(entry)
用 entry.filePath 修正嵌套文章封面图的相对路径解析

升级后建议执行的检查

每次迁移完成后，我会至少跑下面两条命令：

pnpm check
pnpm build

如果 check 通过但 build 失败，不要只盯着 TypeScript 报错。像内容集合为空、某篇文章取不到、相对图片路径错误，这类问题更容易在真正构建静态页面时暴露出来。

总结

这次从 Astro 5 升到 Astro 6，真正需要处理的重点其实不是依赖版本号本身，而是 content collections 的新规则 和 旧内容条目 API 的替换。

只要把这两块迁完整，再补一轮构建验证，升级难度是可控的。真正浪费时间的，通常都是“已经改了一半，所以看起来像是能跑，但在构建阶段才报空集合”这种半迁移状态。

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

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

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: 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. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

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

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

Custom Titles

The title of the admonition can be customized.

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

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

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

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

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

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

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

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

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

Rendering ANSI escape sequences

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

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

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

Text & Line Markers

Marking full lines & line ranges

// 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"

Selecting line marker types (mark, ins, del)

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

Adding labels to line markers

// 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>

Adding long labels on their own lines

// 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>

Using diff-like syntax

+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

Combining syntax highlighting with diff-like syntax

  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!')
  }

Marking individual text inside lines

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

Regular expressions

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

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

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

Word Wrap

Configuring word wrap per block

// 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'
}

Configuring indentation of wrapped lines

// 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'
}

Collapsible Sections

// 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' })

Line Numbers

Displaying line numbers per block

// 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?')

Changing the starting line number

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

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
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
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

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

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

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

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

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili

Dreamy.

在当前 Astro 6 项目里接入 Vue，并修掉按钮发黑问题

这次改了什么

Vue 接入做法

Demo 页面做了什么

后面为什么又开始修按钮样式

第一层问题：无效的按钮结构

第二层问题：把 bg-none 当成了透明背景

为什么刷新后一开始正常，过一会又出问题

这次改动的边界

当前结果

如果后面继续扩展

Astro 6 新特性梳理和当前项目 Demo

Astro 6 带来了什么

哪些适合在这个项目里直接试

已做的 Demo

1. Astro 6 Fonts API

2. 当前项目迁好的 Content Layer

为什么没有把所有新特性都硬塞进来

访问方式

修复首次页面切换时的横向偏移

现象

第一反应

实际原因

1. 页面级滚动条在首次导航时切换状态

2. 切页时还有一个临时的页面增高补丁

3. 一部分全局样式是在运行时脚本里导入

最终修复

固定根滚动条占位

不再让 OverlayScrollbars 接管整个 body

去掉切页期间临时增高页面的补丁

把全局样式提前到 Astro 前置导入

这次改动的结论

最后验证

从 Astro 5 升级到 Astro 6 的记录

背景

这次升级里最容易踩坑的地方

1. src/content/config.ts 不能再直接沿用

2. entry.slug 需要改成 entry.id

3. entry.render() 需要改成 render(entry)

4. 嵌套文章的相对图片路径要注意

实际修改清单

升级后建议执行的检查

总结

Markdown Extended Features

GitHub Repository Cards

Admonitions

Basic Syntax

Custom Titles

GitHub Syntax

Spoiler

Expressive Code Example

Expressive Code

Syntax Highlighting

Regular syntax highlighting

Rendering ANSI escape sequences

Editor & Terminal Frames

Code editor frames

Terminal frames

Overriding frame types

Text & Line Markers

Marking full lines & line ranges

Selecting line marker types (mark, ins, del)

Adding labels to line markers

Adding long labels on their own lines

Using diff-like syntax

Combining syntax highlighting with diff-like syntax

Marking individual text inside lines

Regular expressions

Escaping forward slashes

Selecting inline marker types (mark, ins, del)

Word Wrap

Configuring word wrap per block

Configuring indentation of wrapped lines

Collapsible Sections

Line Numbers

Displaying line numbers per block

Changing the starting line number

Simple Guides for Fuwari

Front-matter of Posts

第二层问题：把 `bg-none` 当成了透明背景

不再让 `OverlayScrollbars` 接管整个 `body`

1. `src/content/config.ts` 不能再直接沿用

2. `entry.slug` 需要改成 `entry.id`

3. `entry.render()` 需要改成 `render(entry)`