yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat(theme): 新增页面元数据作者信息

Browse Source
This commit is contained in:
pengzhanbo 2024-03-09 00:28:56 +08:00
parent 13bd752369
commit deb17c7ebc
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
theme/src/client/components/PageMeta.vue
View File

@ -12,6 +12,7 @@ import { useExtraBlogData } from '../composables/index.js'
import IconBooks from './icons/IconBooks.vue'
import IconClock from './icons/IconClock.vue'
import IconTag from './icons/IconTag.vue'
import IconUser from './icons/IconUser.vue'
const page = usePageData<PlumeThemePageData>()
const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
@ -33,7 +34,7 @@ const tags = computed(() => {
if (matter.value.tags) {
return matter.value.tags.slice(0, 4).map(tag => ({
name: tag,
colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]],
colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]] ?? [],
}))
}
@ -56,10 +57,14 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
<span v-if="index !== categoryList.length - 1" class="dot">&rsaquo;</span>
</template>
</div>
<h1 v-if="page.isBlogPost" class="page-title" :class="{ padding: !hasMeta }">
<h1 class="page-title" :class="{ padding: !hasMeta }">
{{ page.title }}
</h1>
<div v-if="hasMeta" class="page-meta-wrapper">
<p v-if="matter.author" class="author">
<IconUser class="icon" />
<span>{{ matter.author }}</span>
</p>
<p v-if="readingTime.time" class="reading-time">
<IconBooks class="icon" />
<span>{{ readingTime.words }}</span>
@ -144,14 +149,20 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
margin-right: 0.3rem;
}
.page-meta-wrapper .author .icon,
.page-meta-wrapper .author span {
color: var(--vp-c-text-2);
transition: color var(--t-color);
}
.page-meta-wrapper .tag {
display: inline-block;
padding: 3px 5px;
margin-right: 6px;
font-size: 12px;
line-height: 1;
color: var(--vp-tag-color);
background-color: var(--vp-tag-bg-color);
color: var(--vp-tag-color, var(--vp-c-text-3));
background-color: var(--vp-tag-bg-color, var(--vp-c-default-soft));
border-radius: 3px;
}
@ -168,10 +179,15 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
}
.page-meta-wrapper .create-time {
flex: 1;
justify-content: right;
min-width: 110px;
margin-right: 0;
text-align: right;
}
@media (min-width: 768px) {
.page-meta-wrapper .create-time {
flex: 1;
justify-content: right;
}
}
</style>

8
theme/src/client/components/icons/IconUser.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
<path
fill="currentColor"
d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56"
/>
</svg>
</template>