hexo volantis主题添加首页轮播图
本文为2021年教程,hexo以及主题版本迭代较快具有时效性,方法可能发生改变,酌情观看
效果预览
第一步添加设置项
在主题文件夹里面的source/js文件夹下新建一个sidelar.js文件,将以下内容填进去
打开_config.volantis.yml文件,搜索 plugins ,在其下面添加如下:
打开layout/_partial/scripts/index.ejs文件, 找到 这一行,在其上面添加:
打开layout/_third-party/文件夹,在里面新建一个名为slider的文件夹,再在里面新建一个名为layout.ejs的文件,其文件内容为:
再新建一个名为script.ejs的文件,其内容如下:
之后打开layout/index.ejs文件,找到 这一行,并在这一行上面添加:
打开source/css/_plugins/文件夹,在里面新建一个名为slider.styl的文件,其内容如下:
然后打开同目录下的index.styl文件,找到 在这两行的下面添加:
代码语言:javascript复制hexo clean && hexo g && hexo s
移动端开启显示图片轮播(默认为关)
修改slider.styl文件即可
display: none将图片轮播隐藏了
同样是display none将热门文章隐藏了,你可以直接将其删除或者修改为自己想要的样式即可。
博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议 本文永久链接是:https://cloud.tencent.com/developer/article/1858760