标签搜索
阿森' s
阿森' s
阿森' s

那年，未来遥远得没有形状，我们单纯得没有烦恼。

  • 累计撰写 143 篇文章
  • 累计收到 895 条评论
技术教程

Joe主题使用文档

阿森' s
阿森' s
2020-11-15 / 5 评论 / 9,889 阅读 / 正在检测是否收录...

模版截图

[tabs]
[tab-pane label="前台首页"] [/tab-pane]
[tab-pane label="主题设置"] [/tab-pane]
[tab-pane label="视频模版"] [/tab-pane]
[tab-pane label="友链模版"] [/tab-pane]
[tab-pane label="动态模版"] [/tab-pane]
[/tabs]

模板简介

1、开源免费有注释，代码随意修改，愿意的话留个友链就行。
2、响应式布局，支持移动端，ipad，ipad pro，mac等等，大部分设备全部已适配
3、功能极强，插件有的功能，主题有，插件没有的功能主题也有，无需下载任何插件
4、主题设置及其丰富，主题设置有几十项设置。自定义极强，无需修改源码
5、主题功能丰富的同时，代码极其简洁，主题毫秒级响应
6、主题自带画图回复与强大的无需采集视频模板，typecho首发功能！
7、SEO优化，主题自带百度收录推送，无需你每天干巴巴的去站长那儿推送

[line]标题演示[/line]

一级标题样式

实现代码：

# 我是一级标题，一个#号

二级标题风格样式

实现代码：

## 我是二级标题，两个#号

三级标题风格样式

实现代码：

### 我是三级标题，三个#号

四级标题风格样式

实现代码：

#### 我是四级标题，四个#号
五级标题风格样式

实现代码：

#### 我是五级标题，五个#号
六级标题风格样式

实现代码：

#### 我是六级标题，六个#号

[line]标签短代码[/line]

[tag type="default"]标签一[/tag] [tag type="success"]标签二[/tag] [tag type="info"]标签三[/tag] [tag type="warning"]标签四[/tag] [tag type="danger"]标签五[/tag]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@tag type="default"]标签一[/tag]
[@tag type="success"]标签二[/tag]
[@tag type="info"]标签三[/tag]
[@tag type="warning"]标签四[/tag]
[@tag type="danger"]标签五[/tag]

[line]按钮短代码[/line]

[btn href="" type="default"]默认按钮[/btn] [btn href="" type="primary"]主要按钮[/btn] [btn href="" type="success"]成功按钮[/btn] [btn href="" type="info"]信息按钮[/btn] [btn href="" type="warning"]警告按钮[/btn] [btn href="" type="danger"]危险按钮[/btn]

[alt type="info"]用的时候把 @ 符号删掉。href: 跳转链接[/alt]

[@btn href="" type="default"]默认按钮[/btn]
[@btn href="" type="primary"]主要按钮[/btn]
[@btn href="" type="success"]成功按钮[/btn]
[@btn href="" type="info"]信息按钮[/btn]
[@btn href="" type="warning"]警告按钮[/btn]
[@btn href="" type="danger"]危险按钮[/btn]

[line]提示短代码[/line]

[alt type="success"]成功提示的文案[/alt]
[alt type="info"]消息提示的文案[/alt]
[alt type="warning"]警告提示的文案[/alt]
[alt type="error"]错误提示的文案[/alt]
[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@alt type="success"]成功提示的文案[/alt]
[@alt type="info"]消息提示的文案[/alt]
[@alt type="warning"]警告提示的文案[/alt]
[@alt type="error"]错误提示的文案[/alt]

[line]当前线状标题短代码[/line]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@line]当前线状标题短代码[/line]

[line]tab栏短代码[/line]

[tabs]
[tab-pane label="用户管理"]用户管理[/tab-pane]
[tab-pane label="配置管理"]配置管理[/tab-pane]
[tab-pane label="角色管理"]角色管理[/tab-pane]
[tab-pane label="角色管理"]角色管理[/tab-pane]
[/tabs]

