hexo volantis主题添加首页轮播图

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文件,找到 在这两行的下面添加:

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