Blog底层更新记录

1
// 新增依赖
2
 "@astrojs/markdown-remark": "^7.2.2"     // 独立 markdown 处理
3
 "@iconify/tailwind4": "^1.2.3"           // Tailwind 4 版 Iconify
4
 "@tailwindcss/vite": "^4.3.3"            // Tailwind Vite 插件（替代 @astrojs/tailwind）
5

6
// 移除依赖
7
 "@astrojs/tailwind": "^6.0.2"            // 不再需要
8
 "@iconify/tailwind": "^1.2.0"            // 替换为 tailwind4 版本
9
 "@typescript-eslint/parser": "^8.48.1"   // 不再需要
10
 "sass-embedded": "^1.93.3"               // SCSS → CSS 迁移
11
 "medium-zoom": "^1.1.0"                  // 移除
12
 "remark": "^15.0.1"                      // 由 @astrojs/markdown-remark 替代
13

14
 "typescript": "^5.9.3"
15
 "typescript": "^6.0.3"
16

17
// 其余均为直接版本升级

1
allowBuilds:
2
  sharp: true
3
  swup: false
4
 unrs-resolver: true   // Astro 7 需要

1
 import tailwind from "@astrojs/tailwind";
2
 const playformCompress = (await import("@playform/compress")).default; // 同步 import
3
 import tailwindcss from "@tailwindcss/vite";   // Tailwind 4 使用 Vite 插件
4
 import { unified } from "@astrojs/markdown-remark";  // 独立 markdown processor
5

6
export default defineConfig({
7
  integrations: [
8
    // ... 其他 integrations
9
   tailwind({
10
     configFile: "./tailwind.config.mjs",
11
   }),
12
   // Tailwind 4 不再需要 integration
13
   playformCompress(),
14
   playformCompress({
15
     Image: false,        // 必须禁用，sharp 版本不兼容
16
     JavaScript: false,   // JS 由 terser 处理
17
   }),
18
  ],
19
  markdown: {
20
   remarkPlugins: [...],
21
   rehypePlugins: [...],
22
   processor: unified({    // 新的 markdown processor API
23
     remarkPlugins: [...],
24
     rehypePlugins: [...],
25
   }),
26
  },
27
  vite: {
28
   plugins: [tailwindcss()],  // Tailwind 4 Vite 插件
29
    build: {
30
     cssMinify: "esbuild",    // 必须！lightningcss 不支持 @apply
31
    },
32
   css: {
33
     preprocessorOptions: {
34
       scss: { api: "modern-compiler" },  // SCSS 配置移除
35
     },
36
   },
37
  },
38
 style: {
39
   scss: {
40
     includePaths: ["./src/styles"],  // 移除 SCSS 配置
41
   },
42
 },
43
});

1
// 删除 tailwind.config.mjs
2
 /** @type {import('tailwindcss').Config} */
3
 export default {
4
   content: ["./src/**/*.{astro,html,js,md,mdx,svelte,ts,tsx,vue}"],
5
   plugins: [daisyUI, typography, addDynamicIconSelectors()],
6
   daisyui: {
7
     themes: ["winter", "night"],
8
     darkTheme: "night",
9
     logs: false,
10
   },
11
 };

1
@import "tailwindcss";
2
@import "./global.css";   /* 导入自定义全局样式 */
3

4
@theme {
5
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6
}
7

8
@plugin "@tailwindcss/typography";
9
@plugin "@iconify/tailwind4";
10
@plugin "daisyui" {
11
  themes: winter --default, night --prefersdark;
12
  logs: false;
13
}

1
// DaisyUI v4 (tailwind.config.mjs)
2
 daisyui: {
3
   themes: ["winter", "night"],
4
   darkTheme: "night",
5
   logs: false,
6
 }
7

8
// DaisyUI v5 (tailwind.css)
9
@plugin "daisyui" {
10
  themes: winter --default, night --prefersdark;
11
  logs: false;
12
}

1
import { defineCollection } from "astro:content";
2
import { z } from "astro/zod";
3
import { glob } from "astro/loaders";
4

5
const blog = defineCollection({
6
  loader: glob({
7
    pattern: ["**/*.{md,mdx}"],
8
    base: "./src/content/blog",
9
  }),
10
  schema: z.object({
11
    title: z.string(),
12
    description: z.string(),
13
    pubDate: z.coerce.date(),
14
    updated: z.coerce.date().optional(),
15
    // ... 其他字段
16
  }),
17
});
18

19
export const collections = { blog };

1
 import { getCollection } from "astro:content";
2
 import { getCollection, render } from "astro:content";
3

4
// slug → id
5
 <a href={`/blog/${post.slug}`}>
6
 <a href={`/blog/${post.id}`}>
7

8
// render() 调用
9
 const { Content } = await blog.render();
10
 const { Content } = await render(blog);
11

12
// getStaticPaths
13
 params: { slug: blog.slug },
14
 params: { slug: blog.id },

1
src/styles/global.scss   (719 行, SCSS)
2
tailwind.config.mjs      (JS 配置)
3
src/styles/global.css    (1207 行, 纯 CSS)
4
src/styles/tailwind.css  (Tailwind 4 入口)

1
style: {
2
  scss: {
3
    includePaths: ["./src/styles"],
4
  },
5
},
6
vite.css.preprocessorOptions.scss: {
7
  api: "modern-compiler",
8
},

1
import yaml from "js-yaml";
2
import * as yaml from "js-yaml";

1
serverURL: Astro.props.serverURL,
2
lang: Astro.props.lang ?? "zh",
3
// 改为先解构再传入变量名
4
const { serverURL, lang = "zh" } = Astro.props;
5
// define:vars 中直接引用变量
6
serverURL,
7
lang,

1
@theme {
2
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3
}

1
@layer base {
2
    *,
3
    ::after,
4
    ::before,
5
    ::backdrop,
6
    ::file-selector-button {
7
        border-color: var(--color-gray-200, currentColor);
8
    }
9

10
    input::placeholder,
11
    textarea::placeholder {
12
        color: var(--color-gray-400);
13
    }
14
    /*（可选）可点击元素鼠标指针样式*/
15
    button:not(:disabled),
16
    [role="button"]:not(:disabled) {
17
        cursor: pointer;
18
    }
19
    /*（建议）分割线 hr 上下外边距强制统一，主要是license的区域*/
20
    hr {
21
        margin-block: 1rem !important;
22
    }
23
}

1
const search = new PagefindUI({
2
 element: "#pagefind-search",
3
 bundlePath: "/pagefind/",
4
 showImages: false,
5
 ...
6
});