docs: 更新文档路径说明并添加GitHub星标组件
- 在frontend-config.md中补充组件源码目录说明 - 统一文档中组件路径的表示方式(@docs/widget → /docs/widget) - 从导航栏社交链接中移除GitHub图标 - 新增GitHubStar组件,在导航栏显示项目星标数 - 添加对应样式支持星标组件显示效果
This commit is contained in:
75
docs/.vitepress/components/githubStar.vue
Normal file
75
docs/.vitepress/components/githubStar.vue
Normal 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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
**这里仅提供一套开箱即用的方案,如果是个人开发者可以根据 [API 文档](../api/overview) 自行编写前端评论组件。**
|
||||
|
||||
组件源码目录:`/docs/widget`
|
||||
|
||||
## 组件特性
|
||||
|
||||
CWD 评论组件采用 **Shadow DOM** 技术构建,基于独立根节点渲染,具备以下优势:
|
||||
|
||||
@@ -37,4 +37,4 @@ npm run build
|
||||
|
||||
如果使用官方评论端 js `https://cwd.js.org/cwd.js`,不需要更新。
|
||||
|
||||
如果你想自行托管,请使用打包命令,对仓库 `@docs/widget` 文件夹进行构建,然后把 `dist` 文件夹中的最新的 `cwd.js` 文件上传到你托管的地方。
|
||||
如果你想自行托管,请使用打包命令,对仓库 `/docs/widget` 文件夹进行构建,然后把 `dist` 文件夹中的最新的 `cwd.js` 文件上传到你托管的地方。
|
||||
|
||||
Reference in New Issue
Block a user