feat: 目录页中添加titleTag

This commit is contained in:
xugaoyi 2022-02-26 18:20:00 +08:00
parent 684060fd39
commit 7f1747a94e
3 changed files with 24 additions and 31 deletions

View File

@ -1,3 +1,6 @@
/**
* 使JS版本的配置文件可参考https://github.com/xugaoyi/vuepress-theme-vdoing/tree/a2f03e993dd2f2a3afdc57cf72adfc6f1b6b0c32/docs/.vuepress
*/
import { resolve } from 'path'
import { defineConfig4CustomTheme } from 'vuepress/config'
import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
@ -5,7 +8,6 @@ import dayjs from 'dayjs'
import baiduCode from './config/baiduCode' // 百度统计hm码
import htmlModules from './config/htmlModules' // 自定义插入的html块
export default defineConfig4CustomTheme<VdoingThemeConfig>({
theme: 'vdoing', // 使用npm包主题
// theme: resolve(__dirname, '../../vdoing'), // 使用本地主题

View File

@ -13,13 +13,12 @@
<template v-for="(item, index) in getCatalogueList()">
<dl v-if="type(item) === 'array'" :key="index" class="inline">
<dt>
<router-link :to="item[2]">{{
`${index + 1}. ${item[1]}`
}}
<span class="title-tag" v-if="getTitleTag(item[2])">
{{ getTitleTag(item[2]) }}
<router-link :to="item[2]"
>{{ `${index + 1}. ${item[1]}` }}
<span class="title-tag" v-if="item[3]">
{{ item[3] }}
</span>
</router-link>
</router-link>
</dt>
</dl>
<dl v-else-if="type(item) === 'object'" :key="index">
@ -32,11 +31,10 @@
<!-- 二级目录 -->
<template v-for="(c, i) in item.children">
<template v-if="type(c) === 'array'">
<router-link :to="c[2]" :key="i">{{
`${index + 1}-${i + 1}. ${c[1]}`
}}
<span class="title-tag" v-if="getTitleTag(c[2])">
{{ getTitleTag(c[2]) }}
<router-link :to="c[2]" :key="i"
>{{ `${index + 1}-${i + 1}. ${c[1]}` }}
<span class="title-tag" v-if="c[3]">
{{ c[3] }}
</span>
</router-link>
</template>
@ -56,8 +54,8 @@
:key="`${index + 1}-${i + 1}-${ii + 1}`"
>
{{ `${index + 1}-${i + 1}-${ii + 1}. ${cc[1]}` }}
<span class="title-tag" v-if="getTitleTag(cc[2])">
{{ getTitleTag(cc[2]) }}
<span class="title-tag" v-if="cc[3]">
{{ cc[3] }}
</span>
</router-link>
</div>
@ -88,19 +86,6 @@ export default {
}
},
methods: {
/**
* 获取标题标记
*/
getTitleTag(path){
const pages = this.$site.pages;
for (let i = 0; i < pages.length; i++) {
let titleTag = pages[i].frontmatter.titleTag
if(pages[i].path === path && titleTag !== undefined){
return titleTag;
}
}
return false;
},
getPageData() {
const pageComponent = this.$frontmatter.pageComponent
if (pageComponent && pageComponent.data) {

View File

@ -86,11 +86,15 @@ function mapTocToPostSidebar(root) {
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容返回字符串
const { data } = matter(contentStr, {}) // 解析出front matter数据
const permalink = data.permalink || ''
const { permalink = '', titleTag = '' } = data || {}
if (data.title) {
title = data.title
}
postSidebar.push([filename, title, permalink]); // [<路径>, <标题>, <永久链接>]
const item = [filename, title, permalink]
if (titleTag) {
item.push(titleTag)
}
postSidebar.push(item); // [<路径>, <标题>, <永久链接>, <?标题标签>]
})
return postSidebar
@ -136,7 +140,7 @@ function mapTocToSidebar(root, collapsable, prefix = '') {
}
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容返回字符串
const { data } = matter(contentStr, {}) // 解析出front matter数据
const permalink = data.permalink || ''
const { permalink = '', titleTag = '' } = data || {}
// 目录页对应的永久链接,用于给面包屑提供链接
const { pageComponent } = data
@ -147,7 +151,9 @@ function mapTocToSidebar(root, collapsable, prefix = '') {
if (data.title) {
title = data.title
}
sidebar[order] = [prefix + filename, title, permalink]; // [<路径>, <标题>, <永久链接>]
const item = [prefix + filename, title, permalink]
if (titleTag) item.push(titleTag)
sidebar[order] = item; // [<路径>, <标题>, <永久链接>, <?标题标签>]
}
})