Typecho-Joe-Theme主题帮助文档

主题下载

{card-default width=”100%” label=”主题下载”}
1、QQ群下载：391579920
2、GitHub下载（推荐）：https://github.com/HaoOuBa/Joe（帮忙点个star）
{/card-default}

主题描述

{card-default width=”100%” label=”主题亮点”}
1、整包仅1.3Mb，却实现超强功能，极其迅速的响应（在开发时，都是使用30000篇文章进行开发测试）
2、全站变量名、类名统一规范，重在方便更多人参与二开与拓展
3、主题开箱即用，没有任何复杂的操作，无需像其他主题去特意创建个分类等。
4、主题首发Typecho独家Joe编辑器
5、主题响应式布局，不依赖任何响应式框架，采用 Joe 独家响应式
6、主题在一切可能暴露的接口上，屏蔽sql注入、xss攻击风险，提供安全保障
7、内置超强视频功能、包含直播功能、全网影视功能、文章内插入视频功能
8、主题SEO极致优化，Lighthouse SEO跑分彪满100分
9、主题色彩全局公用、小白轻松直接修改整站自定义主题色
10、主题内置代码高亮、无需借助任何插件、支持200种语言
11、主题首发极强画图回复功能，为你的博客带来用户互动，不再像传统博客那样，仅限文字
12、主题内置sitemap、百度推送、友联、回复可见等，无需依赖任何插件
{/card-default}

Typecho-Joe-Theme

编辑器演示（编辑器持续更新）

Typecho-Joe-Theme

下面为主题演示，无需担心您不会怎么写、怎么实现、以下的内容，主题自带编辑器均已集成、直接 插 入即可

文本加粗

那个女孩子 气喘吁吁 的打电话和你说：我在跑步

文本倾斜

你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的

文本删除

你明白了，此刻的头上正顶着个 ~~率帽子~~ 绿帽子

行内代码

远上寒山石径斜，白云生处有人家。
停车 坐爱 枫林晚，霜叶红于二月花。

横线

引用

那女孩对你说：你还不如跳蛋。

有序列表

杜蕾斯(durex)的优点如下：

耐久（durability）
可靠（reliability）
优良（excellence）

无序列表

一个女朋友
二个女朋友
三个女朋友
…
N个女朋友
卒

超链接

百度一下，你就凉了

图片预览

Typecho-Joe-Theme

3行3列的表格

表头	表头	表头
鸡头	鸭头	龟头
鸡头	鸭头	龟头
鸡头	鸭头	龟头

代码块

const obj = {
  name: "hi",
  age: 18,
};
// 判断某个属性是否在对象里
console.log("name" in obj);
// 删除对象某个属性
console.log(delete obj.name);
// 将对象的属性名提取成数组
console.log(Object.keys(obj));

输出解析HTML

颜色大小

插入一个时间点

2021-04-17 20:46:02 星期六

段落缩进、空格

有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 —-李七毛《我们都不擅长告别》

特殊符号

★ ╊ ➻ Ω… 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了

emoji表情

这里需要改下数据库的存储格式才支持emoji，这里我没改，演示不了，改的教程网上都有，也很简单

图片表情

::(花心) :@(喜极而泣) ::(阴险) ୧(๑•̀⌄•́๑)૭… 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了

任务未完成

{ } 每天都是崭新的一天哦！每天都要开心哦！

任务已完成

{x} 今天断气嗝屁了。

居中标题

{mtitle title=”牛鞭牛鞭”/}

插入一个m3u8或mp4视频（主题自带播发器，你也可以在后台修改成你自己的播放器）

插入bilibili视频

{bilibili bvid=”BV1Ui4y1P78R”/}

网易云歌单

{music-list id=”123243715” width=”100%”/}

网易云音乐

{music id=”1303046498” width=”100%” /}

多彩按钮

下面的实现方式，无需去学习怎么实现，编辑器直接 插 入

