Hexo+Github博客:如何折叠(显示/隐藏)部分文字

@Author:CSU张扬
@Email:csuzhangyang@gmail.com or csuzhangyang@qq.com
@我的网站: https://www.faker.top
参考:Github/hexo-theme-next

1. HTML语法:使用 details 元素

1.1 如何使用

<details>
  <summary>隐藏内容的标题</summary>

隐藏文字隐藏文字隐藏文字。  
支持 `markdown` 语法

- 支持 **粗体**、*斜体*
- 支持列表
- 支持md插入图片语法:![1](hexo-pictures/hexo-6_1.png)
- 支持html插入图片语法:<img src = "hexo-pictures/hexo-6_1.png" width = "50%">
- 支持行内代码 `markdown`
- 支持代码块
  
    ```cpp
    #include <initializer_list>
    #include <iostream>
    struct A {
        A() { std::cout << "1"; }
        A(int) { std::cout << "2"; }
        A(std::initializer_list<int>) { std::cout << "3"; }
    };
    int main(int argc, char *argv[]) {
        A a1;
        A a2{};
        A a3{ 1 };
        A a4{ 1, 2 };
    }
    ```// 此处加点文字,防止排版错误:因为这是代码块内的代码。使用时可删除

- 支持表格

    |文字|文字|
    |-|-|
    |文字|文字|

</details>

1.2 实现效果

CSDN不支持折叠文字,效果请到本人网站。faker.top


2. hexo-sliding-spoiler插件

2.1 安装和自定义设置

【1】安装

官网有安装教程:

插件地址:hexo-sliding-spoiler

npm install hexo-sliding-spoiler --save

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aDE1mLTK-1581731870108)(hexo-pictures/hexo-6_4.gif)]

【2】自定义设置

  1. 默认是 Show: .../ Hide: ...,我们可以更改前面的字。

  2. 打开文件 hexo\node_modules\hexo-sliding-spoiler\assetsspoiler.css,找到25-31行,修改其中的 content

     .spoiler.collapsed .spoiler-title:before {
         content: "Show: ";
     }
    
     .spoiler.expanded .spoiler-title:before {
         content: "Hide: ";
     }
    

2.2 如何使用

{% spoiler "隐藏内容的标题" %}

隐藏文字隐藏文字隐藏文字。  
支持 `markdown` 语法

- 支持 **粗体***斜体*
- 支持列表
- 支持md插入图片语法:![1](hexo-pictures/hexo-6_1.png)
- 支持html插入图片语法:<img src = "hexo-pictures/hexo-6_1.png">
- 支持行内代码 `markdown`
- 支持代码块
  
    ```cpp
    #include <initializer_list>
    #include <iostream>
    struct A {
        A() { std::cout << "1"; }
        A(int) { std::cout << "2"; }
        A(std::initializer_list<int>) { std::cout << "3"; }
    };
    int main(int argc, char *argv[]) {
        A a1;
        A a2{};
        A a3{ 1 };
        A a4{ 1, 2 };
    }
    ```// 此处加点文字,防止排版错误:因为这是代码块内的代码。使用时可删除

- 支持表格

    |文字|文字|
    |-|-|
    |文字|文字|

{% endspoiler %}

2.3 实现效果

CSDN不支持折叠文字,效果请到本人网站。faker.top

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

神奇小海螺

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值