docs: 更新文档路径说明并添加GitHub星标组件

- 在frontend-config.md中补充组件源码目录说明
- 统一文档中组件路径的表示方式(@docs/widget → /docs/widget)
- 从导航栏社交链接中移除GitHub图标
- 新增GitHubStar组件,在导航栏显示项目星标数
- 添加对应样式支持星标组件显示效果
This commit is contained in:
anghunk
2026-01-30 10:23:50 +08:00
parent 80e234be7c
commit b6f21b309e
6 changed files with 119 additions and 6 deletions

View File

@@ -0,0 +1,75 @@
<template>
<a
class="github-star-link"
href="https://github.com/anghunk/cwd"
target="_blank"
rel="noreferrer"
>
<span class="github-star-icon" aria-hidden="true">
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
/>
</svg>
</span>
<span class="github-star-text">
Star
<span v-if="stars !== null" class="github-star-count">{{ formattedStars }}</span>
</span>
</a>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue';
const stars = ref(null);
const formattedStars = computed(() => {
if (stars.value == null) return '';
const value = stars.value;
if (value >= 1000) {
const base = value / 1000;
const fixed = base >= 10 ? base.toFixed(0) : base.toFixed(1);
return fixed + 'k';
}
return String(value);
});
async function fetchStars() {
try {
const cached = sessionStorage.getItem('cwd_github_stars');
if (cached) {
const parsed = JSON.parse(cached);
if (parsed && typeof parsed.count === 'number') {
stars.value = parsed.count;
return;
}
}
} catch (e) {
}
try {
const response = await fetch('https://api.github.com/repos/anghunk/cwd');
if (!response.ok) {
return;
}
const data = await response.json();
if (data && typeof data.stargazers_count === 'number') {
stars.value = data.stargazers_count;
try {
sessionStorage.setItem(
'cwd_github_stars',
JSON.stringify({ count: data.stargazers_count })
);
} catch (e) {
}
}
} catch (e) {
}
}
onMounted(() => {
fetchStars();
});
</script>

View File

@@ -29,10 +29,7 @@ export default defineConfig({
pattern: 'https://github.com/anghunk/cwd/blob/main/docs/:path',
text: '在 GitHub 上编辑此页面',
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/anghunk/cwd' },
{ icon: 'discord', link: 'https://discord.gg/VahC3r7t' },
],
socialLinks: [{ icon: 'discord', link: 'https://discord.gg/VahC3r7t' }],
lastUpdated: true,
lastUpdatedText: '最后更新于',
footer: {

View File

@@ -22,4 +22,41 @@
.image-src {
max-width: 200px !important;
}
}
.github-star-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
margin-left: 10px;
border-radius: 999px;
border: 1px solid var(--vp-c-border);
font-size: 12px;
color: var(--vp-c-text-1);
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.github-star-link:hover {
background-color: var(--vp-c-bg-soft);
border-color: var(--vp-c-brand-1);
color: var(--vp-c-brand-1);
}
.github-star-icon svg {
width: 16px;
}
.github-star-text {
display: inline-flex;
align-items: center;
}
.github-star-count {
margin-left: 4px;
font-weight: 600;
}

View File

@@ -1,6 +1,7 @@
import DefaultTheme from 'vitepress/theme';
import { h } from 'vue';
import FooterDoc from '../components/footerDoc.vue';
import GitHubStar from '../components/githubStar.vue';
import './custom.css';
export default {
@@ -11,6 +12,7 @@ export default {
return h(Layout, null, {
'doc-footer-before': () => h(FooterDoc),
'home-features-after': () => h('div', { class: 'extra-class' }, [h(FooterDoc)]),
'nav-bar-content-after': () => h(GitHubStar),
});
},
};

View File

@@ -2,6 +2,8 @@
**这里仅提供一套开箱即用的方案,如果是个人开发者可以根据 [API 文档](../api/overview) 自行编写前端评论组件。**
组件源码目录:`/docs/widget`
## 组件特性
CWD 评论组件采用 **Shadow DOM** 技术构建,基于独立根节点渲染,具备以下优势:

View File

@@ -37,4 +37,4 @@ npm run build
如果使用官方评论端 js `https://cwd.js.org/cwd.js`,不需要更新。
如果你想自行托管,请使用打包命令,对仓库 `@docs/widget` 文件夹进行构建,然后把 `dist` 文件夹中的最新的 `cwd.js` 文件上传到你托管的地方。
如果你想自行托管,请使用打包命令,对仓库 `/docs/widget` 文件夹进行构建,然后把 `dist` 文件夹中的最新的 `cwd.js` 文件上传到你托管的地方。