新增：目录页面
This commit is contained in:
xugaoyi
parent
709dea77f7
commit
c18cdd2010
File diff suppressed because one or more lines are too long
|
|
@ -35,7 +35,7 @@ module.exports = { // 侧边栏
|
|||
collapsable: false, //是否可折叠，可选的，默认true
|
||||
sidebarDepth: 2, // 深度，可选的, 默认值是 1
|
||||
children: [
|
||||
['01.Git使用手册','Git使用手册'], // 同 {title: 'Git使用文档',path: 'git'}
|
||||
['01.Git使用手册','Git使用手册'], // 同 {path: '01.Git使用手册', title: 'Git使用文档'}
|
||||
['02.GitHub高级搜索技巧','GitHub高级搜索技巧'],
|
||||
['03.Markdown使用教程','Markdown使用教程'],
|
||||
['04.npm常用命令','npm常用命令'],
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
@mouseenter="focus(i)"
|
||||
>
|
||||
|
||||
<a :href="s.path" @click.prevent v-if="s.thirdparty">
|
||||
<a :href="s.path" @click.prevent v-if="!s.thirdparty">
|
||||
<span class="page-title">{{ s.title || s.path }}</span>
|
||||
<span v-if="s.header" class="header">> {{ s.header.title }}</span>
|
||||
</a>
|
||||
|
|
@ -126,7 +126,6 @@ export default {
|
|||
res.push(item)
|
||||
})
|
||||
}
|
||||
|
||||
return res
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@ export default () => {
|
|||
let mark = true;
|
||||
EXCLUDECLASS && e.path && e.path.forEach((item) =>{
|
||||
if(item.nodeType === 1) {
|
||||
if(item.className.indexOf(EXCLUDECLASS) > -1) {
|
||||
mark = false;
|
||||
}
|
||||
typeof item.className === 'string' && item.className.indexOf(EXCLUDECLASS) > -1 ? mark = false : ''
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="theme-default-content">
|
||||
<div class="column-wrapper">
|
||||
<img :src="pageData.imgUrl" />
|
||||
<div class="column-info">
|
||||
<span class="title">{{pageData.title}}</span>
|
||||
<div class="description" v-html="pageData.description"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="catalogue">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageData: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// const { sidebar } = this.$site.themeConfig
|
||||
this.pageData = this.$frontmatter.pageComponent.data
|
||||
this.pageData.title = this.$frontmatter.title
|
||||
console.log(this.pageData)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus" rel="stylesheet/stylus">
|
||||
.column-wrapper
|
||||
display flex
|
||||
margin-top 4.6rem
|
||||
padding-bottom 2rem
|
||||
border-bottom 1px solid #eaecef
|
||||
img
|
||||
width 90px
|
||||
height 90px
|
||||
margin-right 1rem
|
||||
.column-info
|
||||
.title
|
||||
font-size 1.6rem
|
||||
.description
|
||||
color #666
|
||||
margin .5rem 0
|
||||
</style>
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
<main class="page">
|
||||
<slot name="top" />
|
||||
|
||||
<component v-if="pageComponent" :is="pageComponent" />
|
||||
|
||||
<Content class="theme-default-content" />
|
||||
<PageEdit />
|
||||
|
||||
|
|
@ -16,11 +18,17 @@
|
|||
<script>
|
||||
import PageEdit from '@theme/components/PageEdit.vue'
|
||||
import PageNav from '@theme/components/PageNav.vue'
|
||||
import Catalogue from './Catalogue.vue'
|
||||
import Article from './Article.vue'
|
||||
|
||||
export default {
|
||||
components: { PageEdit, PageNav, Article},
|
||||
props: ['sidebarItems']
|
||||
components: { PageEdit, PageNav, Catalogue, Article},
|
||||
props: ['sidebarItems'],
|
||||
computed: {
|
||||
pageComponent () {
|
||||
return this.$frontmatter.pageComponent ? this.$frontmatter.pageComponent.name : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
---
|
||||
# 使用页面组件
|
||||
pageComponent:
|
||||
name: Catalogue # 组件名 Catalogue => 目录页组件
|
||||
data: # 该组件使用的数据
|
||||
imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112120340.png
|
||||
description: 说明：本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href="https://wangdoc.com/javascript/" target="_blank">https://wangdoc.com/javascript/</a>
|
||||
|
||||
title: 《JavaScript教程》笔记
|
||||
date: 2020-01-12 11:51:53
|
||||
permalink: /pages/b002833e252f5727
|
||||
|
|
@ -6,7 +13,8 @@ article: false
|
|||
comment: false
|
||||
editLink: false
|
||||
---
|
||||
<main aria-labelledby="main-title" class="home">
|
||||
|
||||
<!-- <main aria-labelledby="main-title" class="home">
|
||||
<header class="hero">
|
||||
<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112120340.png" alt="hero">
|
||||
<h1 id="main-title">《JavaScript教程》笔记</h1>
|
||||
|
|
@ -21,7 +29,9 @@ editLink: false
|
|||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log(this)
|
||||
const { sidebar } = this.$site.themeConfig
|
||||
console.log(sidebar)
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script> -->
|
||||
|
|
@ -9,7 +9,7 @@ article: false
|
|||
# 关于
|
||||
|
||||
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
|
||||
|
||||
|
||||
博主，从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ footer:
|
|||
---
|
||||
|
||||
## 简介
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/timeline/)）。如果你喜欢这个博客&主题欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取主题源码，或者交换[友链](/pages/844eea1b2387fb96/)。
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站。如果你喜欢这个博客&主题欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取主题源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧。
|
||||
|
||||
</br>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ const fs = require('fs'); // 文件模块
|
|||
const path = require('path'); // 路径模块
|
||||
const ejs = require('ejs'); // ejs模板引擎
|
||||
const logger = require('tracer').colorConsole(); // 控制台工具(用于控制台打印信息包含时间、打印类型、文件及代码行号、对象、颜色)
|
||||
const matter = require('gray-matter'); // FrontMatter解析器
|
||||
|
||||
const docsRoot = path.join(__dirname, '..', 'docs'); // docs文件路径
|
||||
const sidebarPath = path.join(__dirname, '..', 'docs', '.vuepress', 'config', 'sidebar-auto.js'); // 侧边栏js文件要保存的路径
|
||||
|
|
@ -13,7 +14,7 @@ const sidebarPath = path.join(__dirname, '..', 'docs', '.vuepress', 'config', 's
|
|||
|
||||
// sidebar-auto.js代码模板
|
||||
const sidebarTemplate = `
|
||||
// 侧边栏自动生成
|
||||
// 侧边栏自动生成 // 最里面的数组，格式：[<path>, <title>, <permalink>]，其中permalink并非侧边栏所需，而是提供给其他页面使用
|
||||
module.exports = {
|
||||
<% for (let item of sidebarData) { %>
|
||||
"<%- item.path %>": <%- JSON.stringify(item.sidebarArr) %>,
|
||||
|
|
@ -98,7 +99,10 @@ function mapTocToSidebar(root, prefix){
|
|||
logger.error(`该文件 "${file}" 非md文件，不支持非md文件类型`);
|
||||
return;
|
||||
}
|
||||
sidebar[order] = [prefix + filename, title]; // [<前缀加完整文件名>, <文件标题>]
|
||||
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串
|
||||
const { data } = matter(contentStr) // 解析出front matter数据
|
||||
const permalink = data.permalink || ''
|
||||
sidebar[order] = [prefix + filename, title, permalink ]; // [<路径>, <文件标题>, <永久链接>]
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue