From 8dd3f018851b040f1117957f54306be310c32ba8 Mon Sep 17 00:00:00 2001 From: Anc Date: Wed, 25 Mar 2020 17:29:13 +0800 Subject: [PATCH 1/5] feat: add simple night mode \ simple append css invert to html dom so if using tag it will refresh otherwise --- layouts/Layout.vue | 69 ++++++++++++++++++++++++++++------------- styles/assets/night.svg | 1 + styles/index.styl | 33 ++++++++++++++++++++ 3 files changed, 81 insertions(+), 22 deletions(-) create mode 100644 styles/assets/night.svg diff --git a/layouts/Layout.vue b/layouts/Layout.vue index 8117804..5a415c0 100644 --- a/layouts/Layout.vue +++ b/layouts/Layout.vue @@ -8,32 +8,57 @@ > {{ $site.title }} -
- +
+ +
- - - + + +
diff --git a/styles/assets/night.svg b/styles/assets/night.svg new file mode 100644 index 0000000..479a146 --- /dev/null +++ b/styles/assets/night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/index.styl b/styles/index.styl index e3d201a..69e9d0c 100644 --- a/styles/index.styl +++ b/styles/index.styl @@ -339,3 +339,36 @@ div[class*='language-'] pre[class*='language-'] padding-left 3.5em + +.icon-night + position absolute + top -30px + right 5px + width 32px + height 32px + display inline-block + background-image embedurl('./assets/night.svg', 'utf8') + background-repeat no-repeat + background-position center + background-size 100% + vertical-align sub + +#searchBox + input + border-color #b3b3b3 + border none + background-color transparent + background-position-x 0 + border-radius 0 + + &:focus + border-bottom solid 1px #ddd + + ul + border-color #ddd + z-index 999 + left 0 + + li + a + color #888 From e8aebfe2e7ed4449180c3b413f663d1d60cf4157 Mon Sep 17 00:00:00 2001 From: Anc Date: Wed, 25 Mar 2020 17:31:35 +0800 Subject: [PATCH 2/5] feat: add search plugin --- components/Home.vue | 28 +++++++++++++++++++++++++++- example/.vuepress/config.js | 4 ++++ package.json | 1 + 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/components/Home.vue b/components/Home.vue index e2bce85..c2e34d5 100644 --- a/components/Home.vue +++ b/components/Home.vue @@ -1,5 +1,6 @@ @@ -36,21 +56,56 @@ import TimeAgo from './TimeAgo'; import SearchBox from '@SearchBox'; -export default { - components: { - TimeAgo - }, - computed: { - filteredList() { - // Order by publish date, desc - return this.$site.pages - .filter(item => item.path !== '/') - .sort((a, b) => { - return new Date(b.frontmatter.date || b.lastUpdated) - new Date(a.frontmatter.date || a.lastUpdated) - }) + export default { + data() { + return { + pageNumber: 0, + isPaging:false + } + }, + components: { + TimeAgo, + SearchBox + }, + mounted() { + this.pageNumber = location.hash ? location.hash.split('#')[1] : 0; + }, + computed: { + filteredList() { + // Order by publish date, desc + return this.$site.pages + .filter(item => item.path !== '/' && item.title && !item.frontmatter.hide) + .sort((a, b) => { + return new Date(b.frontmatter.date || b.lastUpdated) - new Date(a.frontmatter.date || a.lastUpdated) + }) + }, + paginatedData() { + if(!this.$themeConfig.pageSize){ + return this.filteredList; + } + this.isPaging = true; + const start = this.pageNumber * (this.$themeConfig.pageSize || 10), + end = start + (this.$themeConfig.pageSize || 10); + return this.filteredList.slice(start, end); + }, + pageCount() { + let l = this.filteredList.length, + s = (this.$themeConfig.pageSize || 10); + return Math.ceil(l / s); + }, + }, + methods: { + nextPage() { + this.pageNumber++; + location.hash = this.pageNumber; + }, + prevPage() { + this.pageNumber--; + location.hash = this.pageNumber; + } + } + } - }, -} +