update
This commit is contained in:
@@ -1,44 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
|
||||
const path = computed(() => route.fullPath.replace('/', ''))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-5 border-t dark:border-gray-800 mt-5 text-zinc-700 dark:text-zinc-300">
|
||||
<div class="px-6 container max-w-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<FooterSite v-if="path === 'about'" />
|
||||
<FooterDeveloper v-else />
|
||||
<FooterLink />
|
||||
<FooterConnect />
|
||||
</div>
|
||||
<footer
|
||||
class="text-center mt-auto w-full flex flex-col gap-2 py-8 px-4 border-t border-white/10 dark:border-white/5">
|
||||
<!-- 一言 -->
|
||||
<p v-if="showHitokoto && quote" class="text-text-muted text-sm m-0 italic">
|
||||
「{{ quote }}」<span v-if="from" class="ml-1.5">—— {{ from }}</span>
|
||||
</p>
|
||||
|
||||
<div class="border-t dark:border-gray-800 mt-5 text-center p-2">
|
||||
© 2020-2024 No Right is reserved. Who cares 🤷♂️? It's
|
||||
<a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline"
|
||||
>open source</a
|
||||
>
|
||||
anyway.
|
||||
<!-- 访问统计 -->
|
||||
<p v-if="showStats && !statsError" class="text-text-muted text-xs m-0">
|
||||
👁️ {{ visitors }} · 📊 {{ pageviews }}
|
||||
</p>
|
||||
|
||||
<a href="/rss.xml" aria-label="Website RSS Feed">
|
||||
<span class="px-3"><Icon name="bi:rss-fill" class="-translate-y-[-20%]" /></span
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 备案信息 -->
|
||||
<p v-if="contact?.beian" class="text-text-muted text-xs m-0">
|
||||
<NuxtLink
|
||||
:to="contact.beianLink || '/'"
|
||||
class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100">
|
||||
{{ contact.beian }}
|
||||
</NuxtLink>
|
||||
</p>
|
||||
|
||||
<!-- 框架与技术栈信息 -->
|
||||
<p class="text-text-muted text-xs m-0">
|
||||
Powered by
|
||||
<a
|
||||
href="https://nuxt.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="text-primary hover:text-accent transition-colors"
|
||||
>Nuxt 4</a
|
||||
>
|
||||
·
|
||||
<a
|
||||
href="https://tailwindcss.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="text-primary hover:text-accent transition-colors"
|
||||
>Tailwind CSS</a
|
||||
>
|
||||
·
|
||||
<a
|
||||
href="https://vuejs.org"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="text-primary hover:text-accent transition-colors"
|
||||
>Vue 3</a
|
||||
>
|
||||
</p>
|
||||
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-if="contact?.customHtml" v-html="contact.customHtml" />
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* we will explain what these classes do next! */
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: all 0.4s;
|
||||
}
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRuntimeConfig } from "#imports";
|
||||
import siteConfig from "~/config";
|
||||
const contact = siteConfig.footer || {};
|
||||
const config = useRuntimeConfig();
|
||||
const quote = ref("");
|
||||
const from = ref("");
|
||||
const pageviews = ref(0);
|
||||
const visitors = ref(0);
|
||||
const statsError = ref(true);
|
||||
const showHitokoto = siteConfig.footer?.hitokoto?.enable;
|
||||
const showStats = ref(siteConfig.umami?.enable);
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
filter: blur(1rem);
|
||||
}
|
||||
</style>
|
||||
const buildHitokotoUrl = () => {
|
||||
const type = siteConfig.footer?.hitokoto?.type;
|
||||
const url = new URL("https://v1.hitokoto.cn/");
|
||||
if (Array.isArray(type)) {
|
||||
type.filter(Boolean).forEach((t) => url.searchParams.append("c", t));
|
||||
} else if (typeof type === "string") {
|
||||
type
|
||||
.split("&")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean)
|
||||
.forEach((t) => url.searchParams.append("c", t));
|
||||
}
|
||||
return url.toString();
|
||||
};
|
||||
|
||||
const fetchHitokoto = async () => {
|
||||
try {
|
||||
const resp = await fetch(buildHitokotoUrl());
|
||||
const data = await resp.json();
|
||||
quote.value = data.hitokoto || "";
|
||||
from.value = data.from || "";
|
||||
} catch (e) {
|
||||
console.warn("Hitokoto fetch failed", e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
if (!siteConfig.umami?.apiBase || !siteConfig.umami?.websiteId) {
|
||||
return;
|
||||
}
|
||||
const apiBase = siteConfig.umami.apiBase;
|
||||
const websiteId = siteConfig.umami.websiteId;
|
||||
const apiKey = config.public.umamiApiKey;
|
||||
|
||||
if (!apiKey) return;
|
||||
|
||||
// 获取统计数据
|
||||
const endAt = Date.now();
|
||||
const startAt = new Date(siteConfig.siteMeta.startDate).getTime();
|
||||
|
||||
const resp = await fetch(
|
||||
`${apiBase}/v1/websites/${websiteId}/stats?startAt=${startAt}&endAt=${endAt}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiKey}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!resp.ok) {
|
||||
console.warn(`Stats API returned ${resp.status}`);
|
||||
statsError.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
if (data) {
|
||||
statsError.value = false;
|
||||
pageviews.value = data.pageviews;
|
||||
visitors.value = data.visitors;
|
||||
}
|
||||
|
||||
if (pageviews.value === 0 && visitors.value === 0) {
|
||||
showStats.value = false;
|
||||
}
|
||||
} catch (e) {
|
||||
statsError.value = true;
|
||||
console.debug("Stats fetch failed (this is normal if blocked by ad blocker):", e.message);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (showHitokoto) fetchHitokoto();
|
||||
if (showStats.value) fetchStats();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user