MyShortcodes
2025年7月31日 10:50
MyShortcodes
Typecho通用短代码插件，里面有10个短代码，理论上是上传安装既用。经过测试“typecho默认主题、joe主题”是没有bug，正常使用的
下载
使用
<!-- 时间线示例 -->
[timeline]
[timeline-item title="2023年" date="1月"]项目启动，完成需求分析[/timeline-item]
[timeline-item title="2023年" date="6月"]开发阶段，完成核心功能[/timeline-item]
[timeline-item title="2023年" date="12月"]项目上线，开始运营[/timeline-item]
[/timeline]
<!-- 流程图示例 -->
[process]
[process-step title="需求分析" icon="fa fa-search"]收集并分析用户需求[/process-step]
[process-step title="设计阶段" icon="fa fa-pencil"]完成UI和UX设计[/process-step]
[process-step title="开发阶段" icon="fa fa-code"]实现功能开发[/process-step]
[process-step title="测试上线" icon="fa fa-rocket">进行测试并正式上线[/process-step]
[/process]
<!-- 提示框示例 -->
[tooltip text="这是一个提示" position="top"]悬停我[/tooltip]
<!-- 手风琴示例 -->
[accordion]
[accordion-item title="常见问题1"]这是第一个问题的答案内容[/accordion-item]
[accordion-item title="常见问题2"]这是第二个问题的答案内容[/accordion-item]
[accordion-item title="常见问题3">这是第三个问题的答案内容[/accordion-item]
[/accordion]
<!-- 进度条示例 -->
[progress percent="75" color="blue">项目完成度[/progress]
<!-- 图标示例 -->
[icon name="fa fa-home" size="2x" color="red"]首页图标[/icon]
<!-- 剧透内容示例 -->
[spoiler title="点击查看答案"]
这是隐藏的答案内容，需要点击才能查看。
[/spoiler]
[tabs]
[tab title="选项卡1"]这里是第一个选项卡的内容。[/tab]
[tab title="选项卡2"]这里是第二个选项卡的内容，可以放任何东西。[/tab]
[tab title="选项卡3"]这里是第三个选项卡的内容。[/tab]
[tab title="选项卡4"]这里是第四个选项卡的内容。[/tab]
[/tabs]
[alert type="success"]恭喜你，操作成功！[/alert]
[alert type="warning"]这是一个警告信息，请注意。[/alert]
[button url="https://www.example.com" color="green" size="large" blank="true"]点击访问示例网站[/button]
[column width="1/2"]
这是第一栏的内容。
[/column]
[column width="1/2"]
这是第二栏的内容。
[/column]
<!-- 注意：分栏后最好加一个 <div class="clearfix"></div> 来清除浮动，以防布局错乱 -->
<div class="clearfix"></div>
如何扩展这个插件？
非常简单！只需在 Plugin.php 文件中进行以下三步操作：
在 shortcodeCallback 函数的 switch 语句中添加新的 case:
case 'my_new_shortcode':
return self::my_new_shortcode_shortcode($atts, $content);
编写一个新的处理函数:
public static function my_new_shortcode_shortcode($atts, $content)
{
// 在这里编写你的HTML逻辑
// 例如: return '<div class="my-new-class">' . $content . '</div>';
}
效果截图
