17_Gitbook_Plugin_Text_Hiding.md

文本隐藏

1. accordion 折叠模块

折叠模块, 别名叫accordion。可以实现将内容隐藏起来，外部显示模块标题和显示箭头，点击箭头可显示里面的内容。

在文章中对主体内容进行细化说明较长，又不是文章核心逻辑时，可以隐藏细化说明部分，有需要时可以由读者决定是否阅读该部分细化说明。

1.1 安装

npm i gitbook-plugin-accordion

1.2 配置

{
  "plugins": ["accordion"]
}

在文章中使用标记对内容进行折叠

1.3 效果

%accordion% 模块标题 %accordion%

- 内容部分第1行
- 内容部分第2行
- 内容部分第3行
- 内容部分第4行
- 内容部分第5行
- 内容部分第6行
- 内容部分第7行
- 内容部分第8行
- 内容部分第9行

%/accordion%

2. click-reveal 插件

click-reveal 点击显示 默认隐藏，点击可显示。

2.1 安装

npm i gitbook-plugin-click-reveal

2.2 配置

{
    "plugins": [
        "click-reveal"
    ]
}

使用方式，markdown中

{% reveal %}

要被隐藏的内容

{% endreveal %}

默认显示的文字是 Click to show , 使用自定义显示文字

{% reveal text="点击显示" %}

要被隐藏的内容

{% endreveal %}

支持html语法

<div class="click_reveal">
    <span> 点击显示 </span>
    <div><pre><code>隐藏的文字</code></pre></div>
</div>

2.3 效果

3. hide-element 插件

hide-element 插件：可以隐藏不想看到的元素，比如导航栏中 Published by GitBook

3.1 安装

npm i gitbook-plugin-hide-element

3.2 配置

{
    "plugins": [
        "hide-element"
    ],
    "pluginsConfig": {
        "hide-element": {
            "elements": [".gitbook-link"]
        }
    }
}

3.3 效果

默认可以移除最左侧下方的提示信息：

Published with GitBook

或

本书使用 Gitbook 发布

4. sectionx 插件

将页面分块显示 用于将页面分成多个部分，并添加按钮以允许读者控制每个部分的可见性。 下面有个更好的折叠模块功能accordion

4.1 安装

npm i gitbook-plugin-sectionx

4.2 配置

{
    "plugins": [
           "sectionx"
    ]
}

容分块：

在 .md 文件中定义一个部分（就是插入下面的字段）。 markdown中示例代码：

<!--sec data-title="标题2" data-id="section0" data-show=true ces-->
内容部分2；
<!--endsec-->

这里只采用三个参数，其他参数如下所示：

键	允许的值	说明
!type	NOTE，TIP，WARNING和DANGER	警告级别设置
style	以下值之一: callout（默认）, flat	警告样式，见图19的左右不同
label	任何文字	警告块的标题位置，即Note这个字段位置（不支持中文）
icon	比如： fa fa-info-circle	一个有效的Font Awesome图标，那块小符号
className	CSS类的名称	指定css文件，用于指定外观
labelVisibility	以下值之一：visible（默认），hidden	标签是否可见
iconVisibility	以下值之一：visible（默认），hidden	图标是否可见

4.3 添加按钮，控制部分可见性

通过在 GitBook 中添加内联HTML，以下代码可以添加一个按钮，以允许您查看或隐藏其他部分。 简单来说，就是在【使用1】的内容部分添加一个按钮：

<button class="section" target="section1" show="显示下一部分" hide="隐藏下一部分"></button>

标签说明：

标签	说明
class	该按钮必须属于类“section”。//这里就是用到 1部分的section
target	当按下时，将切换id为target的部分。
show	隐藏目标部分时按钮上的文本。
hide	目标部分可见时按钮上的文本。

markdown中示例代码：

<button class="section" target="section2" show="显示模块2" hide="隐藏模块2"></button>
<!--sec data-title="模块2" data-id="section2" data-show=true ces-->
内容部分2
<!--endsec-->

4.4 混合使用

将第2节的button块添加到第1节的内容部分 markdown中示例代码：

<!--sec data-title="标题1" data-id="section0" data-show=true ces-->
内容部分1；
<button class="section" target="section1" show="显示下一部分" hide="隐藏下一部分"></button>
<!--endsec-->
<!--sec data-title="标题2" data-id="section1" data-show=true ces-->
内容部分2
<!--endsec-->

效果图3：