修改：最新页面改时间轴
This commit is contained in:
xugaoyi
parent
c30c21408f
commit
121180f5bf
|
|
@ -41,7 +41,7 @@ module.exports = [
|
|||
]
|
||||
},
|
||||
{text: '关于', link: '/pages/81d9f505441078e0/'},
|
||||
{text: '最新', link: '/pages/8818d4830dac5e2a/'},
|
||||
{text: '时间轴', link: '/pages/8818d4830dac5e2a/'},
|
||||
|
||||
// {text: '前端', link: '/01.前端/01.JavaScript/01.JavaScript中的名词概念'},
|
||||
// {text: '页面', link: '/02.页面/01.html-css/00.flex布局语法'},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
// 样式重置
|
||||
body
|
||||
background: none
|
||||
a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);}
|
||||
|
||||
|
||||
// md文件中的按钮
|
||||
.theme-default-content .but
|
||||
background $accentColor
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
const re = /.*\/(.*?)\.(html|md)/
|
||||
|
||||
export function getPagesList(posts) {
|
||||
console.log('------')
|
||||
let pagesList = {}
|
||||
let tagGroup = {}
|
||||
|
||||
// 过滤非文章页
|
||||
posts = filterNotArticle(posts)
|
||||
|
|
@ -14,9 +14,12 @@ export function getPagesList(posts) {
|
|||
const pathArr = post.relativePath.split('/')
|
||||
|
||||
return {
|
||||
...post,
|
||||
// ...post,
|
||||
title: post.title,
|
||||
path: post.path,
|
||||
// lastUpdated: post.lastUpdated,
|
||||
updateTimestamp: date.getTime(), // 更新日期的时间戳
|
||||
filename: execs ? execs['1'] : '',
|
||||
// filename: execs ? execs['1'] : '',
|
||||
formatDay: formatDate(date),
|
||||
year: date.getFullYear(),
|
||||
tag: /\./g.test(pathArr[0]) ? pathArr[1].split('.')[1] : pathArr[0] // 区分是单独合集的笔记还是文章
|
||||
|
|
@ -28,7 +31,6 @@ export function getPagesList(posts) {
|
|||
let pageYearArr = []
|
||||
let pageYearObj = {}
|
||||
pages.forEach( page => {
|
||||
|
||||
// 全部
|
||||
if (!pageYearObj[page.year]){
|
||||
pageYearArr.push({
|
||||
|
|
@ -44,30 +46,31 @@ export function getPagesList(posts) {
|
|||
})
|
||||
}
|
||||
|
||||
// 按标签分组
|
||||
//console.log(page.tag)
|
||||
if (!pagesList[page.tag]) {
|
||||
pagesList[page.tag] = []
|
||||
} else {
|
||||
|
||||
// 加入标签属性
|
||||
if (!tagGroup[page.tag]) {
|
||||
tagGroup[page.tag] = []
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
// 根据标签分组
|
||||
pagesList['全部'] = pageYearArr
|
||||
|
||||
|
||||
console.log(pagesList)
|
||||
}
|
||||
|
||||
// 按年份分组
|
||||
function pageGrouping(){
|
||||
for (let item in tagGroup) { // 循环标签
|
||||
|
||||
for(let i in pageYearArr) { // 循环全部
|
||||
const filterTag = pageYearArr[i].pageList.filter(page => { // 按标签过滤
|
||||
return page.tag === item
|
||||
})
|
||||
if (filterTag.length) { // 该年份中有数据才加入
|
||||
tagGroup[item].push({
|
||||
year: pageYearArr[i].year,
|
||||
pageList: filterTag
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
pagesList.tagGroup = tagGroup
|
||||
pagesList.allPage = pageYearArr // 加入全部
|
||||
|
||||
return pagesList
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -107,7 +110,8 @@ function formatDate(date) {
|
|||
if (!(date instanceof Date)) {
|
||||
return
|
||||
}
|
||||
return `${date.getFullYear()}/${zero(date.getMonth() + 1)}/${zero(date.getDate())}`
|
||||
// return `${date.getFullYear()}/${zero(date.getMonth() + 1)}/${zero(date.getDate())}`
|
||||
return `${zero(date.getMonth() + 1)}-${zero(date.getDate())}`
|
||||
}
|
||||
|
||||
// 补0
|
||||
|
|
|
|||
|
|
@ -5,33 +5,45 @@ permalink: /pages/8818d4830dac5e2a
|
|||
sidebar: false
|
||||
article: false # 不显示最近更新栏，以及不参与到最近更新文章数据计算
|
||||
comment: false
|
||||
editLink: false
|
||||
---
|
||||
|
||||
<!-- <div class="tags">
|
||||
{{getTags}}
|
||||
<span class="active">全部</span>
|
||||
<span>JavaScript文章</span>
|
||||
<span>Vue文章</span>
|
||||
<span>《JavaScript教程》笔记</span>
|
||||
<span>《ES6 教程》笔记</span>
|
||||
<span>JavaScript文章</span>
|
||||
<span>Vue文章</span>
|
||||
<span>《JavaScript教程》笔记</span>
|
||||
<span>《ES6 教程》笔记</span>
|
||||
<span>JavaScript文章</span>
|
||||
<span>Vue文章</span>
|
||||
<span>《JavaScript教程》笔记</span>
|
||||
<span>《ES6 教程》笔记</span>
|
||||
<span>JavaScript文章</span>
|
||||
<span>Vue文章</span>
|
||||
<span>《JavaScript教程》笔记</span>
|
||||
<span>《ES6 教程》笔记</span>
|
||||
<span>JavaScript文章</span>
|
||||
<span>Vue文章</span>
|
||||
<span>《JavaScript教程》笔记</span>
|
||||
<span>《ES6 教程》笔记</span>
|
||||
</div> -->
|
||||
<div class="tags">
|
||||
<span :class="{active: currentTag === '全部'}" :style="randomBgcolor()" @click="toggleTag('全部')">全部</span>
|
||||
<span
|
||||
:class="{active: currentTag === key}"
|
||||
v-for="(item, key) of getPages.tagGroup"
|
||||
:style="randomBgcolor()"
|
||||
@click="toggleTag(key)"
|
||||
>
|
||||
{{key}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- <transition-group class="timeline-wrapper"> -->
|
||||
<div class="timeline-wrapper">
|
||||
<transition-group tag="ul"> <!--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"> <!--tag转为ul-->
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<ul class="page-guide-ul">
|
||||
<li
|
||||
class="page-guide-row"
|
||||
|
|
@ -46,7 +58,7 @@ comment: false
|
|||
|
||||
<div @click="loadMore" class="page-guide-btn" v-if="showBtn">
|
||||
<div ref="btn">{{btnInfo}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<script>
|
||||
import { getTopKPosts, getPagesList } from '../.vuepress/theme/util/getTopKPosts'
|
||||
|
|
@ -54,7 +66,8 @@ import { getTopKPosts, getPagesList } from '../.vuepress/theme/util/getTopKPosts
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pagesList: {},
|
||||
currentTag: "全部",
|
||||
|
||||
step: 20,
|
||||
posts: [],
|
||||
page: 1,
|
||||
|
|
@ -71,9 +84,10 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
getTags() {
|
||||
getPagesList(this.posts)
|
||||
getPages() {
|
||||
return getPagesList(this.posts)
|
||||
},
|
||||
|
||||
topPublishPosts() {
|
||||
// return this.getTopKPosts(this.page * this.step)
|
||||
return getTopKPosts(this.posts, this.page * this.step)
|
||||
|
|
@ -81,7 +95,31 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 根据标签获取数据
|
||||
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)]}`}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
|
@ -135,6 +173,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="stylus" rel="stylesheet/stylus">
|
||||
|
||||
|
||||
.tags
|
||||
margin 30px 0
|
||||
span
|
||||
|
|
@ -148,12 +188,107 @@ export default {
|
|||
color: #fff;
|
||||
line-height: 13px;
|
||||
font-size: 13px;
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: all .5s;
|
||||
opacity: 0.9;
|
||||
box-shadow: 2px 2px 5px #ccc;
|
||||
&.active
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
&:not(.active):hover
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.05);
|
||||
|
||||
|
||||
.v-enter{
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
.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: transform 0.25s ease-in-out 0.08s;
|
||||
margin-bottom: 50px;
|
||||
.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 .25s;
|
||||
.date
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.page-guide-ul {
|
||||
padding-left: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue