diff --git a/source/_posts/前端杂烩/博客部署调整记录.md b/source/_posts/前端杂烩/博客部署调整记录.md index e0c4a97..e3713d3 100644 --- a/source/_posts/前端杂烩/博客部署调整记录.md +++ b/source/_posts/前端杂烩/博客部署调整记录.md @@ -15,7 +15,7 @@ categories: 2. hexo clean && hexo generate 3. 图片与对象存储仓库同步 4. 生成的html文件的压缩 -5. public目录中所有内容的拷贝发布 +5. public目录中所有文件的拷贝发布 因为不想把主题和内容过多整合, 这样会导致将来更换主题困难 所以计划是把2 3 4 5步骤在构建过程中一键完成 @@ -58,9 +58,10 @@ try { */ ``` 上面的写法就如同是在命令行执行`hexo clean && hexo generate` -正好gulp配置任务的时候也需要返回Promise对象( 下面会提到 ), 正好能结合, 不需要二次封装了, 不错 +正好gulp配置任务的时候也需要返回Promise对象( 下面会提到 ), 可以直接结合, 不需要二次封装了, 不错 ### gulp +![gulp](/images/前端杂烩/gulp-2x.png) 之前没用过这个前端构建工具, 因为跟webpack的作用有不少的重合, 前端实在学不完 这里使用一下它的任务自动管理的功能, 整体的体验挺好 diff --git a/source/images/前端杂烩/gulp-2x.png b/source/images/前端杂烩/gulp-2x.png new file mode 100644 index 0000000..2c2ccbe Binary files /dev/null and b/source/images/前端杂烩/gulp-2x.png differ diff --git a/source/photo_wall/index.md b/source/photo_wall/index.md index 7d574af..e170495 100644 --- a/source/photo_wall/index.md +++ b/source/photo_wall/index.md @@ -4,4 +4,4 @@ date: 2018-5-24 10:05:28 pageid: PhotoWall --- -
+
正在加载ԅ( ¯་། ¯ԅ)
diff --git a/themes/yilia/source-src/css/article-inner.scss b/themes/yilia/source-src/css/article-inner.scss index 89a1bda..032d8f8 100644 --- a/themes/yilia/source-src/css/article-inner.scss +++ b/themes/yilia/source-src/css/article-inner.scss @@ -99,7 +99,7 @@ content: ""; width: 6px; height: 6px; - border: 1px solid #999; + border: 1px solid $color9; border-radius: 10px; background: #aaa; display: inline-block; diff --git a/themes/yilia/source-src/css/left.scss b/themes/yilia/source-src/css/left.scss index f2ba9d8..2d43eab 100644 --- a/themes/yilia/source-src/css/left.scss +++ b/themes/yilia/source-src/css/left.scss @@ -35,7 +35,7 @@ } .header-subtitle{ text-align: center; - color:#999; + color:$color9; font-size: 14px; line-height: 25px; overflow: hidden; diff --git a/themes/yilia/source-src/css/mobile-slider.scss b/themes/yilia/source-src/css/mobile-slider.scss index ea9da91..1ec058c 100644 --- a/themes/yilia/source-src/css/mobile-slider.scss +++ b/themes/yilia/source-src/css/mobile-slider.scss @@ -20,7 +20,7 @@ } .header-subtitle { text-align: center; - color: #999; + color: $color9; font-size: 14px; line-height: 25px; overflow: hidden; diff --git a/themes/yilia/source-src/css/page/photo-wall.scss b/themes/yilia/source-src/css/page/photo-wall.scss index 0bcf3e5..2c39a52 100644 --- a/themes/yilia/source-src/css/page/photo-wall.scss +++ b/themes/yilia/source-src/css/page/photo-wall.scss @@ -19,3 +19,8 @@ vertical-align: middle; } } +#load-top { + color: $color9; + text-align: center; + display: none; +} \ No newline at end of file diff --git a/themes/yilia/source-src/js/aside.js b/themes/yilia/source-src/js/aside.js index fb2778d..17a5e61 100644 --- a/themes/yilia/source-src/js/aside.js +++ b/themes/yilia/source-src/js/aside.js @@ -1,7 +1,7 @@ var backTop = function (domE, ctn, distance) { if (!domE) return; var timer = null; - var _onscroll = window.onscroll, + var _onscroll = (ctn || window).onscroll, _onclick = domE.onclick; (ctn || window).onscroll = throttle(function () { typeof _onscroll === 'function' && _onscroll.apply(this, arguments); @@ -9,7 +9,6 @@ var backTop = function (domE, ctn, distance) { }, 100); domE.onclick = function () { typeof _onclick === 'function' && _onclick.apply(this, arguments); - var baseCt = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop; timer = setInterval(function () { //设置一个计时器 var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离 var diff = Math.max(10, ct / 6); diff --git a/themes/yilia/source-src/js/comment.js b/themes/yilia/source-src/js/comment.js index 350172d..75c6844 100644 --- a/themes/yilia/source-src/js/comment.js +++ b/themes/yilia/source-src/js/comment.js @@ -9,7 +9,7 @@ window.AV = require('leancloud-storage') // 评论配置 const commentConfig = require("../config/comment.json") -import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({ default: Valine }) => { +import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then((: Valine }) => { commentConfig.valine.config.path = window.location.pathname // commentConfig.valine.config.av = AV new Valine(commentConfig.valine.config) diff --git a/themes/yilia/source-src/js/main.js b/themes/yilia/source-src/js/main.js index 4bdf3fd..edc3d62 100644 --- a/themes/yilia/source-src/js/main.js +++ b/themes/yilia/source-src/js/main.js @@ -12,15 +12,17 @@ import Util from './util' Util.addLoadEvent(function() { Share.init() // Viewer.init() - Aside.init() + Aside.init() + if(window.themeConfig.pageid === 'PhotoWall') { + // 自定义的照片墙页面 + import(/* webpackChunkName: "photo-wall" */ './photo-wall').then(PhotoWall => { + // PhotoWall.default.init() + }) + } }) + const commentConfig = require("../config/comment.json") if(window.themeConfig.isPost && commentConfig.valine.enable) { // 文章详情页面, 并且启用了评论, 则加载评论相关代码 import(/* webpackChunkName: "comment" */ './comment') -} - -if(window.themeConfig.pageid === 'PhotoWall') { - // 自定义的照片墙页面 - import(/* webpackChunkName: "photo-wall" */ './photo-wall') } \ No newline at end of file diff --git a/themes/yilia/source-src/js/photo-wall.js b/themes/yilia/source-src/js/photo-wall.js index e8ee072..78cd9d9 100644 --- a/themes/yilia/source-src/js/photo-wall.js +++ b/themes/yilia/source-src/js/photo-wall.js @@ -1,36 +1,70 @@ import axios from 'axios' -var groupid = 1, currentIndex = 0 +var groupid = 1, currentIndex = 0, defaultStep = 20, scrollLock = false -function loadMore(step) { +// 滚动区域DOM +const scrollDom = document.getElementById('container') +// 作为底部标记的DOM +const markDom = document.getElementById('footer') +// 加载提示文字 +const loadTip = document.getElementById('load-top') + +function loadMoreItems(step) { + scrollLock = true //加载过程中锁定滚动加载 + loadTip.style.display = 'block' // 滚动到底部时调用 axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => { var itemContainer = document.createElement('div') var imgItems = '', index = currentIndex for( ; index + imgItems += `
-
- ` + ` } if(index >= res.data.files.length) { // 已到达当前分组列表的末尾 groupid++ if(index{ + scrollLock = false + }, 2000) }).catch(res => { // 未加载到文件列表, 代表已经没有更多图片 - // TODO 显示已没有更多内容 - // console.log(res) + scrollLock = true + loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~' }) } -loadMore(20) -//TODO 在滚动到底部时调用loadMore \ No newline at end of file + +//检测是否具备滚动条加载数据块的条件 +function checkScrollSlide(){ + var scrollH = scrollDom.scrollTop || document.body.scrollTop || document.documentElement.scrollTop + var clientHeight = document.body.clientHeight || document.documentElement.clientHeight + var footerOffetTop = markDom.offsetTop + return scrollH + clientHeight > footerOffetTop +} + +function init() { + var _onscroll = scrollDom.onscroll + var timer = null + scrollDom.onscroll = function () { + typeof _onscroll === 'function' && _onscroll.apply(this, arguments) + if(scrollLock) return + if(timer) clearTimeout(timer) + timer = setTimeout(()=>{ + if(checkScrollSlide()) { + loadMoreItems(defaultStep) + } + timer = null + }, 200) + } + loadMoreItems(defaultStep) +} +export default { init } \ No newline at end of file