优化日期展示及样式
This commit is contained in:
Han
parent
17f20d3041
commit
473f5deb96
@ -1,7 +1,7 @@
|
||||
---
|
||||
// 获取用户配置数据
|
||||
import SITE_CONFIG from "../config";
|
||||
import { fmtDate } from "../utils/index";
|
||||
import { fmtTime } from "../utils/index";
|
||||
const { Avatar, Author, Motto, WebSites } = SITE_CONFIG;
|
||||
// 获取文章数据
|
||||
import { getCategories, getTags, getRecommendArticles } from "../utils/getPostInfo";
|
||||
@ -78,7 +78,7 @@ import "../styles/components/Aside.less";
|
||||
</p>
|
||||
<p class="info">
|
||||
<span>{(await i).title}</span>
|
||||
<time>{fmtDate((await i).date)}前</time>
|
||||
<time>{fmtTime((await i).date, "YYYY-MM-DD A")}</time>
|
||||
</p>
|
||||
</a>
|
||||
))
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
---
|
||||
// 静态图片
|
||||
import { Image } from "astro:assets";
|
||||
// 格式化时间
|
||||
import { fmtDate } from "../utils/index";
|
||||
// 页面内容的元数据
|
||||
import SITE_CONFIG from "../config";
|
||||
const { CreateTime } = SITE_CONFIG;
|
||||
// 基础 样式
|
||||
import "../styles/Footer.less";
|
||||
---
|
||||
|
||||
<footer class="vh-footer">
|
||||
<main>
|
||||
<p><Image src="/assets/images/footer/ing.svg" alt="韩小韩" width="1" height="1" /><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="#fff" d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM144 221.3c0-33.8 27.4-61.3 61.3-61.3c16.2 0 31.8 6.5 43.3 17.9l7.4 7.4 7.4-7.4c11.5-11.5 27.1-17.9 43.3-17.9c33.8 0 61.3 27.4 61.3 61.3c0 16.2-6.5 31.8-17.9 43.3l-82.7 82.7c-6.2 6.2-16.4 6.2-22.6 0l-82.7-82.7c-11.5-11.5-17.9-27.1-17.9-43.3z"></path></svg><cite>稳定运行</cite><em>{fmtDate(CreateTime)}</em></span><a href="https://analytics.vvhan.com" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="HanAnalytics" src="/assets/images/footer/hananalytics.svg" /></a></p>
|
||||
<p><Image src="/assets/images/footer/ing.svg" alt="韩小韩" width="1" height="1" /><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="#fff" d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM144 221.3c0-33.8 27.4-61.3 61.3-61.3c16.2 0 31.8 6.5 43.3 17.9l7.4 7.4 7.4-7.4c11.5-11.5 27.1-17.9 43.3-17.9c33.8 0 61.3 27.4 61.3 61.3c0 16.2-6.5 31.8-17.9 43.3l-82.7 82.7c-6.2 6.2-16.4 6.2-22.6 0l-82.7-82.7c-11.5-11.5-17.9-27.1-17.9-43.3z"></path></svg><cite>稳定运行</cite><em class="web_time"></em></span><a href="https://analytics.vvhan.com" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="HanAnalytics" src="/assets/images/footer/hananalytics.svg" /></a></p>
|
||||
<p><a href="https://astro.build/" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="Astro" src="/assets/images/footer/astro.svg" /></a><a href="https://github.com/uxiaohan/vhAstro-Theme" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="vhAstro-Theme" src="/assets/images/footer/theme.svg" /></a><a href="/sitemap-index.xml" target="_blank"><Image width="1" height="1" alt="sitemap" src="/assets/images/footer/sitemap.svg" /></a><a href="/rss.xml" target="_blank"><Image width="1" height="1" alt="rss" src="/assets/images/footer/rss.svg" /></a><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="icp" src="/assets/images/footer/icp.svg" /></a></p>
|
||||
</main>
|
||||
</footer>
|
||||
<script>
|
||||
import updateRouter from "../utils/updateRouter";
|
||||
// 格式化时间
|
||||
import { fmtDate } from "../utils/index";
|
||||
// 页面内容的元数据
|
||||
import SITE_CONFIG from "../config";
|
||||
const { CreateTime } = SITE_CONFIG;
|
||||
// 初始化 网站运行时间
|
||||
updateRouter("afterMount", () => {
|
||||
document.querySelector("em.web_time")!.textContent = fmtDate(CreateTime);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
---
|
||||
import { fmtDate } from "../../utils/index";
|
||||
import { getDescription, fmtTime } from "../../utils/index";
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import { render } from "astro:content";
|
||||
@ -39,11 +38,11 @@ import "../../styles/Article.less";
|
||||
<div class="article-meta">
|
||||
<span class="article-meta-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z"></path></svg>
|
||||
<time>{fmtDate(post.data.date)}前</time>
|
||||
<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
|
||||
</span>
|
||||
<span class="article-meta-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z"></path></svg>
|
||||
<time>{fmtDate(post.data.updated || post.data.date)}前</time>
|
||||
<time>{fmtTime(post.data.updated || post.data.date, "YYYY-MM-DD A")}</time>
|
||||
</span>
|
||||
<a class="article-meta-item" href={`/categories/${post.data.categories}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"></path></svg>
|
||||
@ -52,7 +51,7 @@ import "../../styles/Article.less";
|
||||
</div>
|
||||
</header>
|
||||
<Content />
|
||||
<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD")} auther={Author} />
|
||||
<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD A")} auther={Author} />
|
||||
{Twikoo.envId && <Comment envId={Twikoo.envId} />}
|
||||
</article>
|
||||
<Aside />
|
||||
|
||||
@ -164,16 +164,22 @@ section.vh-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.18rem;
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
&>.article-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.56rem;
|
||||
gap: 0.38rem;
|
||||
width: max-content;
|
||||
|
||||
&>svg {
|
||||
flex-shrink: 0;
|
||||
height: 0.86rem;
|
||||
width: 0.86rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&>time {
|
||||
color: #9A9A9A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc.js";
|
||||
import timezone from "dayjs/plugin/timezone.js";
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
// 设置中文语言环境
|
||||
import 'dayjs/locale/zh-cn'
|
||||
dayjs.locale('zh-cn');
|
||||
// 获取文章的描述
|
||||
const getDescription = (post: any, num: number = 150) => (post.rendered ? post.rendered.html.replace(/<[^>]+>/g, "").replace(/\s+/g, "") : post.body.replace(/\n/g, "").replace(/#/g, "")).slice(0, num) || '暂无简介'
|
||||
//处理时间
|
||||
const fmtTime = (time: any, fmt: string = 'MMMM D, YYYY') => dayjs(time).format(fmt)
|
||||
const fmtTime = (time: any, fmt: string = 'MMMM D, YYYY') => dayjs(time).tz('America/New_York').format(fmt)
|
||||
// 处理日期
|
||||
const fmtDate = (time: string | Date) => {
|
||||
const now = dayjs();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user