选项卡写法

百度一下

百度一下

// 基础用法（默认不自动播放，高度66）
{% music 2530390 %}

// 高级用法（指定自动播放和高度）
{% music 2530390 1 80 %}

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" src="//music.163.com/outchain/player?type=2&id=2530390&auto=0&height=66"></iframe>

<meting-js server="netease" type="playlist" id="8725850622" ></meting-js>

选项卡写法

{% tabs 0 %}
<!-- tab 写法 -->
55
<!-- tab 实例 -->
123

<!-- tab 引入 -->
{% include_md includes/iframe.md %}
{% endtabs %}

折叠代码

写法

{% folding 详情 %}

这里是隐藏的内容，只有点击标题才会显示。
- 列表项1
- 列表项2
{% endfolding %}


{% folding 已展开的内容 expanded %}
这部分内容默认是展开的。
**加粗文本** 和 `代码` 都可以正常显示。
{% endfolding %}

实例

警告语

{% ys 我有一只小毛驴，我从来都不骑。%} 
---
{% ys yellow icon , fas fa-exclamation-triangle, 我有一只小毛驴，我从来都不骑。 %} 
{% ys red icon , fas fa-radiation-alt,我有一只小毛驴，我从来都不骑。 %} 
{% ys green icon ,fas fa-grin-beam, 我有一只小毛驴，我从来都不骑。 %} 
{% ys blue icon, fas fa-bullhorn, 我有一只小毛驴，我从来都不骑。 %} 
---
{% ys yellow icon bj, fas fa-exclamation-triangle, 我有一只小毛驴，我从来都不骑。 %} 
{% ys red icon bj, fas fa-radiation-alt,我有一只小毛驴，我从来都不骑。 %} 
{% ys green icon bj,fas fa-grin-beam, 我有一只小毛驴，我从来都不骑。 %} 
{% ys blue icon bj, fas fa-bullhorn, 我有一只小毛驴，我从来都不骑。 %} 

include

写法

引入2.md 全部内容
{% include_md _posts/2.md %} 

引入2.md 全部内容 并 增跳转按钮
{% include_md _posts/2.md /about/%}  

引入2.md 前150字符内容 并 增跳转按钮 
{% include_md _posts/2.md 150 https://www.baidu.com/ %} 

引入2.md 前250字符内容和封面图 并 增跳转按钮 
{% include_md _posts/2.md 250 cover https://www.baidu.com/ %}

实例

{% include_md _posts/2.md 250 cover https://www.baidu.com/ %} 实例

{% meting netease 8185045795 %}

更多

轮播图

写法

{% grid gallery bordered %}
/images/suiji/2.jpg
/images/suiji/2.jpg,本地图片,https://www.baidu.com/
/images/suiji/2.jpg,本地图片,/posts/photo1.html

/video/6.mp4,
/video/6.mp4,本地视频,
https://www.runoob.com/try/demo_source/movie.mp4,外部视频,/about/

BV1SehnzBEox,
BV1SehnzBEox,B站视频示例
BV1SehnzBEox,B站视频示例,https://bilibili.com
{% endgrid %}

实例

思维导图

实例

写法

<div class="markmap">
- Markmap 思维导图
  - 核心功能
    - 文本转换为思维导图
    - 交互式缩放与导航
    - 支持复杂层级结构
  - 主要模块
    - autoloader
      - 自动加载所需资源
      - 简化集成流程
    - transformer
      - 处理 Markdown 语法
      - 转换为思维导图数据
    - view
      - 渲染图形界面
      - 支持用户交互操作
  - 应用场景
    - 知识结构展示
    - 会议纪要整理
    - 学习笔记可视化
</div>

滚动的数字

实例

写法

{% number 生产年份,1984,20240; 销量,100,2000; 人员数量,30,65000; 国家数量,5,200 %}

销售员

John Smith

Senior Sales Executive

Contact John

John Smith2

Senior Sales Executive2

Contact John

{% sales %}
John Smith,Senior Sales Executive,/images/suiji/5.jpg,5,https://www.baidu.com/
John Smith2,Senior Sales Executive2,/images/suiji/6.jpg,3,https://www.baidu.com/
{% endsales %}

公众号引流

$ npm install hexo-plugin-readmore --save

readmore:   
  # 是否启用
  enable: false  #true
  # 已申请的博客 ID
  blogId: '*****-*************-***'
  # 已申请的微信公众号名称
  name: '梦想魔豆'
  # 已申请的微信公众号回复关键词
  keyword: 'tech'
  # 已申请的微信公众号二维码图片
  qrcode: '/images/logo/gongzhonghao.jpg'
  # 自定义的 JS 资源链接，可用于 CDN 加速
  libUrl: 'https://qiniu.techgrow.cn/readmore/dist/readmore.js'
  # 自定义的 CSS 资源链接，可用于适配不同风格的博客
  cssUrl: 'https://qiniu.techgrow.cn/readmore/dist/hexo.css'
  # 命令行终端是否输出日志信息
  debug: true
  # 文章内容的预览高度（例如 300）
  height: 'auto'
  # 文章解锁后凭证的有效天数
  expires: 365
  # 定时校验凭证有效性的时间间隔（秒）
  interval: 60
  # 是否添加微信公众号引流工具到移动端页面
  allowMobile: false
  # 获取文章主体内容的 JS 选择器，在博客启用了 Pjax 的情况下才需要根据不同的主题进行配置
  pjaxSelector: ''
  # Pjax 支持重载的 Css 类名（例如 'pjax'），在博客启用了 Pjax 的情况下才需要根据不同的主题进行配置
  pjaxCssClass: ''
  # 每篇文章随机添加微信公众号引流工具的概率，有效范围在 0.1 ~ 1 之间，1 则表示所有文章默认都自动添加引流工具
  random: 1