标签外挂⁍

Butterfly 安裝文檔(三) 主題配置-1 | Butterfly

Tab⁍

使用方法⁍

markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

实例⁍

markdown
1
2
3
4
5
6
7
8
9
{% tabs example, -1 %}
<!-- tab 源码 -->
**Hello world**
<!-- endtab -->

<!-- tab icon@fas fa-font -->
icon test
<!-- endtab -->
{% endtabs %}

icon test

hideToggle 折叠⁍

示例
markdown
1
2
3
{% hideToggle 示例 %}
来，试试看吧
{% endhideToggle %}

note⁍

在主题文件中修改

yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

markdown
1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名稱 用法
color 【可选】顔色(default / blue / pink / red / purple / orange / green)
icon 【可选】可配置自定义icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可覆盖配置中的 style（simple/modern/flat/disabled）

default simple

primary flat

pink morden

note warning no-icon flat

green ‘fab fa-internet-explorer’ disabled

音乐播放⁍

引入Aplayer播放音乐 | Akilarの糖果屋

安装Aplayer插件⁍

bash
1
npm install hexo-tag-aplayer --save

配置⁍

  1. 在站点配置文件[Blogroot]\_config.yml中新增配置项，建议直接加在最底下：

    yml
    1
    2
    3
    4
    5
    # APlayer
    # https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
    aplayer:
      meting: true
      asset_inject: false

  2. 修改主题配置文件[Blogroot]\_config.butterfly.yml中关于 Aplayer 的配置内容

    yml
    1
    2
    3
    4
    # Inject the css and script (aplayer/meting)
    aplayerInject:
      enable: true
      per_page: true

插入 Aplayer html⁍

  1. aplayer html例子：

    html
    1
    <div class="aplayer no-destroy" data-id="6990698783" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>
    参数一览
    option default description
    data-id require song id / playlist id / album id / search keyword
    data-server require 音乐平台: netease, tencent, kugou, xiami, baidu
    data-type require song, playlist, album, search, artist
    data-fixed FALSE enable fixed mode
    data-mini FALSE enable mini mode
    data-autoplay FALSE 是否自动播放 audio autoplay
    data-theme #2980b9 main color
    data-loop all 循环播放，参数可选: ‘all’, ‘one’, ‘none’
    data-order list 播放顺序，参数可选: ‘list’, ‘random’
    data-preload auto values: ‘none’, ‘metadata’, ‘auto’
    data-volume 0.7 默认音量，播放器会记录用户设定的音量，用户设定后，默认音量失效。
    data-mutex TRUE prevent to play multiple player at the same time, pause other players when this player start play
    data-lrctype 0 lyric type 歌词类型（？
    data-listfolded FALSE list一开始是否是折叠的 indicate whether list should folded at first
    data-listmaxheight 340px list max height
    data-storagename metingjs localStorage key that store player setting

  2. 在主题配置文件[Blogroot]\_config.butterfly.yml的 inject 配置项中添加 Aplayer 的容器。

    yml
    1
    2
    3
    4
    inject:
      head:
      bottom:
        - <div class="aplayer no-destroy" data-id="6990698783" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>

样式修改-靠边隐藏⁍

  1. 添加一下 CSS 样式使其自动缩进隐藏。在 [Blogroot]\themes\butterfly\source\css\custom.css 中 (没有这个文件就按照路径自己新建) 添加如下内容：

    css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
      left: -66px !important;
      /* 默认情况下缩进左侧66px，只留一点箭头部分 */
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
      left: 0 !important;
      /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
    }

  2. 不要忘了到主题配置文件引入自定义样式，修改 [Blogroot]_config.butterfly.yml 的 inject 配置项：

    yml
    1
    2
    3
    inject:
      head:
        - <link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'">

一些可以参考的资源⁍

https://blog.imzjw.cn/posts/b74f504f

Tag Plugins Plus | Akilarの糖果屋