[@tabs]
[@tab-pane label="用户管理"]用户管理[/tab-pane]
[@tab-pane label="配置管理"]配置管理[/tab-pane]
[@tab-pane label="角色管理"]角色管理[/tab-pane]
[@tab-pane label="角色管理"]角色管理[/tab-pane]
[@/tabs]

[line]基础卡片短代码[/line]

[alt type="info"]用的时候把 @ 符号删掉。 width 不可省略[/alt]

[card-default width="100%" label="卡片标题"]卡片内容[/card-default]

[@card-default width="100%" label="卡片标题"]卡片内容[/card-default]

[line]展开关闭短代码[/line]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[collapse]
[collapse-item label="标题"]我是隐藏的[/collapse-item]
[collapse-item label="标题"]我是隐藏的[/collapse-item]
[/collapse]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@collapse]
[@collapse-item label="标题"]我是隐藏的[/collapse-item]
[@collapse-item label="标题"]我是隐藏的[/collapse-item]
[@/collapse]

[line]时间线短代码[/line]

[timeline]
[timeline-item]啊哈哈哈哈[/timeline-item]
[timeline-item]草族看剑[/timeline-item]
[/timeline]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@timeline]
[@timeline-item]啊哈哈哈哈[/timeline-item]
[@timeline-item]草族看剑[/timeline-item]
[@/timeline]

[line]复制线短代码[/line]

[copy]点我复制[/copy]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@copy]点我复制[/copy]

[line]打字机效果短代码[/line]

[typing]打字机打字机[/typing]

[alt type="info"]用的时候把 @ 符号删掉。这里可能看不出效果[/alt]

[@typing]打字机打字机[@/typing]

[line]回复可见短代码[/line]

[hide]我是被隐藏的内容[/hide]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@hide]我是被隐藏的内容[@/hide]

[line]主题自带消息弹窗[/line]

成功提示 警告提示 消息提示

注意：以上的提示信息，在移动端的样式是统一的，只会在PC端呈现不同的样式，下面是以上实现的代码

<a no-target href="javascript:void(0)" onclick="$.toast({ type: 'success', message: '成功哈哈哈哈' })" class="j-btn success">成功提示</a>
<a no-target href="javascript:void(0)" onclick="$.toast({ type: 'warning', message: '警告哈哈哈哈' })" class="j-btn warning">警告提示</a>
<a no-target href="javascript:void(0)" onclick="$.toast({ type: 'info', message: '警告哈哈哈哈' })" class="j-btn info">消息提示</a>

[line]相册功能[/line]

[photo]




[/photo]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@photo]
![ ][10]
![ ][11]
![ ][12]
[@/photo]

[line]卡片导航功能[/line]

[card-nav]
[card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /]
[card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /]
[/card-nav]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@card-nav]
[@card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /]
[@card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /]
[@/card-nav]

[line]文章插入视频[/line]

[dplayer src="https://static.isenyu.cn/video/988F33B4-FBFA-4985-8AB2-C22028277B26.mp4" /]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@dplayer src="https://static.isenyu.cn/video/988F33B4-FBFA-4985-8AB2-C22028277B26.mp4" /]

[line]网易云音乐[/line]

[music id="1498342159"/]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@music id="1498342159"/]

[line]网易云歌单[/line]

[music-list id="5341153457" /]

[alt type="info"]用的时候把 @ 符号删掉[/alt]

[@music-list id="5370364292" /]

本文教程出至该主题作者JOR

27
版权属于：

森屿暖树🚀.摘自光年🌸

本文链接：

https://www.isenyu.cn/842.html （转载时请注明本文出处及文章链接）

作品采用：

《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论 (5)

取消
  1. 头像
    林阿三
    Windows 10 · Google Chrome

    画图

    回复
    1. 头像
      阿森' s 作者
      MacOS · Google Chrome
      @ 林阿三

      画图

      回复
  2. 头像
    林阿三
    Windows 10 · Google Chrome

    画图

    回复
  3. 头像
    林杰
    Android Pie · QQ Browser

    画图

    回复
    1. 头像
      阿森' s 作者
      MacOS · Google Chrome
      @ 林杰

      画图

      回复