lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增：目录页

This commit is contained in:
xugaoyi 2020-03-11 22:42:36 +08:00
parent c18cdd2010
commit d34f435b18
20 changed files with 218 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/.vuepress/config/nav.js
View File

@ -8,11 +8,11 @@ module.exports = [
{text: 'Vue', link: '/pages/802a1ca6f7b71c59/'},
]},
{text: '学习笔记', items:[
{text: '《JavaScript教程》笔记', link: '/pages/0796ba76b4b55368/'},
{text: '《ES6 教程》笔记', link: '/pages/f344d070a1031ef7/'},
{text: '《Vue》笔记', link: '/pages/114158caa9e96df0/'},
{text: '《TypeScript 从零实现 axios》', link: '/pages/e05dce83e5129785/'},
{text: '小程序笔记', link: '/pages/236ec09c26876b59/'},
{text: '《JavaScript教程》笔记', link: '/note/javascript/'},
{text: '《ES6 教程》笔记', link: '/note/es6/'},
{text: '《Vue》笔记', link: '/note/vue/'},
{text: '《TypeScript 从零实现 axios》', link: '/note/typescript-axios/'},
{text: '小程序笔记', link: '/note/wx-miniprogram/'},
]}
]
},

16
docs/.vuepress/config/sidebar-auto.js
View File

File diff suppressed because one or more lines are too long

93
docs/.vuepress/theme/components/Catalogue.vue
View File

