Charles7c/vitepress-theme-blog-charles7c-s1
Archived
0
0
Fork 0
Code Issues 75 Pull Requests Actions Packages Projects Releases Wiki Activity

修复：修复我的归档、我的标签页面查询文章阅读数不回显的问题（并优化了记录页面浏览量 API 的调用方式）

Browse Source
This commit is contained in:
Charles7c
2022-11-28 00:13:59 +08:00
parent 0dc4afce07
commit c5a1dd5183
3 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/.vitepress/config/head.ts
View File

@@ -28,10 +28,16 @@ export const head: HeadConfig[] = [
})();`],
// 页面访问量统计
['script', {}, `var pageUrl = location.href;
(function() {
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.charles7c.top/blog/pv?pageUrl=' + pageUrl);
xhr.send();
})();`]
/*['script', {}, `var pageUrl = location.href;
(function() {
var pv = document.createElement("script");
pv.src = "https://api.charles7c.top/blog/pv?pageUrl=" + pageUrl;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(pv, s);
})();`],
})();`]*/
]

2
docs/.vitepress/config/theme.ts
View File

@@ -47,7 +47,7 @@ export const themeConfig: DefaultTheme.Config = {
articleMetadataConfig: {
author: '查尔斯', // 文章全局默认作者名称
authorLink: '/about/me', // 点击作者名时默认跳转的链接
showPv: true // 是否显示文章阅读数, 需要在 docs/.vitepress/theme/api/config.js 及 interface.js 配置好相应 API 接口
showViewCount: true // 是否显示文章阅读数, 需要在 docs/.vitepress/theme/api/config.js 及 interface.js 配置好相应 API 接口
},
// 自定义扩展: 文章版权配置
copyrightConfig: {

15
docs/.vitepress/theme/components/ArticleMetadata.vue
View File

@@ -14,11 +14,11 @@
</span>
<time class="meta-content" :datetime="date.toISOString()" :title="dayjs().to(dayjs(date))">{{ date.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'}) }}</time>
</div>
<div class="meta-item" v-if="showPv">
<div class="meta-item" v-if="showViewCount">
<span class="meta-icon pv">
<svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>阅读数</title><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
</span>
<span id="pv" class="meta-content">0</span>
<span class="meta-content" v-text="viewCount"></span>
</div>
<div class="meta-item" v-if="showCategory">
<span class="meta-icon category">
@@ -71,19 +71,20 @@ const { theme, page } = useData()
const data = reactive({
author: props.article?.author ?? theme.value.articleMetadataConfig.author,
authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
showPv: theme.value.articleMetadataConfig?.showPv ?? false,
showViewCount: theme.value.articleMetadataConfig?.showViewCount ?? false,
viewCount: 0,
date: new Date(props.article.date),
categories: props.article?.categories ?? [],
tags: props.article?.tags ?? [],
showCategory: props.showCategory
})
const { author, authorLink, showPv, date, toDate, categories, tags, showCategory } = toRefs(data)
const { author, authorLink, showViewCount, viewCount, date, toDate, categories, tags, showCategory } = toRefs(data)
if (data.showPv) {
if (data.showViewCount) {
// 记录并获取文章阅读数（使用文章标题 + 发布时间生成 MD5 值，作为文章的唯一标识）
onMounted(() => {
$api.getPv(md5(props.article.title + props.article.date), location.href, function(data) {
document.getElementById("pv").innerText = data
$api.getPv(md5(props.article.title + props.article.date), location.href, function(viewCountData) {
data.viewCount = viewCountData
})
})
}