Hexo bamboo主题配置（三）

Hexo bamboo主题配置（三）

本文内容出自 yuang01 如需了解更多可查看 https://hexo-theme-bamboo.netlify.app/

getFiles文件获取

会把某个文件夹下的文件显示在页面上。

例如我在source文件夹下，创建了一个叫做img的文件夹，把img的文件夹下的文件显示在页面上。

注意： 必须要在source文件夹下，文件夹名称可以随便取，下面事例中文件夹名称叫img

## 获取`img`文件夹下的.txt .pdf文件
{% getFiles img, txt pdf,  %}
## 获取`img`文件夹下的.png文件
{% getFiles img, png %}
## 获取`img`文件夹下的.gif文件
{% getFiles img, gif %}
## 获取`img`文件夹下的所有文件
{% getFiles img %}
## 获取`img`文件夹下的所有文件，并指定左侧图片
{% getFiles img, '', https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7 %}

mermaid流程图

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

mathjax公式

$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$

酷炫按钮

{% btn center cool-1, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-2, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-3, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-4, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-5, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-6, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-7, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-8, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-9, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-10, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-11, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-12, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-13, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-14, 开始使用, https://baidu.com, fa fa-download %}
{% btn center cool-15, 开始使用, https://baidu.com, fa fa-download %}

轮播-swiper

// 展示多个，宽度最小
{% 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 %}
// 默认
{% 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 %}
// 展示一个，填充整个容器
{% 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 %}
// 跳转链接
// 单个
{% 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 %}

获取图片标签

在根目录下的source文件夹创建任意存放图片的文件夹，例如创建一个叫做myImg的文件夹，然后将任意图片放入source/myImg文件夹下，然后使用标签就能将myImg文件夹下的所有图片显示在页面上了。
! 需要注意的是，跟file标签一样，需要在根目录下的source文件夹下创建图片文件夹3

{% getPhoto myImg %}
// 一行两个，有规则的排列
{% getPhoto myImg, regular %}

大家也可以关注我的 个人博客，和csdn是同步的，我会持续更新的，感谢大家支持~