@ -1,43 +1,73 @@
<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>
<img :src="getPageData().imgUrl" />
<dl class="column-info">
<dt class="title">{{getPageData().title}}</dt>
<dd class="description" v-html="getPageData().description"></dd>
</dl>
</div>
<div class="catalogue">
正在开发中...
<div class="catalogue-wrapper">
<div class="catalogue-title">目录</div>
<div class="catalogue-content">
<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]}`}}</router-link>
</dt>
</dl>
<dl v-else-if="type(item) === 'object'" :key="index">
<dt>{{`${index+1}. ${item.title}`}}</dt>
<dd>
<router-link :to="s[2]" v-for="(s, i) in item.children" :key="i">
{{`${index+1}-${i+1}. ${s[1]}`}}
</router-link>
</dd>
</dl>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pageData: {}
methods: {
getPageData() {
const pageData = this.$frontmatter.pageComponent.data
pageData.title = this.$frontmatter.title
return pageData
},
getCatalogueList() {
const { sidebar } = this.$site.themeConfig
const key = this.$frontmatter.pageComponent.data.key
const catalogueList = sidebar[`/${key}/`]
if(!catalogueList) {
console.error('未获取到目录数据，请查看front matter中设置的key是否正确。')
}
return catalogueList
},
type(o) { // 数据类型检查
return Object.prototype.toString.call(o).match(/\[object (.*?)\]/)[1].toLowerCase()
}
},
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">
dl,dd
margin 0
.column-wrapper
display flex
margin-top 4.6rem
margin-top 4.6rem!important
padding-bottom 2rem
border-bottom 1px solid #eaecef
img
width 90px
height 90px
width 80px
height 80px
border-radius 2px
margin-right 1rem
.column-info
.title
@ -45,4 +75,29 @@ export default {
.description
color #666
margin .5rem 0
.catalogue-wrapper
.catalogue-title
font-size 1.5rem
margin 2rem 0
.catalogue-content
dl
margin-bottom 1.8rem
&.inline
display inline-block
width 50%
margin-bottom 1rem
@media (max-width: $MQMobileNarrow)
width 100%
a
width 100%
dt
font-size 1.1rem
dd
margin-top .7rem
a
margin-bottom .5rem
display inline-block
width 50%
@media (max-width: $MQMobileNarrow)
width 100%
</style>

14
docs/.vuepress/theme/components/Home.vue
View File

@ -273,20 +273,6 @@ export default {
overflow hidden
background-image url(../../public/img/bg-line.png);
background-size: 35px 35px;
// &:before{
// content: "";
// position: absolute;
// top: 20%;
// right: 10%;
// width: 80%;
// height: 70%;
// background-image:
// radial-gradient(ellipse closest-side, rgba(31, 40, 55, 0.75), #1f2837),
// url(../../public/img/bg.jpg);
// background-size: cover;
// background-repeat: no-repeat;
// opacity: 0.3;
// }
.home{
background none
position relative

17
docs/00.目录页/01.前端.md Normal file
View File

@ -0,0 +1,17 @@
---
pageComponent:
name: Catalogue # 组件名：Catalogue => 目录页组件
data:
key: 01.前端 # key要设置为指定文件夹的名称
imgUrl: /img/web.png
description: JavaScript、ES6、Vue框架等前端技术
title: 前端
date: 2020-03-11 21:50:53
permalink: /web
sidebar: false
article: false
comment: false
editLink: false
---

16
docs/00.目录页/02.页面.md Normal file
View File

@ -0,0 +1,16 @@
---
pageComponent:
name: Catalogue
data:
key: 02.页面
imgUrl: /img/ui.png
description: html(5)/css(3)，前端页面相关技术
title: 页面
date: 2020-03-11 21:50:54
permalink: /ui
sidebar: false
article: false
comment: false
editLink: false
---

16
docs/00.目录页/03.技术.md Normal file
View File

@ -0,0 +1,16 @@
---
pageComponent:
name: Catalogue
data:
key: 03.技术
imgUrl: /img/other.png
description: 技术文档、教程、技巧、总结等文章
title: 技术
date: 2020-03-11 21:50:55
permalink: /technology
sidebar: false
article: false
comment: false
editLink: false
---

37
docs/01.前端/10.学习笔记/00.《JavaScript教程》笔记.md
View File

@ -1,37 +0,0 @@
---
# 使用页面组件
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
article: false
comment: false
editLink: false
---
<!-- <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>
<p class="description">本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。</p>
<p class="action">
<router-link to="/pages/0796ba76b4b55368/" class="nav-link action-button">立即进入 →</router-link>
</p>
</header>
<div class="custom content default"></div>
</main>
<script>
export default {
mounted() {
const { sidebar } = this.$site.themeConfig
console.log(sidebar)
}
}
</script> -->

17
docs/01.前端/10.学习笔记/10.《ES6 教程》笔记.md
View File

@ -1,17 +0,0 @@
---
title: 《ES6 教程》笔记
date: 2020-01-12 15:49:22
permalink: /pages/5966e7c94628d277
---
<main aria-labelledby="main-title" class="home">
<header class="hero">
<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112160453.png" alt="hero">
<h1 id="main-title">《ES6 教程》笔记</h1>
<p class="description">本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。</p>
<p class="action">
<router-link to="/pages/f344d070a1031ef7/" class="nav-link action-button">立即进入 →</router-link>
</p>
</header>
<div class="custom content default"></div>
</main>

16
docs/01.前端/10.学习笔记/20.《Vue》笔记.md
View File

@ -1,16 +0,0 @@
---
title: 《Vue》笔记
date: 2020-02-04 12:16:12
permalink: /pages/830b1fea836eee46
---
<main aria-labelledby="main-title" class="home">
<header class="hero">
<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200204143633.png" alt="hero">
<h1 id="main-title">《Vue》笔记</h1>
<p class="description">本章内容是博主的Vue学习笔记，以官方文档为准。</p>
<p class="action">
<router-link to="/pages/114158caa9e96df0/" class="nav-link action-button">立即进入 →</router-link>
</p>
</header>
<div class="custom content default"></div>
</main>

18
docs/01.前端/10.学习笔记/30.《TypeScript 从零实现 axios》.md
View File

@ -1,18 +0,0 @@
---
title: 《TypeScript 从零实现 axios》
date: 2020-01-05 10:40:48
permalink: /pages/943193f9d25bc5fb
---
<main aria-labelledby="main-title" class="home">
<header class="hero">
<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200105104632.png" alt="hero">
<h1 id="main-title">TypeScript 从零实现 axios</h1>
<p class="description">学习使用 TypeScript 从零实现 axios 库</p>
<p class="action">
<router-link to="/pages/e05dce83e5129785/" class="nav-link action-button">立即进入 →</router-link>
</p>
</header>
<div class="custom content default"></div>
</main>

15
docs/01.前端/40.学习笔记/00.《JavaScript教程》笔记.md Normal file
View File

@ -0,0 +1,15 @@
---
pageComponent: # 使用页面组件
name: Catalogue # 组件名：Catalogue => 目录页组件
data:
key: 《JavaScript教程》笔记 # key要设置为指定文件夹的名称
imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112120340.png
description: 本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href="https://wangdoc.com/javascript/" target="_blank">JavaScript教程</a>
title: 《JavaScript教程》笔记
date: 2020-01-12 11:51:53
permalink: /note/javascript
article: false
comment: false
editLink: false
---

15
docs/01.前端/40.学习笔记/10.《ES6 教程》笔记.md Normal file
View File

@ -0,0 +1,15 @@
---
pageComponent: # 使用页面组件
name: Catalogue # 组件名：Catalogue => 目录页组件
data: # 该组件使用的数据
key: 《ES6 教程》笔记
imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112160453.png
description: 本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href="https://es6.ruanyifeng.com/" target="_blank">ES6教程</a>
title: 《ES6 教程》笔记
date: 2020-01-12 15:49:22
permalink: /note/es6
article: false
comment: false
editLink: false
---

15
docs/01.前端/40.学习笔记/20.《Vue》笔记.md Normal file
View File

@ -0,0 +1,15 @@
---
pageComponent: # 使用页面组件
name: Catalogue # 组件名：Catalogue => 目录页组件
data: # 该组件使用的数据
key: 《Vue》笔记
imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200204143633.png
description: 本章内容是博主的Vue学习笔记，以官方文档为准。
title: 《Vue》笔记
date: 2020-02-04 12:16:12
permalink: /note/vue
article: false
comment: false
editLink: false
---

15
docs/01.前端/40.学习笔记/30.《TypeScript 从零实现 axios》.md Normal file
View File

@ -0,0 +1,15 @@
---
pageComponent: # 使用页面组件
name: Catalogue # 组件名：Catalogue => 目录页组件
data: # 该组件使用的数据
key: 《TypeScript 从零实现 axios》
imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200105104632.png
description: 学习使用 TypeScript 从零实现 axios 库
title: 《TypeScript 从零实现 axios》
date: 2020-01-05 10:40:48
permalink: /note/typescript-axios
article: false
comment: false
editLink: false
---

3
docs/01.前端/10.学习笔记/40.小程序笔记.md → docs/01.前端/40.学习笔记/40.小程序笔记.md
View File

@ -1,8 +1,9 @@
---
title: 小程序笔记
date: 2019-12-25 14:27:01
permalink: /pages/236ec09c26876b59
permalink: /note/wx-miniprogram
---
# 小程序笔记
## 基础课程部分

2
docs/03.技术/02.GitHub技巧/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md
View File

@ -83,6 +83,8 @@ node utils/baiduPush.js https://xugaoyi.com
```
哈哈，第一个麻烦解决了:smirk:，接下来是解决第二个需要手动运行推送命令的问题。
> **如果你没办法自动生成，你也可以自己手动创建一个`urls.txt`文件，放到github仓库。**
## GitHub Actions 定时运行代码

