Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:20:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): PostCard 详情页新增浏览量显示

Browse Source
This commit is contained in:
Ad-closeNN
2026-04-19 22:58:21 +08:00
parent 27a6f94f64
commit 65dc754cae
4 changed files with 152 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/posts/[...slug].astro
+45 -1
View File
@@ -29,6 +29,7 @@ interface Props {
const { entry }: Props = Astro.props;
const { Content, headings, remarkPluginFrontmatter } = await render(entry);
const postSlug = entry.id;
const jsonLd = {
"@context": "https://schema.org",
@@ -62,7 +63,7 @@ const customcover = entry.data.customcover;
{}
]}>
<!-- word count and reading time -->
<div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
<div class="flex flex-row flex-wrap text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
<div class="flex flex-row items-center">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:notes-rounded"></Icon>
@@ -77,6 +78,12 @@ const customcover = entry.data.customcover;
大约 {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
</div>
</div>
<div class="flex flex-row items-center">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:visibility-outline-rounded"></Icon>
</div>
<div class="text-sm" id="post-top-page-views">加载中...</div>
</div>
</div>
<!-- title -->
@@ -164,6 +171,43 @@ const customcover = entry.data.customcover;
</a>
</div>
<script define:vars={{ slug: postSlug }}>
async function fetchTopPageViews() {
const displayElement = document.getElementById('post-top-page-views');
if (!displayElement || displayElement.dataset.umamiState === 'loading' || displayElement.dataset.umamiState === 'loaded') {
return;
}
displayElement.dataset.umamiState = 'loading';
try {
const umamiStore = window['__blogUmami'];
const statsData = await umamiStore?.getStats(`post:${slug}`, (websiteId) => {
const currentTimestamp = Date.now();
return `https://umami.adclosenn.top/api/websites/${websiteId}/stats?startAt=0&endAt=${currentTimestamp}&unit=hour&timezone=${encodeURIComponent('Asia/Shanghai')}&url=%2Fposts%2F${slug}%2F&compare=false`;
});
if (!statsData) {
throw new Error('统计功能未启用');
}
const pageViews = statsData.pageviews?.value || 0;
displayElement.textContent = `浏览量 ${pageViews}`;
displayElement.dataset.umamiState = 'loaded';
} catch (error) {
console.error('Error fetching top page views:', error);
displayElement.textContent = '统计不可用';
displayElement.dataset.umamiState = 'error';
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', fetchTopPageViews);
} else {
fetchTopPageViews();
}
</script>
<!-- 评论区 -->
<script src="https://giscus.app/client.js"
data-repo="Ad-closeNN/blog-friends"