Hexo-Tab栏实现分享

个人博客: Bin

Hexo-Tab栏实现分享

• 官方文档查看详细信息

  点击进入官方文档 https://butterfly.js.org/posts/4aa8abbe/#Tabs

• 渲染效果

  

• (主题下)配置文件添加如下

  # tabs
  tabs:
    enable: true
    transition:
      tabs: true
      labels: true
    border_radius: 0
  

• 实现语法剖析

  语法:
  
  {
         %  tabs test1 %}
  # 第一块区域
  
      <!-- tab 文本信息 -->
  
          ** this is Tab1**
  
      <!-- endtab -->
  
  # 第二块区域
  
      <!-- tab -->
  
          ** ww**
  
      <!-- endtab -->
  
  # 第三块区域
      <!-- tab -->
  
          asa
  
      <!-- endtab -->
  
  {
         % endtabs %}
  

• 分栏实现一

  {% tabs %}

  名称a下的内容展示

  名称b下的内容展示

  名称c下的内容展示

  {% endtabs %}

• 分栏实现二

  {% tabs %}

  名称a下的内容展示ss

  名称b下的内容展示

  名称c下的内容展示

  {% endtabs %}