如果你想获得升级帮助, 你可以加入 Discord 服务器并在 🔼・upgrade 频道发帖, 或者通过 Bluesky 私信我你的项目链接. 我会尽力回答问题或发送 PR 来帮助升级过程.
🚦 影响等级: 重大
shadcn-docs-nuxt 现在使用 Tailwind v4, 这是 Tailwind CSS 框架的重大更新. 你需要更新你的 tailwind.css (请按照下面的迁移步骤操作). 除此之外, 这次更新对大多数用户来说应该是无缝的, 但有一些突变更你需要注意:
将 assets/css/tailwind.css 中的 tailwind.css 文件更新为以下内容:
assets/css/tailwind.css
@import 'tailwindcss';
@config '../../tailwind.config.js';
/* 如果你在 monorepo 中使用 shadcn-docs-nuxt，请更改 .. 的数量以匹配 node_modules 目录 */
@source '../../node_modules/shadcn-docs-nuxt';
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
@utility step {
counter-increment: step;
&:before {
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
@apply -ml-[50px] -mt-1;
content: counter(step);
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border:214.3 31.8% 91.4%;
--input:214.3 31.8% 91.4%;
--ring:221.2 83.2% 53.3%;
--radius: 0.5rem;
}
.dark {
--background:222.2 84% 4.9%;
--foreground:210 40% 98%;
--card:222.2 84% 4.9%;
--card-foreground:210 40% 98%;
--popover:222.2 84% 4.9%;
--popover-foreground:210 40% 98%;
--primary:217.2 91.2% 59.8%;
--primary-foreground:222.2 47.4% 11.2%;
--secondary:217.2 32.6% 17.5%;
--secondary-foreground:210 40% 98%;
--muted:217.2 32.6% 17.5%;
--muted-foreground:215 20.2% 65.1%;
--accent:217.2 32.6% 17.5%;
--accent-foreground:210 40% 98%;
--destructive:0 62.8% 30.6%;
--destructive-foreground:210 40% 98%;
--border:217.2 32.6% 17.5%;
--input:217.2 32.6% 17.5%;
--ring:224.3 76.3% 48%;
}
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
🚦 影响等级: 中等
shadcn-docs-nuxt 现在开箱即支持国际化, 包括以下功能:
- 内容翻译: 现在你可以使用文件结构来翻译你的内容. 你可以在
content 文件夹中为每个语言创建一个文件夹, 内容将根据语言自动翻译. - 界面翻译: 界面现在可以完全翻译, 包括所有组件和页面.
- 语言切换器: 语言切换器现在已完全可用, 允许您轻松切换语言.
- 自动生成链接: 内容中的链接会自动重定向到正确的语言版本. 你不需要在链接中指定语言. 例如，如果你有一个指向
/getting-started 的链接, 当当前语言为 fr 时, 它会自动重定向到 /fr/getting-started.
阅读更多于 API > Configuration > i18n
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
extends: ['shadcn-docs-nuxt'],
i18n: { defaultLocale: 'en', locales: [ { code: 'en', name: 'English', language: 'en-US', }, ], }, compatibilityDate: '2024-07-06',
});
在 i18n 属性中设置 defaultLocale 和 locales 为你偏好的语言. 这用于界面语言. 即使你的应用中没有使用 i18n, 你仍然需要在这里设置界面语言.
当前支持的界面语言有:
en (English)fr (Français)it (Italiano)zh-CN (简体中文)zh-TW (繁體中文)ja (日本語)km (ភាសាខ្មែរ)ru (Русский)ko (한국어)hi (हिन्दी)bn (বাংলা)
阅读更多于 Components > Prose Components > Code Blocks > transformers
console.log('hewwo'); console.log('hello'); console.log('goodbye');
console.log('No errors or warnings');
console.error('Error'); console.warn('Warning');
console.log('Not focused');
console.log('Focused'); console.log('Not focused');
阅读更多于 Components > Prose Components > Code Blocks > collapse-code
const parsedMeta = computed(() => {
const split = meta?.split(' ') ?? [];
const params = new Map<string, string | undefined>();
for (const param of split) {
const [key, val] = param.split('=');
params.set(key, val);
}
return params;
});
你现在可以在 tailwind.config.js 文件中自定义你的字体. shadcn-docs-nuxt 在底层使用了 @nuxt/fonts, 因此你可以使用任何你想要的字体.
export default {
theme: {
extend: {
fontFamily: {
sans: ['Geist'],
mono: ['Geist Mono'],
},
},
},
};
阅读更多于 API > Themes > using-different-fonts
