文章轮播图
这次新增了一个文章轮播图插件和beaudar评论,beaudar评论在配置文件里将beaudar.on
设为true,然后将仓库设置为自己的github仓库即可。
beaudar:https://beaudar.lipk.org/
言归正传:
轮播事例
展示多个,宽度最小
事例代码
1 2 3 4 5 6 7
| {% swiper width:multiple %} ![图片描述111](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg) ![图片描述22222](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg) ![图片描述33333](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg) ![图片描述44444](https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg) ![图片描述55555](https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg) {% endswiper %}
|
默认
事例代码
1 2 3 4 5
| {% swiper %} ![图片描述](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg) ![图片描述](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg) ![图片描述](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg) {% endswiper %}
|
展示一个,填充整个容器
事例代码
1 2 3 4 5
| {% swiper width:fill %} ![图片描述](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg) ![图片描述](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg) ![图片描述](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg) {% endswiper %}
|
无描述文字
事例代码
1 2 3 4 5 6 7
| {% swiper width:multiple %} ![](https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg) ![](https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg) ![](https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg) ![](https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg) ![](https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg) {% endswiper %}
|
跳转链接
使用原生img标签,加上href属性即可,例如点击图片跳转到百度,则加上href=”https://baidu.com" 属性
事例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| {% swiper width:fill %} <img src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg" href="https://baidu.com" alt="点击跳转百度"> <img src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg" href="https://github.com/yuang01/hexo-theme-bamboo" alt="点击跳转github"> <img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="https://juejin.cn/" alt="点击跳转到掘金社区"> <img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="/" alt="点击跳转到首页"> {% endswiper %}
{% swiper %} <img src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg" href="https://baidu.com" alt="点击跳转百度"> <img src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg" href="https://github.com/yuang01/hexo-theme-bamboo" alt="点击跳转github"> <img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="https://juejin.cn/" alt="点击跳转到掘金社区"> <img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" href="/" alt="点击跳转到首页"> {% endswiper %}
|