Stellar标签组件完全手册：30+内置插件的创意用法与实战案例
【免费下载链接】hexo-theme-stellar综合型hexo主题：博客+知识库+专栏+笔记，内置海量的标签组件和动态数据组件。项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-stellar
Stellar是一款综合型hexo主题，集成了博客、知识库、专栏和笔记功能，内置了30多种标签组件，帮助用户轻松打造丰富多样的内容展示效果。本手册将详细介绍这些标签组件的创意用法和实战案例，让你快速掌握Stellar主题的强大功能。
基础标签组件
信息提示组件：note
note组件是Stellar主题中常用的信息提示工具，支持自定义颜色和标题，适用于突出显示重要内容、提示信息或警告。
使用语法：
{% note [color:color] [title] content %}示例：
{% note color:blue 提示信息 这是一条蓝色的提示信息，用于展示重要内容。 %} {% note color:red 警告 这是一条红色的警告信息，请注意！ %}该组件的实现代码位于scripts/tags/lib/note.js，通过设置不同的颜色参数，可以轻松实现多样化的信息展示效果。
导航栏组件：navbar
navbar组件可以快速创建页面内导航菜单，帮助读者快速跳转到文章的不同部分，提升阅读体验。
使用语法：
{% navbar [active:url] [markdown-link] ... %}示例：
{% navbar active:/about/ 首页 关于我们 联系方式 %}这个组件非常适合在长文章中使用，让读者可以快速定位到感兴趣的内容。详细实现见scripts/tags/lib/navbar.js。
高级标签组件
GitHub卡片组件：ghcard
ghcard组件可以在文章中展示GitHub用户或仓库信息，包括头像、名称、描述、星标数等，是展示开源项目的理想选择。
使用语法：
{% ghcard user/repo [theme:xxx] %} or {% ghcard user %}示例：
{% ghcard xaoxuu %} {% ghcard xaoxuu/hexo-theme-stellar %}该组件通过调用GitHub Readme Stats API实现，支持自定义主题颜色等参数。源码位于scripts/tags/lib/ghcard.js。
折叠面板组件：folding
folding组件可以创建可折叠的内容块，适用于展示详细信息但又不想占用太多页面空间的场景，如代码示例、详细说明等。
使用语法：
{% folding [title] [open] %} 内容 {% endfolding %}示例：
{% folding 点击展开代码示例 open %} 这是一段可折叠的代码示例，默认状态为展开。 {% endfolding %} {% folding 点击查看详细说明 %} 这是一段默认折叠的详细说明，点击标题可以展开查看。 {% endfolding %}媒体标签组件
图片展示组件：image
image组件提供了增强的图片展示功能，支持设置大小、添加边框、懒加载等特性，让图片展示更加灵活美观。
使用语法：
{% image [src] [alt] [width] [height] [lazy] %}示例：
{% image /images/example.jpg 示例图片 800 600 lazy %}视频播放组件：video
video组件支持在文章中嵌入视频，提供了基本的播放控制功能，支持多种视频格式。
使用语法：
{% video [src] [poster] [width] [height] %}示例：
{% video /videos/demo.mp4 /images/poster.jpg 800 450 %}交互标签组件
选项卡组件：tabs
tabs组件可以创建多标签页内容展示，适用于分类展示相关内容，如不同平台的安装教程、不同方案的对比等。
使用语法：
{% tabs [name] %} <!-- tab [title] --> 内容1 <!-- endtab --> <!-- tab [title] --> 内容2 <!-- endtab --> {% endtabs %}示例：
{% tabs 安装教程 %} <!-- tab Windows --> Windows系统安装步骤... <!-- endtab --> <!-- tab macOS --> macOS系统安装步骤... <!-- endtab --> {% endtabs %}评分组件：rating
rating组件可以在文章中添加评分功能，支持多种评分样式，适用于产品评价、电影评分等场景。
使用语法：
{% rating [score] [max] [type] %}示例：
{% rating 4.5 5 star %} {% rating 85 100 percent %}布局标签组件
网格布局组件：grid
grid组件可以创建响应式网格布局，用于展示图片、卡片等内容，支持自定义列数和间距。
使用语法：
{% grid [cols] [gutter] %} 内容1 {% endgrid %}示例：
{% grid 3 10 %} {% ghcard xaoxuu/hexo-theme-stellar %} {% ghcard xaoxuu/hexo-theme-material %} {% ghcard xaoxuu/hexo-theme-yilia %} {% endgrid %}时间线组件：timeline
timeline组件可以创建时间线样式的内容展示，适用于展示项目进度、个人经历等具有时间顺序的内容。
使用语法：
{% timeline %} - [时间点1] 内容1 - [时间点2] 内容2 {% endtimeline %}示例：
{% timeline %} - [2023-01-01] 项目启动 - [2023-03-15] 完成第一版开发 - [2023-06-30] 正式发布 {% endtimeline %}实用工具组件
代码复制组件：copy
copy组件可以为代码块添加复制功能，方便读者快速复制代码内容，提升用户体验。
使用语法：
{% copy [text] %} 代码内容 {% endcopy %}示例：
{% copy 复制代码 %} function hello() { console.log("Hello, Stellar!"); } {% endcopy %}按钮组件：button
button组件可以创建各种样式的按钮，支持链接跳转、颜色自定义等功能，让页面交互更加丰富。
使用语法：
{% button [text] [url] [color] [size] %}示例：
{% button 访问官网 https://example.com blue large %} {% button 下载文件 /downloads/file.zip green %}组件组合应用案例
案例一：项目介绍卡片
结合ghcard、note和button组件，创建一个完整的项目介绍卡片：
{% note color:blue 项目推荐 %} {% ghcard xaoxuu/hexo-theme-stellar %} {% button 查看文档 /docs.html %} {% button 开始使用 /getting-started.html primary %} {% endnote %}案例二：图文混排展示
使用grid、image和note组件，实现图文混排的内容展示：
{% grid 2 %} {% image /images/product1.jpg 产品图片1 %} {% note 产品特点 %} - 特点1：高性能 - 特点2：易用性 - 特点3：可扩展性 {% endnote %} {% endgrid %}案例三：交互式教程
结合tabs、code和button组件，创建交互式教程：
{% tabs 快速上手 %} <!-- tab 安装 --> {% copy 复制命令 %} npm install hexo-theme-stellar {% endcopy %} {% button 查看详细安装教程 /install.html %} <!-- endtab --> <!-- tab 配置 --> {% copy 配置示例 %} theme: stellar stellar: # 配置项 {% endcopy %} {% endtabs %}总结
Stellar主题提供了30多种内置标签组件，涵盖了信息展示、媒体嵌入、交互控制、布局排版等多个方面。通过灵活组合这些组件，可以轻松创建丰富多样的内容效果，提升博客的专业性和可读性。
所有标签组件的源代码都位于scripts/tags/lib/目录下，感兴趣的开发者可以查看源码了解实现细节，甚至根据需求进行二次开发。
希望本手册能帮助你充分利用Stellar主题的标签组件，打造出更加出色的博客内容！
【免费下载链接】hexo-theme-stellar综合型hexo主题：博客+知识库+专栏+笔记，内置海量的标签组件和动态数据组件。项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-stellar
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
