diff --git a/.vitepress/config.mts b/.vitepress/config.mts index ac9c7c6..1c6d314 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -34,7 +34,7 @@ export default withMermaid({ mapAuthors: contributors }), GitChangelogMarkdownSection({ - excludes: ['preview/contributors.md', 'index.md', 'en/index.md', 'ja/index.md'] + excludes: ['preview/contributors.md', 'index.md', 'zh/index.md', 'ja/index.md'] }), ThumbnailHashImages(), ], diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue index 9d99d35..f2765fe 100644 --- a/.vitepress/theme/Layout.vue +++ b/.vitepress/theme/Layout.vue @@ -3,6 +3,15 @@ + + + + + @@ -22,6 +31,7 @@ import HeroImage from './components/home/HeroImage.vue'; import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { watchEffect } from 'vue'; +import Comments from './components/Comments/index.vue'; const data = useData(); const router = useRouter(); diff --git a/.vitepress/theme/components/Comments/index.vue b/.vitepress/theme/components/Comments/index.vue new file mode 100644 index 0000000..a5b376d --- /dev/null +++ b/.vitepress/theme/components/Comments/index.vue @@ -0,0 +1,38 @@ + + + + + \ No newline at end of file diff --git a/.vitepress/theme/css/giscus.css b/.vitepress/theme/css/giscus.css new file mode 100644 index 0000000..354c7ee --- /dev/null +++ b/.vitepress/theme/css/giscus.css @@ -0,0 +1,187 @@ +/* Giscus评论系统主题适配 */ +:root { + /* 浅色主题变量 */ + --giscus-light-bg: #ffffff; + --giscus-light-text: #22272e; + --giscus-light-border: #e1e4e8; + --giscus-light-btn-bg: #f6f8fa; + --giscus-light-btn-hover: #f3f4f6; + --giscus-light-comment-bg: #f6f8fa; + --giscus-light-link: var(--vp-c-brand-2); + --giscus-light-code-bg: rgba(175, 184, 193, 0.2); + + /* 深色主题变量 */ + --giscus-dark-bg: #15202b; + --giscus-dark-text: #adbac7; + --giscus-dark-border: #444c56; + --giscus-dark-btn-bg: #373e47; + --giscus-dark-btn-hover: #444c56; + --giscus-dark-comment-bg: #1e2d3b; + --giscus-dark-link: var(--vp-c-brand-1); + --giscus-dark-code-bg: rgba(99, 110, 123, 0.4); +} + +/* 基础样式 */ +main { + /* 使用您的品牌色重新定义语法高亮 */ + --color-prettylights-syntax-comment: var(--vp-c-text-2); + --color-prettylights-syntax-constant: var(--vp-c-brand-1); + --color-prettylights-syntax-entity: var(--vp-c-brand-2); + --color-prettylights-syntax-storage-modifier-import: var(--vp-c-text-1); + --color-prettylights-syntax-entity-tag: #8ddb8c; + --color-prettylights-syntax-keyword: #f47067; + --color-prettylights-syntax-string: #96d0ff; + --color-prettylights-syntax-variable: #f69d50; + --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b; + --color-prettylights-syntax-invalid-illegal-text: var(--vp-c-text-1); + --color-prettylights-syntax-invalid-illegal-bg: #922323; + --color-prettylights-syntax-carriage-return-text: var(--vp-c-text-1); + --color-prettylights-syntax-carriage-return-bg: #ad2e2c; + --color-prettylights-syntax-string-regexp: #8ddb8c; + --color-prettylights-syntax-markup-list: #eac55f; + --color-prettylights-syntax-markup-heading: var(--vp-c-brand-3); + --color-prettylights-syntax-markup-italic: var(--vp-c-text-1); + --color-prettylights-syntax-markup-bold: var(--vp-c-text-1); + --color-prettylights-syntax-markup-deleted-text: #ffd8d3; + --color-prettylights-syntax-markup-deleted-bg: #78191b; + --color-prettylights-syntax-markup-inserted-text: #b4f1b4; + --color-prettylights-syntax-markup-inserted-bg: #1b4721; + --color-prettylights-syntax-markup-changed-text: #ffddb0; + --color-prettylights-syntax-markup-changed-bg: #682d0f; + --color-prettylights-syntax-markup-ignored-text: var(--vp-c-text-2); + --color-prettylights-syntax-markup-ignored-bg: #255ab2; + --color-prettylights-syntax-meta-diff-range: var(--vp-c-brand-2); + + /* 按钮样式 */ + --color-btn-text: var(--vp-c-text-1); + --color-btn-bg: var(--vp-c-default-soft); + --color-btn-border: var(--vp-c-border); + --color-btn-shadow: 0 0 transparent; + --color-btn-inset-shadow: 0 0 transparent; + --color-btn-hover-bg: var(--vp-c-default-2); + --color-btn-hover-border: var(--vp-c-border); + --color-btn-active-bg: var(--vp-c-default-3); + --color-btn-active-border: var(--vp-c-border); + --color-btn-selected-bg: var(--vp-c-default-3); + + /* 主按钮样式 - 使用您的品牌色 */ + --color-btn-primary-text: var(--vp-c-white); + --color-btn-primary-bg: var(--vp-c-brand-3); + --color-btn-primary-border: transparent; + --color-btn-primary-shadow: 0 0 transparent; + --color-btn-primary-inset-shadow: 0 0 transparent; + --color-btn-primary-hover-bg: var(--vp-c-brand-2); + --color-btn-primary-hover-border: transparent; + --color-btn-primary-selected-bg: var(--vp-c-brand-3); + --color-btn-primary-selected-shadow: 0 0 transparent; + --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.5); + --color-btn-primary-disabled-bg: rgba(163, 104, 184, 0.6); + --color-btn-primary-disabled-border: transparent; + + /* 其他元素 */ + --color-fg-default: var(--vp-c-text-1); + --color-fg-muted: var(--vp-c-text-2); + --color-fg-subtle: var(--vp-c-text-3); + --color-canvas-default: var(--vp-c-bg); + --color-canvas-overlay: var(--vp-c-bg-soft); + --color-canvas-inset: var(--vp-c-bg-alt); + --color-canvas-subtle: var(--vp-c-bg-soft); + --color-border-default: var(--vp-c-border); + --color-border-muted: var(--vp-c-divider); + --color-accent-fg: var(--vp-c-brand-1); + --color-accent-emphasis: var(--vp-c-brand-3); + --color-accent-muted: var(--vp-c-brand-soft); + --color-accent-subtle: var(--vp-c-brand-soft); + + /* 加载动画 */ + --color-homepage-bg: var(--vp-c-bg); +} + +/* 浅色主题适配 */ +@media (prefers-color-scheme: light) { + main { + --color-canvas-default: var(--giscus-light-bg); + --color-canvas-overlay: var(--giscus-light-comment-bg); + --color-canvas-inset: var(--giscus-light-comment-bg); + --color-canvas-subtle: var(--giscus-light-btn-bg); + --color-fg-default: var(--giscus-light-text); + --color-fg-muted: #57606a; + --color-fg-subtle: #6e7781; + --color-border-default: var(--giscus-light-border); + --color-border-muted: #d0d7de; + --color-btn-bg: var(--giscus-light-btn-bg); + --color-btn-hover-bg: var(--giscus-light-btn-hover); + --color-accent-fg: var(--giscus-light-link); + --color-prettylights-syntax-comment: #6e7781; + } +} + +/* 深色主题适配 */ +@media (prefers-color-scheme: dark) { + main { + --color-canvas-default: var(--giscus-dark-bg); + --color-canvas-overlay: var(--giscus-dark-comment-bg); + --color-canvas-inset: var(--giscus-dark-comment-bg); + --color-canvas-subtle: var(--giscus-dark-btn-bg); + --color-fg-default: var(--giscus-dark-text); + --color-fg-muted: #768390; + --color-fg-subtle: #545d68; + --color-border-default: var(--giscus-dark-border); + --color-border-muted: #373e47; + --color-btn-bg: var(--giscus-dark-btn-bg); + --color-btn-hover-bg: var(--giscus-dark-btn-hover); + --color-accent-fg: var(--giscus-dark-link); + --color-prettylights-syntax-comment: #768390; + } +} + +/* 自定义样式 */ +.gsc-reactions-count { + display: none; +} + +.gsc-timeline { + flex-direction: column-reverse; +} + +.gsc-header { + padding-bottom: 1rem; +} + +.gsc-comments>.gsc-header { + order: 1; +} + +.gsc-comments>.gsc-comment-box { + margin-bottom: 1rem; + order: 2; +} + +.gsc-comments>.gsc-timeline { + order: 3; +} + +main .gsc-loading-image { + background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif); +} + +/* 链接颜色 */ +.gsc-comment a { + color: var(--color-accent-fg) !important; +} + +/* 代码块背景 */ +.gsc-comment markdown-body pre { + background-color: var(--color-canvas-subtle) !important; +} + +/* 评论框样式 */ +.gsc-comment-box { + border: 1px solid var(--color-border-default) !important; + background-color: var(--color-canvas-default) !important; +} + +/* 按钮悬停效果 */ +.gsc-reaction-button:hover { + background-color: var(--color-btn-hover-bg) !important; +} \ No newline at end of file diff --git a/.vitepress/theme/css/style.css b/.vitepress/theme/css/style.css index 47b74a4..ffcef2b 100644 --- a/.vitepress/theme/css/style.css +++ b/.vitepress/theme/css/style.css @@ -314,4 +314,5 @@ iframe { font-size: 20px; opacity: 0.5; line-height: 0.8; -} \ No newline at end of file +} + diff --git a/.vitepress/theme/index.mts b/.vitepress/theme/index.mts index 2bb7f7b..f70e93f 100644 --- a/.vitepress/theme/index.mts +++ b/.vitepress/theme/index.mts @@ -1,6 +1,8 @@ // https://vitepress.dev/guide/custom-theme import { h } from 'vue'; import type { Theme } from 'vitepress'; +import { inBrowser } from 'vitepress'; +import busuanzi from 'busuanzi.pure.js'; import DefaultTheme from 'vitepress/theme'; import CustomLayout from './Layout.vue'; @@ -14,7 +16,7 @@ import Contributors from './components/Contributors/index.vue'; import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client'; import { NolebaseInlineLinkPreviewPlugin } from '@nolebase/vitepress-plugin-inline-link-preview/client'; import { NolebaseUnlazyImg } from '@nolebase/vitepress-plugin-thumbnail-hash/client'; - + import { ElCollapse, ElCollapseItem, ElTimeline, ElTimelineItem } from 'element-plus'; import './css/style.css'; @@ -46,5 +48,12 @@ export default { app.use(NolebaseGitChangelogPlugin); app.use(NolebaseInlineLinkPreviewPlugin); + + // 添加浏览量统计 + if (inBrowser) { + router.onAfterRouteChange = () => { + busuanzi.fetch() + } + } } } satisfies Theme diff --git a/package-lock.json b/package-lock.json index 1902955..99eb754 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@nolebase/vitepress-plugin-inline-link-preview": "^2.17.1", "@nolebase/vitepress-plugin-page-properties": "^2.17.1", "@nolebase/vitepress-plugin-thumbnail-hash": "^2.17.1", + "busuanzi.pure.js": "^1.0.3", "chalk": "^5.4.1", "mermaid": "^11.6.0", "ompipe": "^1.0.2", @@ -2727,6 +2728,13 @@ "node": ">=8" } }, + "node_modules/busuanzi.pure.js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/busuanzi.pure.js/-/busuanzi.pure.js-1.0.3.tgz", + "integrity": "sha512-tPULdyx+8NNb9geZYDpktKmHAYx9f2LEOBaHyWCaM7iPEMIa/43KgYAUluuU7YG9UFSOFpj4dO7Nj2Vlu3V9Rg==", + "dev": true, + "license": "MIT" + }, "node_modules/canvaskit-wasm": { "version": "0.40.0", "resolved": "https://registry.npmjs.org/canvaskit-wasm/-/canvaskit-wasm-0.40.0.tgz", diff --git a/package.json b/package.json index ac032c4..7614243 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@nolebase/vitepress-plugin-inline-link-preview": "^2.17.1", "@nolebase/vitepress-plugin-page-properties": "^2.17.1", "@nolebase/vitepress-plugin-thumbnail-hash": "^2.17.1", + "busuanzi.pure.js": "^1.0.3", "chalk": "^5.4.1", "mermaid": "^11.6.0", "ompipe": "^1.0.2",