diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 21fadd1..309b546 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress' import { transformerTwoslash } from '@shikijs/vitepress-twoslash' import { qq } from '../public/icon' +import { version } from '../../package.json' import vite from './vite.config' const GUIDES: DefaultTheme.NavItemWithLink[] = [ @@ -18,6 +19,11 @@ const FEATURE: DefaultTheme.NavItemWithLink[] = [ { text: '组合变量(CombosVars)', link: '/feature/combosVars' }, ] +const VERSION: DefaultTheme.NavItemWithLink[] = [ + { text: '发布日志', link: 'https://github.com/claxjs/ucv/releases' }, + { text: '参与贡献', link: 'https://github.com/claxjs/ucv/blob/main/.github/CONTRIBUTING.md' }, +] + const INTEGRATION: DefaultTheme.NavItemWithLink[] = [ { text: 'Uno', link: '/integration/uno' }, { text: 'Tailwind', link: '/integration/tailwind' }, @@ -27,6 +33,7 @@ const Nav: DefaultTheme.NavItem[] = [ { text: '指南', items: GUIDES }, { text: '功能', items: FEATURE }, { text: '集成', items: INTEGRATION }, + { text: `v${version}`, items: VERSION }, ] const SidebarGuide: DefaultTheme.SidebarItem[] = [ @@ -54,15 +61,29 @@ export default defineConfig({ themeConfig: { logo: '/logo.svg', + search: { provider: 'local', options: { translations: { button: { buttonText: '搜索文档', + buttonAriaLabel: '搜索文档', + }, + modal: { + resetButtonTitle: '清除查询', + noResultsText: '找不到结果', + backButtonTitle: '返回', + displayDetails: '显示详情', + footer: { + selectText: '选择', + navigateText: '切换', + closeText: '关闭', + }, }, }, }, + }, nav: Nav, @@ -72,6 +93,16 @@ export default defineConfig({ { icon: { svg: qq }, link: 'https://qm.qq.com/q/4c3Sn0R98Y' }, ], + returnToTopLabel: '回到顶部', + sidebarMenuLabel: '菜单', + darkModeSwitchLabel: '主题', + lightModeSwitchTitle: '切换到浅色模式', + darkModeSwitchTitle: '切换到深色模式', + + outline: { + label: '页面导航', + }, + sidebar: Sidebar, editLink: { @@ -79,6 +110,14 @@ export default defineConfig({ text: '对本页提出修改建议', }, + lastUpdated: { + text: '最后更新于', + formatOptions: { + dateStyle: 'short', + timeStyle: 'medium', + }, + }, + docFooter: { prev: '上一页', next: '下一页', diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css index a7b06ca..ec59233 100644 --- a/docs/.vitepress/theme/styles.css +++ b/docs/.vitepress/theme/styles.css @@ -17,12 +17,3 @@ --vp-c-brand-soft: var(--vp-u-green-soft); } -/** - * Component: Home - * -------------------------------------------------------------------------- */ -:root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: linear-gradient(292deg, var(--vp-u-green-1), var(--vp-u-green-2)); - --vp-home-hero-image-background-image: linear-gradient(to right, #4CAF50 10%, #8BC34A); - --vp-home-hero-image-filter: blur(100px); -} \ No newline at end of file diff --git a/docs/integration/tailwind.md b/docs/integration/tailwind.md index f1b7f8b..8b3e600 100644 --- a/docs/integration/tailwind.md +++ b/docs/integration/tailwind.md @@ -1,3 +1,25 @@ # Tailwind +配合 `TailwindCSS` 使用 `ucv` + +## 安装 + +::: code-group + +```sh [pnpm] +pnpm add @claxjs/ucv +``` + +```sh [npm] +npm install @claxjs/ucv +``` + +```sh [yarn] +yarn add @claxjs/ucv +``` + +::: + +## 使用 + 😍 无需做任何配置,无论什么文件下都可以使用 diff --git a/docs/integration/uno.md b/docs/integration/uno.md index bab9600..b91b01c 100644 --- a/docs/integration/uno.md +++ b/docs/integration/uno.md @@ -1,17 +1,39 @@ # Uno +配合 `UnoCSS` 使用 `ucv` + +## 安装 + +::: code-group + +```sh [pnpm] +pnpm add @claxjs/ucv +``` + +```sh [npm] +npm install @claxjs/ucv +``` + +```sh [yarn] +yarn add @claxjs/ucv +``` + +::: + +## 使用 + 由于 `uno` 是经过构建工具来提取工具类的,默认只支持 `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro` 若你想在 `ts` 或者 `js` 文件中使用 `ucv`,有两种方法,局部或全局设定,选择你觉得舒服的😁 -## 局部(😋推荐) +### 局部(😋推荐) 在单个文件中使用 `@unocss-include` 注释,可以让 `uno` 自动识别工具类 在 `当前文件内`,只需要注释一次,任意位置的 `工具类` 都会生效 ```ts{3} -// 文件名: button.(ts|js|任意类型) +// 文件: *.(ts|js|任意类型) // @unocss-include export const ButtonClax = ucv({ @@ -21,18 +43,21 @@ export const ButtonClax = ucv({ }) ``` -## 全局 +OK,在你想要的位置添加 `@unocss-include` 注释,然后使用 `ucv` 测试一下吧! + +### 全局 如果你觉得手动注释太麻烦,可以通过修改 `uno.config.*` 来让指定文件接受识别 -```ts{8,11} -// 文件名: uno.config.* +```ts{9,12} +// 文件: uno.config.* export default defineConfig({ content: { pipeline: { include: [ - // 这一行是默认值,我不太能理解为什么要这么设计,与默认值合并不是更好的做法? + // 这一行必须填入! + // PS: 我不太能理解为什么要这么设计,与默认值合并不是更好的做法? /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, // 使 src 文件夹下的所有 js | ts 文件都接受识别 @@ -42,3 +67,5 @@ export default defineConfig({ }, }) ``` + +现在你可以在任意 `js` 或 `ts` 内使用 `ucv` 了,enjoy 💜