{"id":773,"date":"2024-05-06T13:36:33","date_gmt":"2024-05-06T05:36:33","guid":{"rendered":"https:\/\/www.escook.cn\/?p=773"},"modified":"2024-06-20T11:55:49","modified_gmt":"2024-06-20T03:55:49","slug":"escook-vitepress-theme-doc","status":"publish","type":"post","link":"https:\/\/www.escook.cn\/index.php\/2024\/05\/06\/escook-vitepress-theme-doc\/","title":{"rendered":"@escook\/vitepress-theme \u4f7f\u7528\u6587\u6863"},"content":{"rendered":"

\u4e00\u6b3e\u9762\u5411\u7a0b\u5e8f\u5458\u7684\u6f02\u4eae\u7684 VitePress<\/a> \u4e3b\u9898\u3002<\/p>\n

\u5b89\u88c5\u81ea\u5b9a\u4e49\u4e3b\u9898<\/h2>\n
npm install @escook\/vitepress-theme@latest<\/code><\/pre>\n
\u4f7f\u7528\u81ea\u5b9a\u4e49\u4e3b\u9898<\/h2>\n
\u60a8\u5982\u679c\u53ea\u60f3\u5355\u7eaf\u4f7f\u7528 @escook\/vitepress-theme<\/code> \u8fd9\u6b3e VitePress \u4e3b\u9898\uff0c\u800c\u4e14\u4e0d\u9700\u8981\u57fa\u4e8e\u5b83\u8fdb\u884c\u4e8c\u6b21\u5b9a\u5236\u3002\u8bf7\u4fee\u6539 .vitepress\/theme\/index.ts<\/code> \u6587\u4ef6\uff0c\u6309\u7167\u5982\u4e0b 3 \u4e2a\u6b65\u9aa4\uff0c\u5bfc\u5165\u6b64\u4e3b\u9898\u5e76\u91cd\u65b0\u5bfc\u51fa\u5373\u53ef\uff1a<\/p>\n
\/\/ 1. \u5bfc\u5165 vitepress \u4e3b\u9898\nimport Theme from '@escook\/vitepress-theme'\n\/\/ 2. \u5bfc\u5165\u914d\u5957\u7684 CSS \u6837\u5f0f\uff08\u6b64\u6b65\u9aa4\u4e0d\u80fd\u7701\u7565\uff09\nimport '@escook\/vitepress-theme\/style.css'\n\n\/\/ 3. \u628a\u201c\u5bfc\u5165\u201d\u7684\u4e3b\u9898\u201c\u9ed8\u8ba4\u5bfc\u51fa\u201d\u5373\u53ef\nexport default Theme<\/code><\/pre>\n
\u5982\u679c\u60a8\u60f3\u5728\u6211\u7684\u4e3b\u9898\u57fa\u7840\u4e4b\u4e0a\u8fdb\u884c\u6269\u5c55\uff0c\u4f8b\u5982\uff1a\u66f4\u6539\u67d0\u4e9b\u4e3b\u9898\u6837\u5f0f\u3001\u6dfb\u52a0\u8def\u7531\u5b88\u536b\u3001\u4f7f\u7528\u5e03\u5c40\u63d2\u69fd\u7b49\uff0c\u8bf7\u6309\u7167\u5982\u4e0b\u7684\u65b9\u5f0f\u6539\u9020 .vitepress\/theme\/index.ts<\/code> \u6587\u4ef6\uff1a<\/p>\n
import { h } from 'vue'\nimport type { Theme } from 'vitepress'\n\/\/ 1. \u5bfc\u5165\u5f6c\u54e5\u7684\u4e3b\u9898\nimport escookTheme from '@escook\/vitepress-theme'\n\/\/ 2. \u5bfc\u5165\u914d\u5957\u7684 CSS \u6837\u5f0f\uff08\u6b64\u6b65\u9aa4\u4e0d\u80fd\u7701\u7565\uff09\nimport '@escook\/vitepress-theme\/style.css'\n\/\/ \u5bfc\u5165\u60a8\u7684\u81ea\u5b9a\u4e49\u7684\u6837\u5f0f\nimport '.\/style.css'\n\nexport default {\n  \/\/ 3. \u6307\u5b9a\u8981\u7ee7\u627f\u7684\u4e3b\u9898\uff0c\u5e76\u57fa\u4e8e\u6b64\u4e3b\u9898\u8fdb\u884c\u4e8c\u6b21\u6269\u5c55\n  extends: escookTheme,\n  Layout: () => {\n    return h(escookTheme.Layout, null, {\n      \/\/ https:\/\/vitepress.dev\/guide\/extending-default-theme#layout-slots\n    })\n  },\n  enhanceApp({ app, router, siteData }) {\n    \/\/ \u6269\u5c55\u81ea\u5b9a\u4e49\u7684\u529f\u80fd...\n  }\n} satisfies Theme<\/code><\/pre>\n
\u4f7f\u7528\u914d\u7f6e\u6587\u4ef6<\/h2>\n
\u542f\u7528\u80cc\u666f\u97f3\u4e50\u7684\u5c0f\u7ec4\u4ef6<\/h3>\n
\u5982\u679c\u60a8\u60f3\u4e3a\u81ea\u5df1\u7684\u6587\u6863\u542f\u7528\u80cc\u666f\u97f3\u4e50\u7684\u5c0f\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u53c2\u8003\u5982\u4e0b\u7684 4 \u4e2a\u6b65\u9aa4\uff0c\u4fee\u6539\u9879\u76ee\u4e2d\u7684 .vitepress\/config.mts<\/code> \u914d\u7f6e\u6587\u4ef6\uff1a<\/p>\n
\/\/ 1. \u5bfc\u5165 defineConfigWithTheme \u51fd\u6570\nimport { defineConfigWithTheme } from 'vitepress'\n\/\/ 2. \u5bfc\u5165\u9700\u8981\u7ee7\u627f\u7684\u914d\u7f6e\u5bf9\u8c61\nimport escookConfig from '@escook\/vitepress-theme\/config'\n\nexport default defineConfigWithTheme({\n  \/\/ 3. \u901a\u8fc7 extends \u6307\u5b9a\u8981\u7ee7\u627f\u7684\u914d\u7f6e\n  extends: escookConfig,\n  title: 'My Awesome Project',\n  description: 'A VitePress Site',\n  themeConfig: {\n    \/\/ 4. \u901a\u8fc7\u6b64\u914d\u7f6e\u9879\uff0c\u542f\u7528\u80cc\u666f\u97f3\u4e50\u7684\u5c0f\u7ec4\u4ef6\n    musicBall: {\n      src: 'https:\/\/img3.tukuppt.com\/newpreview_music\/09\/01\/62\/5c89fd22dea6948307.mp3'\n    },\n    \/\/ \u7701\u7565\u5176\u5b83\u914d\u7f6e\u9879...\n  }\n})<\/code><\/pre>\n
\u5176\u4e2d\uff0cmusicBall \u6240\u6709\u53ef\u7528\u7684\u914d\u7f6e\u9879\u5982\u4e0b\uff1a<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u914d\u7f6e\u9879\u540d\u79f0<\/th>\n\u7c7b\u578b<\/th>\n\u9ed8\u8ba4\u503c<\/th>\n\u5fc5\u9009<\/th>\n\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n
src<\/td>\nstring<\/td>\n""<\/td>\n\u5426<\/td>\n\u80cc\u666f\u97f3\u4e50\u7684 src \u5730\u5740\u3002
\u6ce8\u610f\uff1a
1. \u5982\u679c\u6ca1\u6709\u6307\u5b9a\u97f3\u6e90\uff0c\u5219\u9ed8\u8ba4\u4e0d\u5c55\u793a musicBall
2. src \u7684\u4f18\u5148\u7ea7\u9ad8\u4e8e list\uff0c\u540c\u65f6\u6307\u5b9a src \u548c list \u65f6\u4ec5 src \u5c5e\u6027\u751f\u6548<\/td>\n<\/tr>\n
loop<\/td>\nboolean<\/td>\ntrue<\/td>\n\u5426<\/td>\n\u662f\u5426\u5faa\u73af\u64ad\u653e<\/td>\n<\/tr>\n
autoplay<\/td>\nboolean<\/td>\nfalse<\/td>\n\u5426<\/td>\n\u662f\u5426\u81ea\u52a8\u64ad\u653e<\/td>\n<\/tr>\n
enable<\/td>\nboolean<\/td>\ntrue<\/td>\n\u5426<\/td>\n\u662f\u5426\u542f\u7528 musicBall \u5c0f\u7ec4\u4ef6<\/td>\n<\/tr>\n
visible<\/td>\nboolean<\/td>\ntrue<\/td>\n\u5426<\/td>\n\u542f\u7528 musicBall \u5c0f\u7ec4\u4ef6\u540e\uff0c\u5c0f\u7ec4\u4ef6\u5728\u9875\u9762\u4e2d\u662f\u5426\u53ef\u89c1<\/td>\n<\/tr>\n
list<\/td>\nMusicItem[]<\/td>\nundefined<\/td>\n\u5426<\/td>\n\u97f3\u4e50\u5217\u8868\u9879\u7684\u6570\u7ec4\u3002
\u6ce8\u610f\uff1a
1. \u5982\u679c\u540c\u65f6\u6307\u5b9a\u4e86 src \u548c list\uff0c\u5219 list \u4e0d\u751f\u6548
2. \u5982\u679c list \u4e2d\u4ec5\u6709\u4e00\u4e2a MusicItem\uff0c\u5219\u4f1a\u4ee5\u5355\u66f2\u7684\u5f62\u5f0f\u64ad\u653e\uff0c\u4e0d\u4f1a\u5c55\u793a\u97f3\u4e50\u5217\u8868
3. MusicItem \u7684\u7c7b\u578b\u5b9a\u4e49\u662f { name: string; src: string }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u542f\u7528\u9f20\u6807\u70b9\u51fb\u7684 confetti \u6548\u679c<\/h3>\n
\u6b64\u4e3b\u9898\u9ed8\u8ba4\u5df2\u542f\u7528 confetti \u70b9\u51fb\u6548\u679c\u3002\u5982\u679c\u60a8\u60f3\u5173\u95ed\u6b64\u6548\u679c\uff0c\u8bf7\u53c2\u8003\u5982\u4e0b\u7684\u65b9\u5f0f\u4fee\u6539\u9879\u76ee\u4e2d\u7684 .vitepress\/config.mts<\/code> \u914d\u7f6e\u6587\u4ef6\uff1a<\/p>\n
\/\/ 1. \u5bfc\u5165 defineConfigWithTheme \u51fd\u6570\nimport { defineConfigWithTheme } from 'vitepress'\n\/\/ 2. \u5bfc\u5165\u9700\u8981\u7ee7\u627f\u7684\u914d\u7f6e\u5bf9\u8c61\nimport escookConfig from '@escook\/vitepress-theme\/config'\n\nexport default defineConfigWithTheme({\n  \/\/ 3. \u901a\u8fc7 extends \u6307\u5b9a\u8981\u7ee7\u627f\u7684\u914d\u7f6e\n  extends: escookConfig,\n  title: 'My Awesome Project',\n  description: 'A VitePress Site',\n  themeConfig: {\n    \/\/ 4. \u901a\u8fc7\u6b64\u914d\u7f6e\u9879\uff0c\u5173\u95ed\u9f20\u6807\u70b9\u51fb\u7684 confetti \u6548\u679c\n    confetti: false\n    \/\/ \u7701\u7565\u5176\u5b83\u914d\u7f6e\u9879...\n  }\n})<\/code><\/pre>\n
\u6253\u5305 & \u62a5\u9519\u65f6\u7684\u89e3\u51b3\u65b9\u6848<\/h2>\n
\u8fd0\u884c\u4e0b\u9762\u7684\u6253\u5305\u547d\u4ee4\uff0c\u5373\u53ef\u6253\u5305\u751f\u6210\u53ef\u90e8\u7f72\u7684 dist<\/code> \u76ee\u5f55\uff1a<\/p>\n
npm run docs:build<\/code><\/pre>\n
\u5982\u679c\u6253\u5305\u671f\u95f4\u8fd0\u884c\u51fa\u9519\uff0c\u51fa\u73b0\u4e0b\u9762\u622a\u56fe\u4e2d\u7c7b\u4f3c\u7684\u9519\u8bef\u8def\u5f84\u63d0\u793a\uff1a<\/p>\n
\"\"<\/p>\n
\u8fd9\u662f\u56e0\u4e3a\u60a8\u6ca1\u6709\u6b63\u786e\u914d\u7f6e Vite \u7684 Client + SSR<\/code> \u6253\u5305\u9009\u9879\u800c\u5f15\u53d1\u7684\u9519\u8bef\u3002<\/p>\n
\u53ea\u9700\u8981\u4fee\u6539\u4e0b .vitepress<\/code> -> config.mts<\/code> \u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\uff0c\u5728\u5bfc\u51fa\u7684\u914d\u7f6e\u5bf9\u8c61\u4e2d\u65b0\u589e vite.ssr.noExternal<\/code> \u9009\u9879\uff0c\u5373\u53ef\u89e3\u51b3\u6253\u5305\u51fa\u9519\u7684\u95ee\u9898\u3002\u622a\u56fe\u5982\u4e0b\uff1a<\/p>\n
\"\"<\/p>\n
VS Code \u63d2\u4ef6\u63a8\u8350<\/h2>\n