自定义自己想要的颜色　{abtn color=”#409eff”/}

自定义图标，达6000+图标任你使用　{abtn icon=”fa-bath”/}

自定义圆角度数，最大17.5px　{abtn radius=”4px”/}

搭配在一起任意使用　{abtn color=”#409eff” icon=”fa-bath” href=”” radius=”0” content=””/}

便条按钮

便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样

{anote icon=”” href=”” type=”secondary” content=””/}

{anote icon=”” href=”” type=”success” content=””/}

{anote icon=”” href=”” type=”warning” content=””/}

{anote icon=”” href=”” type=”error” content=””/}

{anote icon=”” href=”” type=”info” content=””/}

彩色虚线

{dotted startColor=”#ff6c6c” endColor=”#1989fa”/}

自定义虚线颜色，支持任意颜色

{dotted startColor=”#1772e8” endColor=”#4cd327”/}

回复可见

{hide}我拉了屎，不冲，我放手上揉丸子。哎~ 我就是玩。{/hide}

默认卡片

自定义宽度的卡片

{card-default width=”80%”}{/card-default}

嵌套其他内容的卡片

{card-default label=”” width=””}

{anote icon=”” href=”” type=”secondary” content=””/}

1	<div></div>

{/card-default}

消息提示

{message type=”success” content=””/}

{message type=”info” content=””/}

{message type=”warning” content=””/}

{message type=”error” content=””/}

附件预览

主题自带博客附件预览功能，访问地址：

点击访问

进度条

{progress percentage=”” color=”#ff6c6c”/}

自定义颜色

{progress percentage=”30%” color=”#3a9aee”/}

标注

标注内容

支持嵌入任意内容，及任意颜色

表头	表头	表头
表格	表格	表格
表格	表格	表格
表格	表格	表格

1	<div>hello</div>

自定义外部音乐

{mp3 url=”https://api.vvhan.com/api/wyMusic/热歌榜“ /}

Tabs标签页

{tabs}
{tabs-pane label=”标签一”}

1	<div>啊哈哈哈哈我是大帅哥！</div>

{/tabs-pane}
{tabs-pane label=”标签二”}

啊啊啊啊啊！
哦哦哦哦哦？
哈哈哈哈哈！
{/tabs-pane}
{/tabs}

卡片列表

{card-list}
{card-list-item}
列表一内容
{/card-list-item}
{card-list-item}
列表二内容
{/card-list-item}
{card-list-item}
列表三内容
{/card-list-item}
{card-list-item}
列表四内容
{/card-list-item}
{/card-list}

时间轴

{timeline}
{timeline-item color=”#19be6b”}
1.0.0版本正式上线
{/timeline-item}
{timeline-item color=”#19be6b”}
更新2.0.0版本
{/timeline-item}
{timeline-item color=”#ed4014”}
删库跑路
{/timeline-item}
{/timeline}

点击复制

链接：https://pan.baidu.com/s/14wKBhs4geqSLETvpYhxGZQ
提取码：{copy showText=”点击复制” copyText=”z451”/}
复制这段内容后打开百度网盘手机App，操作更不方便哦

描述性卡片

{card-describe title=”卡片描述”}
卡片内容
{/card-describe}

跑马灯

{lamp/}

折叠面板

{collapse}
{collapse-item label=”折叠标题一” open}
折叠内容一
{/collapse-item}
{collapse-item label=”折叠标题二”}
折叠内容二
{/collapse-item}
{/collapse}

云盘下载

{cloud type=”default” url=”” password=””/}

{cloud type=”360” url=”” password=””/}

{cloud type=”bd” url=”” password=”zk6f”/}

{cloud type=”ty” url=”” password=””/}

{cloud type=”ct” url=”” password=””/}

{cloud type=”wy” url=”” password=””/}

{cloud type=”github” url=”” password=””/}

{cloud type=”lz” url=”” password=””/}

宫格

3列，间距15px的宫格

[{"url":"https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png","alt":"Typecho-Joe-Theme"},{"url":"https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png","alt":"Typecho-Joe-Theme"},{"url":"https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png","alt":"Typecho-Joe-Theme"}]