diff --git a/themes/yilia/_config.yml b/themes/yilia/_config.yml index d3a48fc..c5f344d 100644 --- a/themes/yilia/_config.yml +++ b/themes/yilia/_config.yml @@ -59,6 +59,8 @@ weixin: toc: 2 # 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false toc_hide_index: true +# 是否显示文章列表页的动画效果 +animate: true # 目录为空时的提示 toc_empty_wording: 目录，不存在的… diff --git a/themes/yilia/layout/_partial/after-footer.ejs b/themes/yilia/layout/_partial/after-footer.ejs index d17f345..a326a47 100644 --- a/themes/yilia/layout/_partial/after-footer.ejs +++ b/themes/yilia/layout/_partial/after-footer.ejs @@ -7,6 +7,7 @@ window.themeConfig = { isCategory: <%=is_category()%>, // 是否为分类页面 pageid: <%-page.pageid ? `"${page.pageid}"` : 'undefined'%>, // 页面标识, 用于个性化页面开发 toc_hide_index: <%=theme.toc_hide_index%>, // 目录序号 + animate: <%=theme.animate%>, // 是否显示文章列表页动画效果 root: '<%=config.root%>', // 资源根路径 baseUrl: '<%=config.url%>', pictureCdn: '<%=config.picture_cdn%>' // 图片存储仓库地址 diff --git a/themes/yilia/layout/_partial/article.ejs b/themes/yilia/layout/_partial/article.ejs index 5f08328..b2fa6ca 100644 --- a/themes/yilia/layout/_partial/article.ejs +++ b/themes/yilia/layout/_partial/article.ejs @@ -1,7 +1,8 @@ <% if (param.postIndex === 0 || !param.index){ %> <%- partial('_partial/aside') %> <% } %> -
+
+
<% if (post.link || post.title){ %>
@@ -86,6 +87,7 @@
+ <% if (!param.index){ %> <%- partial('post/nav') %> <% } %> diff --git a/themes/yilia/package-lock.json b/themes/yilia/package-lock.json index 1f4f37d..58ed1ff 100644 --- a/themes/yilia/package-lock.json +++ b/themes/yilia/package-lock.json @@ -4935,6 +4935,19 @@ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", "dev": true }, + "is-dom-node": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz", + "integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==" + }, + "is-dom-node-list": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz", + "integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==", + "requires": { + "is-dom-node": "^1.0.4" + } + }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -5629,6 +5642,11 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, + "miniraf": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz", + "integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==" + }, "mississippi": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz", @@ -9237,6 +9255,11 @@ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", "dev": true }, + "rematrix": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz", + "integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==" + }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", @@ -9508,6 +9531,16 @@ "ajv-keywords": "^3.1.0" } }, + "scrollreveal": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.5.tgz", + "integrity": "sha512-dyQ0BPOLuoRzKAEwGgVaZsN4mxErHnuzh3Wq0ygE/PteGHeTCOubBoTzxSoix5UGLOUYMDapNAwajfQCB483aw==", + "requires": { + "miniraf": "1.0.0", + "rematrix": "0.3.0", + "tealight": "0.3.6" + } + }, "scss-tokenizer": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", @@ -10239,6 +10272,15 @@ "inherits": "2" } }, + "tealight": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz", + "integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==", + "requires": { + "is-dom-node": "^1.0.4", + "is-dom-node-list": "^1.2.1" + } + }, "terser": { "version": "3.17.0", "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz", diff --git a/themes/yilia/package.json b/themes/yilia/package.json index 72a867f..257ec6d 100644 --- a/themes/yilia/package.json +++ b/themes/yilia/package.json @@ -44,6 +44,7 @@ "badjs-report": "^1.2.2", "es6-promise": "^4.0.5", "leancloud-storage": "^3.7.3", - "qrious": "^4.0.2" + "qrious": "^4.0.2", + "scrollreveal": "^4.0.5" } } diff --git a/themes/yilia/source-src/css/article-main.scss b/themes/yilia/source-src/css/article-main.scss index 5fc758e..390ebae 100644 --- a/themes/yilia/source-src/css/article-main.scss +++ b/themes/yilia/source-src/css/article-main.scss @@ -2,23 +2,13 @@ position: relative; } -@keyframes cd-bounce-1 { - 0% { - opacity: 0; - transform: scale(1); - } - 60% { - opacity: 1; - transform: scale(1.01); - } - 100% { - transform: scale(1); - } +.article-outer { + perspective: 500px; + margin: 0 30px 30px; + position: relative; } .article { - margin: 0 30px 30px; - position: relative; border-width: 1px; border-style: solid; border-color: #fff #ddd; diff --git a/themes/yilia/source-src/css/grid.scss b/themes/yilia/source-src/css/grid.scss index fcecb72..87ef19d 100644 --- a/themes/yilia/source-src/css/grid.scss +++ b/themes/yilia/source-src/css/grid.scss @@ -45,10 +45,10 @@ html, body, #container { width: auto; @extend %trans; &.show { - @extend %anmLeftIn; + @extend %anmLeftIn; .article { - transition: opacity .5s ease-in, background-color .2s ease-in; - opacity: 0.6; + transition: opacity .3s ease-in, background-color .3s ease-in; + opacity: 0.6 !important; pointer-events: none; } } diff --git a/themes/yilia/source-src/css/night.scss b/themes/yilia/source-src/css/night.scss index cba008e..9fa7b31 100644 --- a/themes/yilia/source-src/css/night.scss +++ b/themes/yilia/source-src/css/night.scss @@ -62,8 +62,19 @@ body.night { .article-title { // 主标题 color: $colorF; } - .article-entry blockquote{ // 引用 - background: #2c2c2c; + .article-entry { + table { // 表格 + border-color: $borderColor_night; + th,td { + border-color: $borderColor_night; + } + thead tr { // 表头 + background: $mainBg_night; + } + } + blockquote{ // 引用 + background: #2c2c2c; + } } h1,h2,h3,h4,h5,h6 { // 章节标题 color: $colorC; diff --git a/themes/yilia/source-src/js/main.js b/themes/yilia/source-src/js/main.js index d3d1c24..f472775 100644 --- a/themes/yilia/source-src/js/main.js +++ b/themes/yilia/source-src/js/main.js @@ -19,6 +19,28 @@ Util.addLoadEvent(function() { PhotoWall.default.init() }) } + if(window.themeConfig.animate && window.themeConfig.isHome) { + // 文章列表页动画效果 + let animateTypes = [{ // 右侧移入 + distance: '50px', + origin: 'right' + },{ // 放大 + scale: 0.8 + },{ // 缩小 + scale: 1.2 + },{ // 绕X轴旋转 + rotate: { x: 30 } + },{ // 绕Y轴旋转 + rotate: { y: 30 } + }] + import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => { + let index = Math.floor(Math.random() * animateTypes.length) + ScrollReveal.default().reveal('.article-index', Object.assign({ + delay: 200, + container: document.querySelector('#container') + }, animateTypes[index])) + }) + } }) const commentConfig = require('../config/comment.json')