更新:时间轴页 & README 等

This commit is contained in:
xugaoyi 2020-03-12 17:17:16 +08:00
parent 022083ffbf
commit cc1b0effa1
7 changed files with 427 additions and 403 deletions

View File

@ -1,27 +1,37 @@
# 一个简洁而精致的 博客 & 文档 & 笔记管理 主题
# vuepress-theme-vdoing
## 一个简洁而精致的 笔记管理 & 博客 & 文档 主题
[![CI](https://github.com/xugaoyi/blog/workflows/CI/badge.svg)](https://github.com/xugaoyi/blog/actions?query=workflow%3ACI) [![baiduPush](https://github.com/xugaoyi/blog/workflows/baiduPush/badge.svg)](https://github.com/xugaoyi/blog/actions?query=workflow%3AbaiduPush) [![last-commit](https://img.shields.io/github/last-commit/xugaoyi/blog)](https://github.com/xugaoyi/blog/commits/master) [![GitHub stars](https://img.shields.io/github/stars/xugaoyi/blog)](https://github.com/xugaoyi/blog/stargazers) [![QQ](https://img.shields.io/badge/撩我-894072666-brightgreen)](https://xugaoyi.com/about/#%E8%81%94%E7%B3%BB)
## Introduce
1. 根据 [vuepress](https://vuepress.vuejs.org/zh/) 的默认主题修改而成,仍以官方配置为主,追求**简洁**同时又不失**美观**。
1. 根据 [VuePress](https://vuepress.vuejs.org/zh/) 的默认主题修改而成,仍以官方配置为主,追求**简洁**同时又不失**美观**。
2. 这是一个兼具 **博客文章** & **技术文档** & **学习笔记** 管理博客主题。
2. 这是一个兼具 **笔记管理** & **博客文章** & **技术文档** 的主题。
3. **码开源**,想改哪就改哪。
3. **码开源**,想改哪就改哪。
4. 添加博客所需的**评论**、**时间轴**、**分类**、**最近更新** 等。
5. 可以很方便的管理你的**学习笔记**和**技术文档****导航栏+目录页+侧边栏+扩展的搜索框** 多维度让你快速定位到任何你想要找的笔记或文档。
4. 可以很方便的管理你的**学习笔记**和**技术文档****导航栏+目录页+侧边栏+扩展的搜索框** 多维度的让你快速定位到任何你想要找的笔记或文档。
* 简单的导航栏配置,参照 [官方配置](https://vuepress.vuejs.org/zh/theme/default-theme-config.html#导航栏)
* 简单的目录页配置,参照 [目录页配置](https://github.com/xugaoyi/blog/issues/330)
* 自动生成侧边栏请看第6条
* [扩展的搜索框插件](https://github.com/xugaoyi/blog/blob/master/docs/.vuepress/plugins/enhanced-search/README.md)
* 左右翻页按钮插件(待开发)
* 返回顶部和底部插件(待开发)
5. 添加博客所需的**评论**、**时间轴+分类**、**最近更新** 等。
* [评论栏插件](https://github.com/dongyuanxin/vuepress-plugin-comment)
* [时间轴+分类 页面配置](https://github.com/xugaoyi/blog/issues/331)
> 分类标签数据依赖于目录约定请看第6条
* 最近更新(暂无文档)
6. 自动侧边栏满足不了需求?手动配置侧边栏工作繁杂?没关系,我们有**自动生成侧边栏**
@ -29,11 +39,11 @@
> **分类标签**不需要你每个文件都设置 [Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html),只需按照我们的目录约定,我们会按照目录来进行分类,这更适合管理你的学习笔记。
7. 添加对*前端程序员*很友好**demo演示模块**很方便的在博客中插入demo同时可以查看demo源码跳转到codepen在线编辑。
7. 添加对*前端程序员*很友好**Demo演示模块**很方便的在博客中插入demo同时可以查看demo源码跳转到codepen在线编辑。
[vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
[Demo演示模块插件](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
8. vuepress 的页面链接对于博客来说是一个阴暗面,官方对于 [永久链接](https://vuepress.vuejs.org/zh/guide/permalinks.html) 的处理我个人不是特别喜欢,因此就有了**自动生成永久链接**,你不需要给每个页面定义一个[Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html)指定永久链接我们会通过文件名来生成一个永久链接码到你的页面Front Matter。但这并不妨碍你在特定页面手动指定自己喜欢的永久链接。
8. VuePress 的页面链接对于博客来说是一个阴暗面,官方对于 [永久链接](https://vuepress.vuejs.org/zh/guide/permalinks.html) 的处理我个人不是特别喜欢,因此就有了**自动生成永久链接**,你不需要给每个页面定义一个[Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html)指定永久链接我们会通过文件名来生成一个永久链接码到你的页面Front Matter。但这并不妨碍你在特定页面手动指定自己喜欢的永久链接。
[自动生成的Front Matter](https://github.com/xugaoyi/blog/issues/324)
@ -78,7 +88,7 @@ npm run dev # or yarn dev
]
```
2. **评论模块**
2. **评论模块的搭建**
[使用Gitalk实现静态博客无后台评论系统](https://xugaoyi.com/pages/1da0bf9a988eafe5/)

View File

@ -20,9 +20,10 @@ import PageEdit from '@theme/components/PageEdit.vue'
import PageNav from '@theme/components/PageNav.vue'
import Catalogue from './Catalogue.vue'
import Article from './Article.vue'
import Timeline from './Timeline.vue'
export default {
components: { PageEdit, PageNav, Catalogue, Article},
components: { PageEdit, PageNav, Catalogue, Article, Timeline},
props: ['sidebarItems'],
computed: {
pageComponent () {

View File

@ -0,0 +1,223 @@
<template>
<div class="timeline-wrapper theme-default-content">
<div class="tags">
<a href="#全部" :class="{active: currentTag === '全部'}" :style="randomBgcolor()" @click="toggleTag('全部')">全部</a>
<a
:class="{active: currentTag === key}"
v-for="(item, key) of getPages.tagGroup"
:style="randomBgcolor()"
@click="toggleTag(key)"
:key="key"
:href="'#'+key"
>
{{key}}
</a>
</div>
<div class="timeline">
<transition-group tag="ul">
<li class="desc" key="0">{{pageData.slogan}}</li>
<template v-for="yearItem in tagPages()">
<li :key="yearItem.year">
<h3 class="year">{{yearItem.year}}</h3>
<div class="year-wrapper">
<transition-group tag="span">
<router-link :to="item.path" v-for="item in yearItem.pageList" :key="item.path.slice(-6)">
<span class="date">{{item.formatDay}}</span>
<span class="title">{{item.title}}</span>
</router-link>
</transition-group>
</div>
</li>
</template>
</transition-group>
</div>
</div>
</template>
<script>
import { getPagesList } from '../util/getArticleDate'
export default {
data() {
return {
pageData: {
tagBgColor: ['#11a8cd', '#F8B26A', '#67CC86', '#E15B64', '#F47E60', '#849B87'],
slogan: '只争朝夕,不负韶华!( •̀ ω •́ )✧'
},
currentTag: "",
posts: [],
}
},
mounted() {
const fmData = this.$frontmatter.pageComponent.data
if(fmData && fmData.tagBgColor) {
this.pageData.tagBgColor = fmData.tagBgColor
}
if(fmData && fmData.slogan) {
this.pageData.slogan = fmData.slogan
}
this.posts = this.$site.pages
document.body.style="overflow-y: scroll;" // tag
this.handleHashTag()
window.onhashchange = () => {
this.handleHashTag()
}
},
computed: {
getPages() {
return getPagesList(this.posts)
}
},
watch: {
currentTag(tag) {
document.body.setAttribute('id', tag); // vue-router
}
},
methods: {
handleHashTag() {
const hashTag = decodeURIComponent(window.location.hash.slice(1))
this.currentTag = hashTag ? hashTag : '全部'
},
//
tagPages() {
if (this.currentTag === "全部") {
return this.getPages.allPage
} else {
return this.getPages.tagGroup[this.currentTag]
}
},
//
toggleTag(tag) {
this.currentTag = tag
},
//
randomBgcolor() {
const tagBgColor = this.pageData.tagBgColor
return { background: `${tagBgColor[Math.floor(Math.random() * tagBgColor.length)]}`}
},
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.timeline-wrapper
.tags
margin-bottom 30px
a
vertical-align: middle;
margin: 4px 4px 10px;
padding: 5px 8px;
display: inline-block;
cursor: pointer;
border-radius: .25rem;
background: #E15B64;
color: #fff;
line-height: 13px;
font-size: 13px;
transition: all .5s;
opacity: 0.9;
box-shadow: 2px 2px 5px #ccc;
&.active
transform: scale(1.2);
opacity: 1;
&:hover
text-decoration: none!important;
&:not(.active):hover
transform: scale(1.05);
.v-enter{
opacity: 0;
transform: translateY(-30px);
}
.v-leave-active{
display:none;
}
.v-leave{
opacity: 0;
}
ul
list-style: none;
.timeline ul
box-sizing: border-box;
margin: 4rem auto;
position: relative;
&:after
content: " ";
position: absolute;
top: 14px;
left: 0;
z-index: -1;
margin-left: -2px;
width: 4px;
height: 100%;
background: #EAECEF;
>li
transition: all .25s ease-in-out;
margin-bottom: 55px;
.year
margin: 0;
font-weight: 700;
font-size: 26px;
.desc,.year
position: relative;
.desc:before,.year:before
content: " ";
position: absolute;
z-index: 2;
left: -20px;
top: 50%;
margin-left: -4px;
margin-top: -4px;
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #EAECEF;
border-radius: 50%;
.year-wrapper
padding-left: 0!important;
a
display: flex;
padding: 30px 0 10px;
list-style: none;
border-bottom: 1px dashed #EAECEF;
position: relative;
color: #666;
transition: all 0.25s ease-in-out;
.date
min-width: 40px;
line-height: 30px;
font-size: 13px;
margin-right: 5px;
color: #999;
&:before
content: " ";
position: absolute;
left: -19px;
top: 41px;
width: 6px;
height: 6px;
margin-left: -4px;
background: #fff;
border-radius: 50%;
border: 1px solid #EAECEF;
z-index: 2;
&:hover
text-decoration:none
color: $accentColor
.date
color: $accentColor
.date:before
background: $accentColor
</style>

View File

@ -12,7 +12,7 @@ article: false
这是一个兼具博客文章、个人技能树、文档查找的个人网站主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
### 🎨Theme
本站主题是根据[vuepress](https://vuepress.vuejs.org/zh/)的默认主题修改而成,旨在添加博客所需的评论、时间轴、分类、最近更新等,添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等。更多[详情](https://github.com/xugaoyi/blog)。
本站主题是根据[VuePress](https://vuepress.vuejs.org/zh/)的默认主题修改而成。取名[Vdoing](https://github.com/xugaoyi/blog)(维度),旨在方便你多维度的快速的管理和查找学习笔记以及技术文档。添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等,添加博客所需的评论、时间轴、分类、最近更新等。更多[详情](https://github.com/xugaoyi/blog)。
### 🐼Me
从事Web前端开发工作喜欢唱、跳、rap、篮球写程序。 本人↓↓↓

View File

@ -1,4 +1,10 @@
---
pageComponent:
name: Timeline # 组件名Timeline => 时间轴组件
# data:
# tagBgColor: ['#11a8cd', '#F8B26A', '#67CC86', '#E15B64', '#F47E60', '#849B87'] # 注意,这里定义数组建议使用中括号的形式,避免把#井号解析为注释
# slogan: '只争朝夕,不负韶华!( •̀ ω •́ )✧'
title: 时间轴
date: 2019-12-31 13:49:34
permalink: /timeline
@ -7,219 +13,3 @@ article: false
comment: false
editLink: false
---
<div class="tags">
<a href="#全部" :class="{active: currentTag === '全部'}" :style="randomBgcolor()" @click="toggleTag('全部')">全部</a>
<a
:class="{active: currentTag === key}"
v-for="(item, key) of getPages.tagGroup"
:style="randomBgcolor()"
@click="toggleTag(key)"
:key="key"
:href="'#'+key"
>
{{key}}
</a>
</div>
<div class="timeline-wrapper">
<transition-group tag="ul">
<li class="desc" key="0">只争朝夕,不负韶华!( •̀ ω •́ )✧</li>
<template v-for="yearItem in tagPages()">
<li :key="yearItem.year">
<h3 class="year">{{yearItem.year}}</h3>
<div class="year-wrapper">
<transition-group tag="span">
<router-link :to="item.path" v-for="item in yearItem.pageList" :key="item.path.slice(-6)">
<span class="date">{{item.formatDay}}</span>
<span class="title">{{item.title}}</span>
</router-link>
</transition-group>
</div>
</li>
</template>
</transition-group>
</div>
<script>
import { getPagesList } from '../.vuepress/theme/util/getArticleDate'
export default {
data() {
return {
currentTag: "",
posts: [],
}
},
mounted() {
this.posts = this.$site.pages
document.body.style="overflow-y: scroll;" // 解决切换tag页面高度不满屏出现跳动的问题
this.handleHashTag()
window.onhashchange = () => {
this.handleHashTag()
}
},
computed: {
getPages() {
return getPagesList(this.posts)
}
},
watch: {
currentTag(tag) {
document.body.setAttribute('id', tag); // 用于解决vue-router在处理描点元素定位时的报错
}
},
methods: {
handleHashTag() {
const hashTag = decodeURIComponent(window.location.hash.slice(1))
this.currentTag = hashTag ? hashTag : '全部'
},
// 根据标签获取数据
tagPages() {
if (this.currentTag === "全部") {
return this.getPages.allPage
} else {
return this.getPages.tagGroup[this.currentTag]
}
},
// 切换标签
toggleTag(tag) {
this.currentTag = tag
},
// 随机背景色
randomBgcolor() {
const bgcs = [
'#11a8cd',
'#F8B26A',
'#67CC86',
'#E15B64',
'#F47E60',
'#849B87'
]
return { background: `${bgcs[Math.floor(Math.random() * bgcs.length)]}`}
},
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.tags
margin 30px 0
a
vertical-align: middle;
margin: 4px 4px 10px;
padding: 5px 8px;
display: inline-block;
cursor: pointer;
border-radius: .25rem;
background: #E15B64;
color: #fff;
line-height: 13px;
font-size: 13px;
transition: all .5s;
opacity: 0.9;
box-shadow: 2px 2px 5px #ccc;
&.active
transform: scale(1.2);
opacity: 1;
&:hover
text-decoration: none!important;
&:not(.active):hover
transform: scale(1.05);
.v-enter{
opacity: 0;
transform: translateY(-30px);
}
.v-leave-active{
display:none;
}
.v-leave{
opacity: 0;
}
ul
list-style: none;
.timeline-wrapper ul
box-sizing: border-box;
margin: 4rem auto;
position: relative;
&:after
content: " ";
position: absolute;
top: 14px;
left: 0;
z-index: -1;
margin-left: -2px;
width: 4px;
height: 100%;
background: #EAECEF;
>li
transition: all .25s ease-in-out;
margin-bottom: 55px;
.year
margin: 0;
font-weight: 700;
font-size: 26px;
.desc,.year
position: relative;
.desc:before,.year:before
content: " ";
position: absolute;
z-index: 2;
left: -20px;
top: 50%;
margin-left: -4px;
margin-top: -4px;
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #EAECEF;
border-radius: 50%;
.year-wrapper
padding-left: 0!important;
a
display: flex;
padding: 30px 0 10px;
list-style: none;
border-bottom: 1px dashed #EAECEF;
position: relative;
color: #666;
transition: all 0.25s ease-in-out;
.date
min-width: 40px;
line-height: 30px;
font-size: 13px;
margin-right: 5px;
color: #999;
&:before
content: " ";
position: absolute;
left: -19px;
top: 41px;
width: 6px;
height: 6px;
margin-left: -4px;
background: #fff;
border-radius: 50%;
border: 1px solid #EAECEF;
z-index: 2;
&:hover
text-decoration:none
color: $accentColor
.date
color: $accentColor
.date:before
background: $accentColor
</style>

View File

@ -47,7 +47,7 @@ footer:
这是一个兼具博客文章、个人技能树、文档查找的个人网站主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
### 🎨Theme
本站主题是根据[vuepress](https://vuepress.vuejs.org/zh/)的默认主题修改而成,旨在添加博客所需的评论、时间轴、分类、最近更新等,添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等。更多[详情](https://github.com/xugaoyi/blog)。
本站主题是根据[VuePress](https://vuepress.vuejs.org/zh/)的默认主题修改而成。取名[Vdoing](https://github.com/xugaoyi/blog)(维度),含义是方便你多维度的快速的管理和查找学习笔记以及技术文档。添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等,添加博客所需的评论、时间轴、分类、最近更新等。更多[详情](https://github.com/xugaoyi/blog)。
</br>

File diff suppressed because it is too large Load Diff