最近看了zhheo大佬的博客首页，发现大佬的布局还是那么的好看，于是果断COPY，再加上我一直想要在我的博客首页加一个大画幅的轮播图插件，于是又参考了Hassan的文章轮播图…经过一番折腾，效果如下：
- 创建首页顶部模块
1.1 创建hometop.pug
在themes/butterfly/layout/includes路径下创建hometop.pug文件：
1 | if is_home() |
其中第一行的is_home()是Hexo自带的辅助函数，用于判断是否为首页，但是其在justlovesmile.top/以及justlovesmile.top/page/2/等页面都返回True，因此如果你只想在首页的第一页显示该模块，可以使用is_current(‘/‘)。
1.2 添加css样式
在自己的css文件中添加：
1 | :root{ |
- 创建顶部轮播图
在themes/butterfly/layout/includes路径下创建sticky.pug文件：
1 | link(rel='stylesheet' href='https://unpkg.com/swiper/swiper-bundle.min.css') |
2.2 创建sticky.js
在themes/butterfly/source/js路径下创建sticky.js文件：
1 | var mySwiper = new Swiper('#stickyList', { |
2.3 创建sticky.css
在themes/butterfly/source/css路径下创建sticky.css文件：
1 | :root{ |
创建文章推荐卡片
3.1 创建slider.yml
在hexo\source_data\路径下创建slider.yml文件，最好准备6个推荐文章，例如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36#- cover: 封面图片链接
# timeline: '2020-10-01' # 日期，需要用''包裹
# link: 置顶文章链接，站内文章建议填相对链接
# title: 置顶文章标题
# description: 置顶文章描述
- cover: https://npm.elemecdn.com/justlovesmile-img/20200715201402.png
timeline: '2020-07-15'
link: /posts/c8972b63.html
title: 必看 | Hexo博客搭建超级指南
description: Hexo博客搭建全过程，环境部署，博客魔改等等...
- cover: https://npm.elemecdn.com/justlovesmile-img/090412-1557363852af44.jpg
timeline: '2020-04-09'
link: /posts/56163.html
title: Hexo博客 | 博客中能用到的代码（一）
description: 这篇文章介绍了如何使用font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效
- cover: https://npm.elemecdn.com/justlovesmile-img/095658-1562983018e455.jpg
timeline: '2020-04-09'
link: /posts/15391.html
title: Hexo博客 | 博客中能用到的代码（二）
description: 这篇文章介绍了如何添加旋转小人和每日诗句
- cover: https://npm.elemecdn.com/justlovesmile-img/20220331192754.png
timeline: '2022-03-31'
link: /posts/a806bebe.html
title: 推荐 | 计算机专业，大学课程「笔记归档」
description: 本文是博主本科期间的专业课程学习笔记的整理和归档，适合计算机专业的同学阅读。
- cover: https://npm.elemecdn.com/justlovesmile-img/20220318183107.png
timeline: '2022-03-18'
link: /posts/589ec011.html
title: 深度学习 | Detectron2使用指南
description: Detectron2是Facebook AI Research的检测和分割框架，其主要基于PyTorch实现，但具有更模块化设计，因此它是灵活且便于扩展的。
- cover: https://npm.elemecdn.com/justlovesmile-img/202109111517311.jpg
timeline: '2021-09-11'
link: /posts/865c56ba.html
title: 目标检测 | 常用数据集标注格式及生成脚本
description: 目标检测是计算机视觉任务中的一个重要研究方向，是计算机视觉的根本性问题之一，是其他诸多计算机视觉任务的基础以及前提。本文主要介绍了目标检测数据集的几种标注格式和转换代码。
3.2 css样式
见1.2中.top_post_group等样式类，不再赘述…
- 补充：zhheo大佬首页人来人往特效
4.1 创建people页面
在hexo\source\路径下创建people文件夹，其中创建index.html:
1 | --- |
4.2 创建css样式
在hexo\source\people路径下，创建style.css:
1 | body, |
4.3 创建js文件
在hexo\source\people路径下，创建script.js:
1 | ;function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,r){if(e){if("string"==typeof e)return _arrayLikeToArray(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(e,r):void 0}}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,a=new Array(r);t<r;t++)a[t]=e[t];return a}function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var a=r[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),e}var config={src:"https://npm.elemecdn.com/guli-heo/others/open-peeps-sheet.png",rows:15,cols:7},randomRange=function(e,r){return e+Math.random()*(r-e)},randomIndex=function(e){return 0|randomRange(0,e.length)},removeFromArray=function(e,r){return e.splice(r,1)[0]},removeItemFromArray=function(e,r){return removeFromArray(e,e.indexOf(r))},removeRandomFromArray=function(e){return removeFromArray(e,randomIndex(e))},getRandomFromArray=function(e){return e[0|randomIndex(e)]},resetPeep=function(e){var r,t,a=e.stage,n=e.peep,o=.5<Math.random()?1:-1,i=100-250*gsap.parseEase("power2.in")(Math.random()),s=a.height-n.height+i;return 1==o?(r=-n.width,t=a.width,n.scaleX=1):(r=a.width+n.width,t=0,n.scaleX=-1),n.x=r,n.y=s,{startX:r,startY:n.anchorY=s,endX:t}},normalWalk=function(e){var r=e.peep,t=e.props,a=(t.startX,t.startY),n=t.endX,o=gsap.timeline();return o.timeScale(randomRange(.5,1.5)),o.to(r,{duration:10,x:n,ease:"none"},0),o.to(r,{duration:.25,repeat:40,yoyo:!0,y:a-10},0),o},walks=[normalWalk],Peep=function(){function a(e){var r=e.image,t=e.rect;_classCallCheck(this,a),this.image=r,this.setRect(t),this.x=0,this.y=0,this.anchorY=0,this.scaleX=1,this.walk=null}return _createClass(a,[{key:"setRect",value:function(e){this.rect=e,this.width=e[2],this.height=e[3],this.drawArgs=[this.image].concat(_toConsumableArray(e),[0,0,this.width,this.height])}},{key:"render",value:function(e){e.save(),e.translate(this.x,this.y),e.scale(this.scaleX,1),e.drawImage.apply(e,_toConsumableArray(this.drawArgs)),e.restore()}}]),a}(),img=document.createElement("img");img.onload=init,img.src=config.src;var canvas=document.querySelector("#canvas"),ctx=canvas.getContext("2d"),stage={width:0,height:0},allPeeps=[],availablePeeps=[],crowd=[];function init(){createPeeps(),resize(),gsap.ticker.add(render),window.addEventListener("resize",resize)}function createPeeps(){for(var e=config.rows,r=config.cols,t=e*r,a=img.naturalWidth/e,n=img.naturalHeight/r,o=0;o<t;o++)allPeeps.push(new Peep({image:img,rect:[o%e*a,(o/e|0)*n,a,n]}))}function resize(){stage.width=canvas.clientWidth,stage.height=canvas.clientHeight,canvas.width=stage.width*devicePixelRatio,canvas.height=stage.height*devicePixelRatio,crowd.forEach(function(e){e.walk.kill()}),crowd.length=0,availablePeeps.length=0,availablePeeps.push.apply(availablePeeps,allPeeps),initCrowd()}function initCrowd(){for(;availablePeeps.length;)addPeepToCrowd().walk.progress(Math.random())}function addPeepToCrowd(){var e=removeRandomFromArray(availablePeeps),r=getRandomFromArray(walks)({peep:e,props:resetPeep({peep:e,stage:stage})}).eventCallback("onComplete",function(){removePeepFromCrowd(e),addPeepToCrowd()});return e.walk=r,crowd.push(e),crowd.sort(function(e,r){return e.anchorY-r.anchorY}),e}function removePeepFromCrowd(e){removeItemFromArray(crowd,e),availablePeeps.push(e)}function render(){canvas.width=canvas.width,ctx.save(),ctx.scale(devicePixelRatio,devicePixelRatio),crowd.forEach(function(e){e.render(ctx)}),ctx.restore()} |
Invitation
退役老兵
QQ：1400000222
created:06/18/1993
62262419930628360000
如果上天不给你机会，那你就自己创造机会，杀出重围 .
再厉害的英雄也需要夫人的陪伴，所以我很爱我的夫人.
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 怕冷爱上雪！
- 感谢你赐予我前进的力量
微信
支付宝
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
相关推荐
评论
