文章轮播图
这次新增了一个文章轮播图插件和beaudar评论,beaudar评论在配置文件里将beaudar.on
设为true,然后将仓库设置为自己的github仓库即可。
beaudar:https://beaudar.lipk.org/
言归正传:
轮播事例
展示多个,宽度最小
事例代码
1 2 3 4 5 6 7
| {% swiper width:multiple %}      {% endswiper %}
|
默认
事例代码
1 2 3 4 5
| {% swiper %}    {% endswiper %}
|
展示一个,填充整个容器
事例代码
1 2 3 4 5
| {% swiper width:fill %}    {% endswiper %}
|
无描述文字
事例代码
1 2 3 4 5 6 7
| {% swiper width:multiple %}      {% 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 %}
|