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

分类页开发

This commit is contained in:
xugaoyi 2020-05-02 18:04:18 +08:00
parent 48bcfdc460
commit 78f1abcd2d
18 changed files with 196 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vuepress/config.js
View File

@ -48,8 +48,10 @@ module.exports = {
// '图标链接2'
// ],
// postCategory: '随笔', // 碎片化文章（_posts文件夹内）预设生成的分类，默认'随笔'
// categoriesPage: false, // 是否自动生成分类页面（生成在@pages文件夹），默认true
// categoriesPage: false, // 是否自动生成分类页面（生成在@pages文件夹），默认true。
// tagsPage: false, // 是否自动生成标签页面（生成在@pages文件夹），默认true
// archivesPage: false, // 是否自动生成归档页面（生成在@pages文件夹），默认true
author: { // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, href: String}
name: 'Evan Xu', // 必需

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

@ -61,7 +61,8 @@ module.exports = [
items: [
{text: '分类', link: '/categories/'},
{text: '标签', link: '/tags/'},
{text: '时间轴', link: '/timeline/'},
{text: '归档', link: '/archives/'},
{text: '时间轴(准备弃用)', link: '/timeline/'},
]
}
]

6
docs/@pages/archivesPage.md Normal file
View File

@ -0,0 +1,6 @@
---
archivesPage: true
title: 归档
permalink: /archives/
article: false
---

2
docs/@pages/categoriesPage.md
View File

@ -3,4 +3,4 @@ categoriesPage: true
title: 分类
permalink: /categories/
article: false
---
---

2
docs/@pages/tagsPage.md
View File

@ -3,4 +3,4 @@ tagsPage: true
title: 标签
permalink: /tags/
article: false
---
---

17
theme-vdoing/components/ArchivesPage.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="custom-page archives-page">
<div class="theme-vdoing-wrapper">
归档页
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang='stylus'>
@require '../styles/custom-page.styl'
</style>

2
theme-vdoing/components/CategoriesBar.vue
View File

@ -28,6 +28,8 @@ export default {
<style lang='stylus'>
.categories-wrapper
position sticky
top ($navbarHeight + .9rem)
.title
color var(--textColor)
opacity .8

57
theme-vdoing/components/CategoriesPage.vue
View File

@ -1,25 +1,56 @@
<template>
<div class="categories-page">
<div class="theme-vdoing-wrapper">
分类页
</div>
<div class="custom-page categories-page">
<MainLayout>
<template #mainLeft>
<PostList
:currentPage="currentPage"
:perPage="perPage"
/>
<Pagination
:total="total"
:perPage="perPage"
:currentPage="currentPage"
@getCurrentPage="handlePagination"
v-if="Math.ceil(total / perPage) > 1"
/>
</template>
<template #mainRight>
<CategoriesBar
v-if="$categoriesAndTags.categories.length"
:categoriesData="$categoriesAndTags.categories"
/>
</template>
</MainLayout>
</div>
</template>
<script>
import MainLayout from '@theme/components/MainLayout'
import PostList from '@theme/components/PostList'
import Pagination from '@theme/components/Pagination'
import CategoriesBar from '@theme/components/CategoriesBar'
export default {
data(){
return {
total: 0, // 总长
perPage: 10, // 每页长
currentPage: 1// 当前页
}
},
components: { MainLayout, PostList, Pagination, CategoriesBar },
created() {
this.total = this.$sortPosts.length
},
methods: {
handlePagination(i) { // 分页
this.currentPage = i
}
},
}
</script>
<style lang='stylus'>
@require '../styles/wrapper.styl'
@require '../styles/custom-page.styl'
.categories-page
min-height 100vh
padding-top ($navbarHeight)
@media (min-width $cardLayout)
padding-top ($navbarHeight + 2rem)
background var(--pageBg)
>*
@extend $vdoing-wrapper
</style>

4
theme-vdoing/components/Footer.vue
View File

@ -12,7 +12,7 @@
</a>
</div>
<!--vdoing主题遵循MIT协议，完全开源且免费。如果你对主题的修改并不大，希望你可以保留主题的链接。-->
<!--vdoing主题遵循MIT协议，完全开源且免费。如果你对主题的修改并不大，请保留主题的链接。-->
Theme by <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
<template v-if="footer">
| Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}
@ -44,7 +44,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
font-size 19px
.footer
padding 1.5rem 1.5rem 2rem
padding 5rem 1.5rem 2.5rem
text-align center
color #666
box-sizing border-box

57
theme-vdoing/components/Home.vue
View File

@ -53,9 +53,9 @@
</div>
<!-- banner块 e -->
<div class="main-wrapper">
<div class="main-left">
<MainLayout>
<template #mainLeft>
<PostList
:currentPage="currentPage"
:perPage="perPage"
@ -68,16 +68,32 @@
v-if="Math.ceil(total / perPage) > 1"
/>
<!-- <Content class="theme-vdoing-content custom card-box" /> -->
</div>
<div class="main-right">
</template>
<template #mainRight>
<BloggerBar v-if="$themeConfig.blogger" />
<CategoriesBar :categoriesData="$categoriesAndTags.categories" v-if="$categoriesAndTags.categories.length" />
<TagsBar :tagsData="$categoriesAndTags.tags" v-if="$categoriesAndTags.tags.length" />
</template>
</MainLayout>
<!-- <div class="main-wrapper">
<div class="main-left">
</div>
</div>
<Footer />
<div class="main-right">
</div>
</div> -->
</div>
</template>
@ -85,12 +101,12 @@
import NavLink from "@theme/components/NavLink";
import BScroll from "@better-scroll/core"
import Slide from "@better-scroll/slide"
import MainLayout from '@theme/components/MainLayout'
import PostList from '@theme/components/PostList'
import Pagination from '@theme/components/Pagination'
import BloggerBar from '@theme/components/BloggerBar'
import CategoriesBar from '@theme/components/CategoriesBar'
import TagsBar from '@theme/components/TagsBar'
import Footer from '@theme/components/Footer'
const MOBILE_DESKTOP_BREAKPOINT = 720 // refer to config.styl
@ -110,7 +126,7 @@ export default {
currentPage: 1// 当前页
}
},
components: { NavLink, PostList, BloggerBar, CategoriesBar, TagsBar, Pagination, Footer },
components: { NavLink, MainLayout, PostList, BloggerBar, CategoriesBar, TagsBar, Pagination },
created() {
this.total = this.$sortPosts.length
},
@ -328,25 +344,8 @@ export default {
&.active
background #517EA9
.main-wrapper
margin 2rem auto
max-width $homePageWidth
position relative
display flex
.main-left
flex 1
> *
margin-bottom 4rem
.post-list .card-box,.theme-vdoing-content.card-box
padding 1rem 1.5rem
margin-bottom .9rem
.home-content
padding 1rem 1.5rem 0
.main-right
width 280px
.card-box
margin 0 0 .9rem .9rem
padding .95rem
// .main-wrapper
// margin 2rem auto
.footer
background none

30
theme-vdoing/components/MainLayout.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="main-wrapper">
<div class="main-left">
<slot name="mainLeft" />
</div>
<div class="main-right">
<slot name="mainRight" />
</div>
</div>
</template>
<style lang="stylus">
.main-wrapper
margin 2rem auto 0 auto
max-width $homePageWidth
position relative
display flex
.main-left
flex 1
.theme-vdoing-content.card-box
padding 1rem 1.5rem
margin-bottom .9rem
.home-content
padding 1rem 1.5rem 0
.main-right
width 280px
.card-box
margin 0 0 .9rem .9rem
padding .95rem
</style>

4
theme-vdoing/components/Page.vue
View File

@ -31,7 +31,6 @@
<slot name="bottom" />
</main>
<Footer />
</div>
</template>
@ -42,7 +41,6 @@ import ArticleInfo from './ArticleInfo.vue'
import Catalogue from './Catalogue.vue'
import UpdateArticle from './UpdateArticle.vue'
import Timeline from './Timeline.vue'
import Footer from './Footer.vue'
import RightMenu from './RightMenu.vue'
export default {
@ -58,7 +56,7 @@ export default {
}
},
props: ['sidebarItems'],
components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, Timeline, Footer, RightMenu},
components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, Timeline, RightMenu},
created() {
this.updateBarConfig = this.$themeConfig.updateBar

3
theme-vdoing/components/PostList.vue
View File

@ -94,8 +94,11 @@ export default {
<style lang='stylus'>
.post-list
margin-bottom 4rem
.post
position relative
padding 1rem 1.5rem
margin-bottom 0.9rem
&::before
position absolute
top -1px

13
theme-vdoing/components/TagsPage.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="tags-page">
<div class="custom-page tags-page">
<div class="theme-vdoing-wrapper">
标签页
</div>
@ -12,15 +12,6 @@ export default {
</script>
<style lang='stylus'>
@require '../styles/wrapper.styl'
@require '../styles/custom-page.styl'
.tags-page
min-height calc(100vh - 3.6rem)
padding-top ($navbarHeight)
@media (min-width $cardLayout)
min-height calc(100vh - 5.6rem)
padding-top ($navbarHeight + 2rem)
background var(--pageBg)
>*
@extend $vdoing-wrapper
</style>

4
theme-vdoing/index.js
View File

@ -38,6 +38,10 @@ module.exports = (options, ctx) => {
createPage(sourceDir, 'tagsPage')
}
// 生成归档页
if (themeConfig.archivesPage !== false) {
createPage(sourceDir, 'archivesPage')
}
// resolve algolia
const isAlgoliaSearch = (

9
theme-vdoing/layouts/Layout.vue
View File

@ -39,6 +39,9 @@
<!-- 标签页 -->
<TagsPage v-else-if="$page.frontmatter.tagsPage"/>
<!-- 归档页 -->
<ArchivesPage v-else-if="$page.frontmatter.archivesPage"/>
<!-- 文章页或其他页 -->
<Page
v-else
@ -54,6 +57,8 @@
/>
</Page>
<Footer />
<Buttons
ref="buttons"
@toggle-theme-mode="toggleThemeMode"
@ -67,8 +72,10 @@ import Navbar from '@theme/components/Navbar.vue'
import Page from '@theme/components/Page.vue'
import CategoriesPage from '@theme/components/CategoriesPage.vue'
import TagsPage from '@theme/components/TagsPage.vue'
import ArchivesPage from '@theme/components/ArchivesPage.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import Buttons from '@theme/components/Buttons.vue'
import Footer from '@theme/components/Footer'
import { resolveSidebarItems } from '../util'
import storage from 'good-storage' // 本地存储
import _ from 'lodash'
@ -76,7 +83,7 @@ import _ from 'lodash'
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
export default {
components: { Home, Navbar, Page, CategoriesPage, TagsPage, Sidebar, Buttons },
components: { Home, Navbar, Page, CategoriesPage, TagsPage, ArchivesPage, Sidebar, Footer, Buttons },
data () {
return {

37
theme-vdoing/node_utils/createPage.js
View File

@ -1,35 +1,54 @@
// 生成页面（分类页、标签页等）
// 生成页面（分类页、标签页、归档页...）
const fs = require('fs'); // 文件模块
const path = require('path'); // 路径模块
const chalk = require('chalk') // 命令行打印美化
const log = console.log
function createPage(sourceDir, page) {
const pageRoot = path.join(sourceDir, '@pages', `${page}.md`) // 生成的文件路径
const dirPath = path.join(sourceDir, '@pages') // 生成的文件夹路径
// 判断相应的文件是否已经存在
// 文件夹不存在时
if (!fs.existsSync(dirPath)) {
fs.mkdirSync(dirPath) // 创建文件夹
}
const pagePath = path.join(dirPath, `${page}.md`) // 生成的文件路径
// 文件已经存在时跳出
if (fs.existsSync(pagePath)) {
return
}
// 注意：反引号字符串的格式会映射到文件
let content = ''
if (page.indexOf('categories')) {
if (page.indexOf('categories') > -1) {
content = `---
categoriesPage: true
title: 分类
permalink: /categories/
article: false
---`
} else if (page.indexOf('tags')){
} else if (page.indexOf('tags') > -1){
content = `---
tagsPage: true
title: 标签
permalink: /tags/
article: false
---`
}
fs.writeFileSync(urlsRoot, content)
log(chalk.blue('tip ') + chalk.green(`create page(生成页面): ${page}`))
} else if (page.indexOf('archives') > -1){
content = `---
archivesPage: true
title: 归档
permalink: /archives/
article: false
---`
}
if (content) {
fs.writeFileSync(pagePath, content)
log(chalk.blue('tip ') + chalk.green(`create page(生成页面): ${pagePath}`))
}
}
module.exports = createPage

14
theme-vdoing/styles/custom-page.styl Normal file
View File

@ -0,0 +1,14 @@
// @require './wrapper.styl'
.custom-page
min-height calc(100vh - 3.6rem)
padding-top ($navbarHeight)
@media (min-width $cardLayout)
min-height calc(100vh - 5.6rem)
padding-top $navbarHeight
background var(--pageBg)
>*
// @extend $wrapper
.theme-vdoing-wrapper
margin 0 auto