About

Baethan 的个人学习分享小天地

关于 Markdown 多色彩标签的使用

使用格式

{% note [class] [no-icon] %} 
Any content (support inline tags too.io). 
{% endnote %}

[class] : default | primary | success | info | warning | danger. 
[no-icon] : Disable icon in note.

All parameters are optional.

具体应用格式

{% note default %} 
default提示块标签
{% endnote %}

{% note primary no-icon %} 
primary提示块标签
{% endnote %}

{% note success %} 
success提示块标签
{% endnote %}

{% note info %} 
info提示块标签
{% endnote %}

{% note warning %} 
warning提示块标签
{% endnote %}

{% note danger %} 
danger提示块标签
{% endnote %}

应用效果

default提示块标签

primary提示块标签

success提示块标签

info提示块标签

warning提示块标签

danger提示块标签

关于相册

应用格式

<div class="gallery-group-main"> 
{% galleryGroup name description link img-url %} 
{% galleryGroup name description link img-url %} 
{% galleryGroup name description link img-url %} 
</div>

name：图库名字
description：图库描述
link：连接到对应相册的地址(在什么地方?)
img-url：图库封面的地址

应用示例

   <div class="gallery-group-main">
   {% galleryGroup '相册名' '相册说明' '/Gallery/example' https://s1.ax1x.com/2020/05/01/Jj9Mgx.jpg %}
   {% galleryGroup '漫威' '關於漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
   {% galleryGroup 'OH MY GIRL' '關於OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

应用效果

相册名

相册说明

漫威

關於漫威的圖片

OH MY GIRL

關於OH MY GIRL的圖片

相册 markdown文件格式

{% gallery %}
 markdown 图片格式
{% endgallery %}

如：
{% gallery %}
![JvUJfg.jpg](https://s1.ax1x.com/2020/05/02/JvUJfg.jpg)
![JvUU6s.jpg](https://s1.ax1x.com/2020/05/02/JvUU6s.jpg)
{% endgallery %}

具体操作

全局 _config.yml 中 #Directory 下的配置

1
2
3

list_dir: list             # self-define
gallery_dir: list/gallery  # self-define
book_dir: list/book        # self-define

butterfly.yml 下关于 gallery 的配置

1
2
3

List||fa fa-list:
  - Book || /list/book/ || fa fa-book
  - Gallery || /list/gallery/ || fa fa-photo

Gallery 配置

list/gallery 目录下创建目录 example
example 目录下创建 example.md

---
title: Example
date: 2019-08-16 16:30:59
top_img: https://s1.ax1x.com/2020/05/02/JvU1Tf.jpg
---


{% gallery %}
![JvUJfg.jpg](https://s1.ax1x.com/2020/05/02/JvUJfg.jpg)
![JvUU6s.jpg](https://s1.ax1x.com/2020/05/02/JvUU6s.jpg)
![JvUtpQ.jpg](https://s1.ax1x.com/2020/05/02/JvUtpQ.jpg)
![JvU8k8.jpg](https://s1.ax1x.com/2020/05/02/JvU8k8.jpg)
![JvU1Tf.jpg](https://s1.ax1x.com/2020/05/02/JvU1Tf.jpg)
![JvUGtS.jpg](https://s1.ax1x.com/2020/05/02/JvUGtS.jpg)
![JvUNlj.jpg](https://s1.ax1x.com/2020/05/02/JvUNlj.jpg)
{% endgallery %}

或者使用本地图片，这些图片存放在该 markdown 文件同一目录下
{% gallery %}
![JvUJfg.jpg](category.jpg)
![JvUU6s.jpg](link.jpg)
![JvUtpQ.jpg](twogirls.jpg)
{% endgallery %}

list/gallery 目录下创建 index.md

---
title: Gallery
date: 2019-08-16 16:30:59
top_img: https://s1.ax1x.com/2020/05/02/JvU1Tf.jpg
---

<div class="gallery-group-main">
{% galleryGroup '相册名' '相册说明' '/list/gallery/example/example.html' https://s1.ax1x.com/2020/05/01/Jj9Mgx.jpg %}
</div>