Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:00:04 -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
.gitignore
+2
View File
@@ -29,3 +29,5 @@ yarn.lock
src/content/.obsidian
.playwright-mcp
.serena
.claude
src/global.d.ts
Vendored
+23 -3
View File
@@ -1,9 +1,26 @@
import type { AstroIntegration } from "@swup/astro";
export {};
type SwupHookHandler = (...args: unknown[]) => void;
type SwupLike = {
hooks: {
on: (eventName: string, handler: SwupHookHandler) => void;
};
};
type BlogPhotoSwipeState = {
lightbox: {
destroy: () => void;
} | null;
hookRegistered: boolean;
pageLoadRegistered: boolean;
};
declare global {
interface Window {
// type from '@swup/astro' is incorrect
swup: AstroIntegration;
swup?: SwupLike;
__blogPhotoSwipe?: BlogPhotoSwipeState;
dataLayer?: unknown[];
pagefind: {
search: (query: string) => Promise<{
results: Array<{
@@ -14,6 +31,9 @@ declare global {
}
}
declare function gtag(...args: unknown[]): void;
declare let dataLayer: unknown[];
interface SearchResult {
url: string;
meta: {
src/layouts/Layout.astro
+79 -22
View File
@@ -482,8 +482,8 @@ function showBanner() {
}
// 在显示Banner前，先移除所有已加载的onload-animation类，防止动画重复触发
const animatedElements = document.querySelectorAll('.onload-animation');
animatedElements.forEach(el => {
const animatedElements = document.querySelectorAll<HTMLElement>('.onload-animation');
animatedElements.forEach((el) => {
el.style.animation = 'none';
el.style.opacity = '1';
});
@@ -635,52 +635,109 @@ window.onresize = () => {
import PhotoSwipeLightbox from "photoswipe/lightbox"
import "photoswipe/style.css"
let lightbox: PhotoSwipeLightbox
let pswp = import("photoswipe")
const zoomTargetSelector = ".custom-md img, #post-cover img"
const pswpModule = import("photoswipe")
type PhotoSwipeState = {
lightbox: PhotoSwipeLightbox | null
hookRegistered: boolean
}
const photoSwipeState = (window.__blogPhotoSwipe ??= {
lightbox: null,
hookRegistered: false,
pageLoadRegistered: false,
}) as PhotoSwipeState & { pageLoadRegistered: boolean }
function getZoomTargets() {
return Array.from(document.querySelectorAll<HTMLImageElement>(zoomTargetSelector))
}
function destroyPhotoSwipe() {
photoSwipeState.lightbox?.destroy()
photoSwipeState.lightbox = null
}
function createPhotoSwipe() {
lightbox = new PhotoSwipeLightbox({
gallery: ".custom-md img, #post-cover img",
pswpModule: () => pswp,
const lightbox = new PhotoSwipeLightbox({
gallery: "body",
children: zoomTargetSelector,
pswpModule: () => pswpModule,
closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
padding: { top: 20, bottom: 20, left: 20, right: 20 },
showHideAnimationType: "fade",
showAnimationDuration: 160,
hideAnimationDuration: 140,
wheelToZoom: true,
arrowPrev: false,
arrowNext: false,
imageClickAction: 'close',
tapAction: 'close',
doubleTapAction: 'zoom',
imageClickAction: "close",
tapAction: "close",
doubleTapAction: "zoom",
})
lightbox.addFilter("domItemData", (itemData, element) => {
if (element instanceof HTMLImageElement) {
itemData.src = element.src
const width = element.naturalWidth || element.width || window.innerWidth
const height = element.naturalHeight || element.height || window.innerHeight
const src = element.currentSrc || element.src
itemData.w = Number(element.naturalWidth || window.innerWidth)
itemData.h = Number(element.naturalHeight || window.innerHeight)
itemData.msrc = element.src
itemData.src = src
itemData.w = Number(width)
itemData.h = Number(height)
itemData.msrc = src
}
return itemData
})
lightbox.init()
photoSwipeState.lightbox = lightbox
}
const setup = () => {
window.swup.hooks.on("page:view", () => {
if (lightbox) {
lightbox.destroy()
function initPhotoSwipe() {
if (photoSwipeState.lightbox || getZoomTargets().length === 0) {
return
}
createPhotoSwipe()
}
function reinitPhotoSwipe() {
destroyPhotoSwipe()
window.requestAnimationFrame(() => {
initPhotoSwipe()
})
}
if (window.swup) {
setup()
function registerPhotoSwipeHook() {
if (photoSwipeState.hookRegistered || !window.swup?.hooks) {
return
}
window.swup.hooks.on("page:view", reinitPhotoSwipe)
photoSwipeState.hookRegistered = true
}
function scheduleInitialPhotoSwipe() {
window.requestAnimationFrame(() => {
initPhotoSwipe()
})
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", scheduleInitialPhotoSwipe, { once: true })
} else {
document.addEventListener("swup:enable", setup)
scheduleInitialPhotoSwipe()
}
if (!photoSwipeState.pageLoadRegistered) {
document.addEventListener("astro:page-load", scheduleInitialPhotoSwipe)
photoSwipeState.pageLoadRegistered = true
}
if (window.swup?.hooks) {
registerPhotoSwipeHook()
} else {
document.addEventListener("swup:enable", registerPhotoSwipeHook, { once: true })
}
</script>
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"