148 lines
4.0 KiB
Plaintext
148 lines
4.0 KiB
Plaintext
---
|
|
// 静态图片
|
|
// Svg 组件
|
|
import Svg from "@/components/Svg/Svg.astro";
|
|
import { Image } from "astro:assets";
|
|
// 时间处理
|
|
import { fmtTime } from "@/utils/index";
|
|
// 获取用户配置数据
|
|
import SITE_CONFIG from "@/config";
|
|
const { Avatar, Author, Motto, WebSites, GoogleAds, AsideShow } = SITE_CONFIG;
|
|
// 获取文章数据
|
|
import { getCategories, getTags, getRecommendArticles, getCountInfo } from "@/utils/getPostInfo";
|
|
// 获取数据统计
|
|
// 分类列表
|
|
const categories = getCategories();
|
|
// 热门标签
|
|
const tags = getTags().slice(0, 16);
|
|
// 获取网站统计数据
|
|
const CountInfo = getCountInfo();
|
|
// 最新文章
|
|
const recommendArticles = getRecommendArticles();
|
|
// Google 广告组件
|
|
import GoogleAd from "@/components/GoogleAd/GoogleAd.astro";
|
|
// 侧边栏样式
|
|
import "./Aside.less";
|
|
---
|
|
|
|
<aside class="vh-aside">
|
|
<!-- 头像块 -->
|
|
{
|
|
AsideShow.WebSitesShow && (
|
|
<section class="vh-aside-item user">
|
|
<Image class="vh-aside-avatar" src="/assets/images/lazy-loading.webp" data-vh-lz-src={Avatar} alt={Author} width="1" height="1" />
|
|
<span class="vh-aside-auther">{Author}</span>
|
|
<p class="vh-aside-motto">{Motto}</p>
|
|
<section class="vh-aside-links">
|
|
{WebSites.map(item => (
|
|
<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
|
|
<Svg src={item.icon} />
|
|
</a>
|
|
))}
|
|
</section>
|
|
<section class="vh-aside-info">
|
|
<div class="art-item count">
|
|
<span>{CountInfo.ArticleCount}</span>
|
|
<p>文章数</p>
|
|
</div>
|
|
<div class="cat-item count">
|
|
<span>{CountInfo.CategoryCount}</span>
|
|
<p>分类数</p>
|
|
</div>
|
|
<div class="tag-item count">
|
|
<span>{CountInfo.TagCount}</span>
|
|
<p>标签数</p>
|
|
</div>
|
|
</section>
|
|
<canvas class="vh-aside-canvas" width="888" height="1888" />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<!-- 公告块 -->
|
|
{
|
|
SITE_CONFIG.Tips && (
|
|
<section class="vh-aside-item tips">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M3 9.662c2 2.338 2 4.338 0 6.338c3 .5 4.5 1 5 4c2 -3 6 -4 9 0c0 -3 1 -4 4 -4.004q -3 -2.995 0 -5.996c-3 0 -5 -2 -5 -5c-2 4 -5 3 -7.5 -1c-.5 3 -2.5 5 -5.5 5.662" />
|
|
</svg>
|
|
公告
|
|
</span>
|
|
<div class="tips-content">
|
|
<Fragment set:html={SITE_CONFIG.Tips} />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<!-- 分类块 -->
|
|
{
|
|
AsideShow.CategoriesShow && (
|
|
<section class="vh-aside-item cat">
|
|
<h3>分类</h3>
|
|
<div class="vh-aside-cat">
|
|
{categories
|
|
.sort((a: any, b: any) => b.count - a.count)
|
|
.map(i => (
|
|
<a href={`/categories/${i.title}`}>
|
|
<span>{i.title}</span>
|
|
<i>{i.count}</i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<!-- 标签块 -->
|
|
{
|
|
AsideShow.TagsShow && (
|
|
<section class="vh-aside-item tags">
|
|
<h3>热门标签</h3>
|
|
<div class="vh-aside-tags">
|
|
{tags.map(i => (
|
|
<a href={`/tag/${i[0]}`}>
|
|
<span>{i[0]}</span>
|
|
<em>{i[1]}</em>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<section class="sticky-aside">
|
|
<!-- 最新文章块 -->
|
|
{
|
|
recommendArticles.length && AsideShow.recommendArticleShow && (
|
|
<section class="vh-aside-item articles">
|
|
<h3>推荐文章</h3>
|
|
<div class="vh-aside-articles">
|
|
{recommendArticles.map((i, idx) => (
|
|
<a href={`/article/${i.id}`}>
|
|
<span>
|
|
{idx < 3 ? <i>{idx + 1}</i> : <em>{idx + 1}.</em>}
|
|
<cite class="vh-ellipsis">{i.title}</cite>
|
|
</span>
|
|
<time>{fmtTime(i.date, "YYYY-MM-DD A")}</time>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<!-- 谷歌广告块 -->
|
|
{
|
|
GoogleAds.ad_Client && GoogleAds.asideAD_Slot && (
|
|
<section class="vh-aside-item ad">
|
|
<h3>广而告之</h3>
|
|
<GoogleAd className="vh-aside-ad" slotID={GoogleAds.asideAD_Slot} />
|
|
</section>
|
|
)
|
|
}
|
|
</section>
|
|
</aside>
|