81 lines
3.3 KiB
Vue
81 lines
3.3 KiB
Vue
<template>
|
|
<div class="meta-wrapper">
|
|
<div class="meta-item">
|
|
<span class="meta-icon author">
|
|
<svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>原创作者</title><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
|
|
</span>
|
|
<span class="meta-content">
|
|
<a :href="frontmatter?.authorLink ?? theme.articleMetadataConfig.authorLink" title="进入作者主页">{{ frontmatter?.author ?? theme.articleMetadataConfig.author }}</a>
|
|
</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-icon date">
|
|
<svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>发布时间</title><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
|
|
</span>
|
|
<time class="meta-content" :datetime="isoDatetime" :title="toDate">{{ datetime }}</time>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, watchEffect, onMounted } from 'vue'
|
|
import { useData } from 'vitepress'
|
|
import dayjs from 'dayjs'
|
|
import 'dayjs/locale/zh-cn'
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
|
|
// 获取发布时间
|
|
const { theme, frontmatter } = useData()
|
|
const date = computed(() => new Date(frontmatter.value.date))
|
|
const isoDatetime = computed(() => date.value.toISOString())
|
|
const datetime = date.value.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
|
|
|
|
// 获取发布时间的相对时间, 例如: 1天前、2周前、3个月前、4年前
|
|
dayjs.extend(relativeTime)
|
|
dayjs.locale('zh-cn')
|
|
const toDate = dayjs().to(dayjs(frontmatter.value.date))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.meta-wrapper {
|
|
margin-top: 10px;
|
|
}
|
|
.meta-item {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
max-width: 240px;
|
|
color: var(--vp-c-text-2);
|
|
cursor: default;
|
|
font-size: 14px;
|
|
}
|
|
.meta-item:not(:last-child) {
|
|
margin-right: 1.25rem;
|
|
}
|
|
.meta-icon, meta-content {
|
|
display: inline-block;
|
|
margin-right: .375rem;
|
|
vertical-align: middle;
|
|
}
|
|
.meta-icon {
|
|
position: relative;
|
|
bottom: 1.5px;
|
|
}
|
|
.meta-icon.date {
|
|
bottom: 1.3px;
|
|
}
|
|
.meta-icon svg {
|
|
fill: var(--vp-c-text-2);
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.meta-content a {
|
|
font-weight: 400;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
.meta-content a:hover {
|
|
color: var(--vp-c-brand);
|
|
}
|
|
</style> |