mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
修复:GitHub calendar报错
This commit is contained in:
@ -27,14 +27,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<p>
|
<p>
|
||||||
<a href="https://icp.gov.moe/?keyword=20251453" target="_self">萌ICP备20251453号</a>
|
<a href="https://icp.gov.moe/?keyword=20251453" target="_self"
|
||||||
|
>萌ICP备20251453号</a
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
© 2025 By
|
© 2025 By
|
||||||
<a href="https://github.com/Kisechan" target="_self" rel="nofollow noopener"><strong>Kisechan</strong></a>
|
<a
|
||||||
|
href="https://github.com/Kisechan"
|
||||||
|
target="_self"
|
||||||
|
rel="nofollow noopener"
|
||||||
|
><strong>Kisechan</strong></a
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 0.75em">
|
<p style="font-size: 0.75em">
|
||||||
Made With <a href="https://cn.vuejs.org/">Vue3</a> & <a href="https://element-plus.org/zh-CN/">Element Plus</a>
|
Made With <a href="https://cn.vuejs.org/">Vue3</a> &
|
||||||
|
<a href="https://element-plus.org/zh-CN/">Element Plus</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -48,18 +56,30 @@
|
|||||||
</p>
|
</p>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="github-calendar-container">
|
<div class="github-calendar-container">
|
||||||
<h3><i class="fa-solid fa-code-branch"></i>My Github Contributions</h3>
|
<h3>
|
||||||
|
<i class="fa-solid fa-code-branch"></i>My Github Contributions
|
||||||
|
</h3>
|
||||||
<div id="github-graph"></div>
|
<div id="github-graph"></div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="rss-feed-container">
|
<div class="rss-feed-container">
|
||||||
<h3><i class="fa-solid fa-box-archive"></i>Latest Blog Posts</h3>
|
<h3><i class="fa-solid fa-box-archive"></i>Latest Blog Posts</h3>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col v-for="item in feedItems" :key="item.link" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
<el-col
|
||||||
|
v-for="item in feedItems"
|
||||||
|
:key="item.link"
|
||||||
|
:xs="24"
|
||||||
|
:sm="12"
|
||||||
|
:md="12"
|
||||||
|
:lg="12"
|
||||||
|
:xl="12"
|
||||||
|
>
|
||||||
<el-card class="blog-card" shadow="hover">
|
<el-card class="blog-card" shadow="hover">
|
||||||
<div class="blog-header">
|
<div class="blog-header">
|
||||||
<i class="fa-solid fa-newspaper"></i>
|
<i class="fa-solid fa-newspaper"></i>
|
||||||
<a :href="item.link" target="_self" class="blog-title">{{ item.title }}</a>
|
<a :href="item.link" target="_self" class="blog-title">{{
|
||||||
|
item.title
|
||||||
|
}}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="blog-meta">
|
<div class="blog-meta">
|
||||||
<i class="fa-solid fa-clock-rotate-left"></i>
|
<i class="fa-solid fa-clock-rotate-left"></i>
|
||||||
@ -84,8 +104,16 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="read-more-container">
|
<div class="read-more-container">
|
||||||
<el-tooltip content="前往博客查看更多文章" placement="top" class="read-more-tooltip">
|
<el-tooltip
|
||||||
<el-card class="read-more-card" shadow="hover" @click="goToBlog">
|
content="前往博客查看更多文章"
|
||||||
|
placement="top"
|
||||||
|
class="read-more-tooltip"
|
||||||
|
>
|
||||||
|
<el-card
|
||||||
|
class="read-more-card"
|
||||||
|
shadow="hover"
|
||||||
|
@click="goToBlog"
|
||||||
|
>
|
||||||
<div class="read-more-content">
|
<div class="read-more-content">
|
||||||
<span>Read More</span>
|
<span>Read More</span>
|
||||||
<i class="fa-brands fa-readme"></i>
|
<i class="fa-brands fa-readme"></i>
|
||||||
@ -102,42 +130,31 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import avatarUrl from "@/assets/avatar.png";
|
import avatarUrl from "@/assets/avatar.png";
|
||||||
import { ref, onMounted, onUnmounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
|
import GitHubCalendar from "github-calendar"; // 静态导入
|
||||||
|
|
||||||
const isLoaded = ref(false);
|
|
||||||
const feedItems = ref([]);
|
const feedItems = ref([]);
|
||||||
const githubCalendarInstance = ref(null);
|
|
||||||
|
|
||||||
const loadGitHubCalendar = async () => {
|
const loadGitHubCalendar = () => {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
const calendarContainerSelector = "#github-graph";
|
||||||
const calendarElement = document.getElementById("github-graph");
|
const calendarElement = document.querySelector(calendarContainerSelector);
|
||||||
|
|
||||||
if (!calendarElement) {
|
if (!calendarElement) {
|
||||||
console.error("Element #github-graph not found");
|
console.error(
|
||||||
|
`GitHub Calendar 目标元素未找到: ${calendarContainerSelector}`
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const GitHubCalendar = await import("github-calendar");
|
GitHubCalendar(calendarContainerSelector, "Kisechan", {
|
||||||
githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", {
|
|
||||||
responsive: true,
|
responsive: true,
|
||||||
tooltips: true,
|
tooltips: true,
|
||||||
global_stats: false,
|
global_stats: false,
|
||||||
});
|
});
|
||||||
isLoaded.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const cleanupGitHubCalendar = () => {
|
|
||||||
const calendarElement = document.getElementById("github-graph");
|
|
||||||
if (calendarElement) {
|
|
||||||
calendarElement.innerHTML = "";
|
|
||||||
}
|
|
||||||
if (githubCalendarInstance.value) {
|
|
||||||
githubCalendarInstance.value = null;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchRSSFeed = async () => {
|
const fetchRSSFeed = async () => {
|
||||||
const rssUrl = import.meta.env.VITE_RSS_FEED_URL;
|
const rssUrl = import.meta.env.VITE_RSS_FEED_URL;
|
||||||
console.log("Fetching RSS Feed:", rssUrl);
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(rssUrl);
|
const response = await fetch(rssUrl);
|
||||||
const str = await response.text();
|
const str = await response.text();
|
||||||
@ -173,9 +190,6 @@ onMounted(() => {
|
|||||||
fetchRSSFeed();
|
fetchRSSFeed();
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
cleanupGitHubCalendar();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -356,4 +370,4 @@ h3 {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user