12
docs/about/01.关于.md → docs/05.关于/01.关于.md
View File

@ -6,15 +6,17 @@ sidebar: false
article: false
---
# 关于
<!-- # 关于 -->
### 📚Blog
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
### 🎨Theme
本站主题是根据[vuepress](https://vuepress.vuejs.org/zh/)的默认主题修改而成，旨在添加博客所需的评论、时间轴、分类、最近更新等，添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等。更多[详情](https://github.com/xugaoyi/blog)。
### 🐼Me
从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
博主，从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
<!-- <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200217210849.gif"> -->
<img src='https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg' alt='本人照片' style="width:106px;">

0
docs/timeline/01.时间轴.md → docs/06.时间轴/01.时间轴.md
View File

15
docs/index.md
View File

@ -6,15 +6,15 @@ tagline: Web前端技术博客，积跬步以至千里，致敬每个爱学习
features:
- title: 前端
details: JavaScript、ES6、Vue框架等前端技术
url: /pages/8143cc480faf9a11/
url: /web/
imgname: /img/web.png
- title: 页面
details: html(5)/css(3)，前端页面相关技术
url: /pages/8309a5b876fc95e3/
url: /ui/
imgname: /img/ui.png
- title: 技术
details: 技术文档、教程、技巧、总结等文章
url: /pages/9a7ee40fc232253e/
url: /technology/
imgname: /img/other.png
aside:
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
@ -41,8 +41,13 @@ footer:
bgImg: /img/footer.png
---
## 简介
这是一个兼具博客文章、个人技能树、文档查找的个人网站。如果你喜欢这个博客&主题欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取主题源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧。
## 关于
### 📚Blog
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
### 🎨Theme
本站主题是根据[vuepress](https://vuepress.vuejs.org/zh/)的默认主题修改而成，旨在添加博客所需的评论、时间轴、分类、最近更新等，添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等。更多[详情](https://github.com/xugaoyi/blog)。
</br>