前言
由于最近的累计魔改的内容已经多到需要记录了，索性也写成一篇魔改文章。
功能增加与删减
V20251130-OFFICIAL
新增内容
- 站点详情卡片中的镜像节点采用
Badge组件，在标题栏中的title与description排列为一行。 - 在分类卡片中的单个分类新增向上标头，让读者查看站点中的分类中有多少篇文章
- 将博主信息简略到
BlogStats.vue中，且增加了在几个小时前在线（该功能暂时还未写完，有兴趣者可以二开）
删减内容
- 站点详情卡片中的左侧图片进行删除，在ts文件中进行删除掉
- 博主信息卡片不在保留，但在该文章中会进行写出来（有兴趣者可以二开）
V20251120-OFFICIAL
新增内容
- 增加站点详情卡片，套用了测试文件（暂时无需删除）
- 增加在分类卡片中的单个分类新增向上标头，让读者查看站点中的文章分布在哪些分类中。
V20251120-OFFICIAL
新增内容
- 增加博主信息卡片
目录结构
/app/components/widget/BlogArchive.vue：分类卡片展示，自动匹配当前站点所有文章的所属分类，并通过该分类中的文章数量进行计数。/app/components/widget/BlogStats.vue：服务卡片的魔改文件，通过增加上方的博主信息来完成魔改/app/components/widget/BlogSiteInfo.vue：站点详情卡片展示，通过调用sitelink.ts完成数据展示。/app/sitelink.ts：站点详情卡片展示，通过调用sitelink.ts完成数据展示。/app/components/widget/BlogAccount.vue：博主信息卡片，是博主信息实践的初代版本，后因占用过大而被撤下。
教程开始
主渲染组件模块
<script setup lang="ts">
const { data: stats } = useFetch('/api/stats')
</script>
<template>
<ZWidget card title="分类展示">
<div class="category_cloud">
<div v-for="item in stats?.categories">
{{ item.name }}
<sup>{{ item.posts }}</sup>
</div>
</div>
</ZWidget>
</template>
<style lang="scss" scoped>
.category_cloud {
display: flex;
flex-wrap: wrap;
// overflow-y: scroll;
gap: 4px;
div {
color: var(--heo-fontcolor) !important;
padding: 2px 8px;
border-radius: 8px;
background: var(--heo-card-bg);
border: var(--style-border);
font-size: 14px !important;
font-weight: 700;
sup {
opacity: .6;
top: -.5em;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
}
</style>
渲染模块数据模块
export interface siteInfo {
title: string
}
export interface siteTabs {
name: string
itemnumber: string
Item: Item[]
}
export interface Item {
name: string
image: string
link: string
desc: string
service: service[]
}
export interface service {
name: string
image: string
link: string
}
export const siteLinkWidgetInfo: siteInfo[] = [
{
title: '站点线路',
}
]
export const siteLinkItems: siteTabs[] = [
{
name: '镜像站点',
itemnumber: '3',
Item: [
{
name: '博客镜像',
image: 'https://sourceimage.s3.bitiful.net/myxz.avif',
link: 'https://blog-v3.edgeone.mirrors.myxz.top',
desc: "可以通过不同线路去访问",
service: [
{
name: 'EdgeOne',
image: '/assets/img/link/service/edgeone.jpg',
link: "https://blog-v3.edgeone.mirrors.myxz.top"
},
{
name: "Vercel",
image: "/assets/img/link/service/vercel.jpg",
link: "https://blog-v3.vercel.mirrors.myxz.top"
},
{
name: "Netlify",
image: "/assets/img/link/service/netlify.jpg",
link: "https://blog-v3.netifly.mirrors.myxz.top"
}
],
},
]
},
{
name: '服务',
itemnumber: '1',
Item: [
{
name: '说说',
image: 'https://sourceimage.s3.bitiful.net/myxz.avif',
link: 'https://blog-v3.myxz.top',
desc: "",
service: [
{
name: 'EdgeOne',
image: '/assets/img/link/service/edgeone.jpg',
link: ""
}
],
}
]
},
]
评论加载中...