105 lines
2.7 KiB
Plaintext
105 lines
2.7 KiB
Plaintext
---
|
|
// 静态图片
|
|
import { Image } from "astro:assets";
|
|
// 时间处理
|
|
import { fmtTime } from "@/utils/index";
|
|
// 获取用户配置数据
|
|
import SITE_CONFIG from "@/config";
|
|
const { Avatar, Author, Motto, WebSites, GoogleAds } = SITE_CONFIG;
|
|
// 获取文章数据
|
|
import { getCategories, getTags, getRecommendArticles } from "@/utils/getPostInfo";
|
|
// 分类列表
|
|
const categories = getCategories();
|
|
// 热门标签
|
|
const tags = getTags();
|
|
// 最新文章
|
|
const recommendArticles = getRecommendArticles();
|
|
// Google 广告组件
|
|
import GoogleAd from "@/components/GoogleAd/GoogleAd.astro";
|
|
// 侧边栏样式
|
|
import "./Aside.less";
|
|
---
|
|
|
|
<aside class="vh-aside">
|
|
<!-- 头像块 -->
|
|
<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">
|
|
<Image src={item.icon} alt={item.text} width="1" height="1" />
|
|
</a>
|
|
))
|
|
}
|
|
</section>
|
|
</section>
|
|
|
|
<!-- 分类块 -->
|
|
<section class="vh-aside-item categories">
|
|
<h3>分类</h3>
|
|
<div class="vh-aside-categories">
|
|
{
|
|
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>
|
|
|
|
<!-- 标签块 -->
|
|
<section class="vh-aside-item tags">
|
|
<h3>热门标签</h3>
|
|
<div class="vh-aside-tags">
|
|
{
|
|
tags.map(i => (
|
|
<a href={`/tag/${i}`}>
|
|
<span>{i}</span>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sticky-aside">
|
|
<!-- 最新文章块 -->
|
|
{
|
|
recommendArticles.length && (
|
|
<section class="vh-aside-item articles">
|
|
<h3>推荐文章</h3>
|
|
<div class="vh-aside-articles">
|
|
{recommendArticles.map(async i => (
|
|
<a href={`/article/${(await i).id}`}>
|
|
<p class="cover">
|
|
<Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={(await i).cover} alt={(await i).title} width="1" height="1" />
|
|
</p>
|
|
<p class="info">
|
|
<span>{(await i).title}</span>
|
|
<time>{fmtTime((await i).date, "YYYY-MM-DD A")}</time>
|
|
</p>
|
|
</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>
|