Mirages短代码使用
短代码列表
一、按钮样式的链接
短代码名称：button、btn
说明
生成一个内置按钮样式的超链接。
示例
[button href="https://store.get233.com"]简陋的小商店传送门[/button]
[button url="https://store.get233.com"]简陋的小商店传送门[/button]
[btn url="https://store.get233.com"]简陋的小商店传送门[/btn]效果
二、标签卡
标签码名称：tabs
说明
生成一个多标签页的卡片
示例
[tabs]
[tab name="标签页 1"]内容 1[/tab]
[tab name="标签页 2"]内容 2[/tab]
[/tabs]
[tabs selected="2"]
[tab name="标签页 1"]内容 1[/tab]
[tab name="标签页 2"]内容 2[/tab]
[/tabs]效果
如你所见
三、提示及警告框
短代码名称：hint、tip
说明
生成一个提示或警告卡片
示例
[hint]提示内容[/hint]
[hint warn]警告内容[/hint]
[hint type="danger" title="提示标题"]
提示内容
[/hint]效果
四、下载文件及链接
短代码名称：file
说明
生成一个下载文件的卡片
示例
[file url="https://example.com/download.zip"]示例文件名[/file]效果
五、标签
短代码名称：tag、lable
说明
生成一个标签
示例
使用鼠标选中文字时[tag]文字的颜色[/tag]，默认为[tag type="danger"]白色[/tag]。
[tag]默认 Tag[/tag]
[tag type="primary"]文字的颜色[/tag]
[tag type="info"]文字的颜色[/tag]
[tag type="warn"]文字的颜色[/tag]
[tag type="danger"]文字的颜色[/tag]
[tag type="success"]文字的颜色[/tag]
[tag outline]文字的颜色[/tag]
[tag type="primary" outline]文字的颜色[/tag]
[tag type="info" outline]文字的颜色[/tag]
[tag type="warn" outline]文字的颜色[/tag]
[tag type="danger" outline]文字的颜色[/tag]
[tag type="success" outline="1"]文字的颜色[/tag]效果
六、快速输入警告符：
短代码：!
说明
快速输入:
示例
快速输入: [!/]效果
快速输入:
七、回复可见
短代码：hide
说明
添加需要评论才可以查看的内容
示例
[hide]这里是评论可见的内容[/hide]效果
八、折叠框
短代码：collapse
说明
可以点击标题展开 / 折叠的内容
示例
[collapse title="标题"]
折叠内容
[/collapse]效果
九、Github
短代码：github
说明
放置一个 Github 仓库控件
示例
[github repo="typecho/typecho" /]效果
十、markdown扩展
说明
markdown扩展内容
示例
==测试==
~~测试~~
{{测试: ceshi}}
- [ ] 未选中
- [x] 选中
`测试`效果
十一、代码形式
代码形式一
代码形式二
#include "stdio.h"
int main(){
printf("hello world!\n");
return 0;
}结合下拉框
javascript code
<script>
// DPlayer API
document.addEventListener('DOMContentLoaded', initDplayer);
function initDplayer() {
const common = {
loadResource: function (id, resource, type, callback) {
let loaded = document.head.querySelector('#' + id);
if (loaded) {
callback();
return;
}
const element = document.createElement(type);
element.onload = element.onreadystatechange = () => {
if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
element.onload = element.onreadystatechange = null;
loaded = true;
callback();
}
}
if (type === 'link') {
element.rel = 'stylesheet';
element.href = resource;
} else {
element.src = resource;
}
element.id = id;
document.getElementsByTagName('head')[0].appendChild(element);
},
loadResources: function (callback) {
const cdn = '//s0.pstatp.com/cdn/expire-1-M';
const resources = [
'/dplayer/1.25.0/DPlayer.min.css',
'/dplayer/1.25.0/DPlayer.min.js',
'/hls.js/0.12.4/hls.light.min.js',
'/flv.js/1.5.0/flv.min.js'
];
let unloadedResourceCount = resources.length;
resources.forEach(resource => {
this.loadResource(btoa(resource).replace(/[=+\/]/g, ''), cdn + resource,
({
'css': 'link',
'js': 'script'
})[resource.split('.').pop()],
() => --unloadedResourceCount ? null : callback()
);
});
},
createDplayers: function (sources, callback) {
for (let i = 0; i < sources.length; i++) {
const child = document.createElement('div');
const src = sources[i].getAttribute('src');
sources[i].parentNode.insertBefore(child, sources[i]);
sources[i].style.display = 'none';
const type = src.split('.').pop();
const option = { url: src };
type === 'flv' ? option.type = type : null;
const dplayer = new DPlayer({ container: child, preload: 'none', autoplay: false, screenshot: false, video: option });
}
if (typeof callback === 'function') callback();
}
};
const mirages = {
isMirages: function () { return Mirages || false },
fixVideoSize: function (length) {
let outerTimer = false;
const outerInterval = setInterval(() => {
if (outerTimer) return;
const videos = document.getElementsByTagName('video');
if (videos.length === length) {
const dplayerWraps = document.querySelectorAll('.dplayer-video-wrap');
for (let i = 0; i < length; i++) {
const videoContainers = dplayerWraps[i].querySelectorAll('.video-container.video-4-3');
if (videoContainers.length) {
videoContainers[0].style = 'position: initial;';
videoContainers[0].className = 'video-container video-16-9';
console.log('video-4-3 fixed.');
} else {
const videoContainer = document.createElement('div');
videoContainer.style = 'position: initial;';
videoContainer.className = 'video-container video-16-9';
videoContainer.appendChild(videos[i]);
dplayerWraps[i].appendChild(videoContainer);
console.log('video-16-9 inserted.');
const targetNode = videoContainer;
const config = { childList: true };
const callback = (mutationsList, observer) => {
const newVideoContainers = videoContainer.querySelectorAll(
'.video-container.video-4-3');
if (newVideoContainers.length) {
newVideoContainers[0].className = '';
console.log('auto inserted video-4-3 fixed.');
observer.disconnect();
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
setTimeout(() => observer.disconnect(), 1000 * 120);
}
}
outerTimer = true;
clearInterval(outerInterval);
}
}, 500);
}
};
const dps = document.getElementsByTagName('dp');
if (dps.length !== 0) {
common.loadResources(() => common.createDplayers(dps, () => {
// 修正 Mirages 视频比例错误
mirages.isMirages() ? mirages.fixVideoSize(dps.length) : null;
}));
}
};
</script>十二、图片形式
有阴影
无阴影
引用
以上内容基本都是搬运自主题作者原文短代码 - Mirages 帮助文档
自改添加短代码
一、插入播放器(Dplayer)
支持 m3u8、mp4，flv 和 mkv 格式，不过编码必须是 H.264 AAC
引用OneDrive则使用下载地址即可
示例
!!!
<dp src="demo.mp4"></dp>
!!!效果
教程来自于LOGI-Typecho 引入 DPlayer 的简单方法
二、简单点击复制
示例
!!!
<cp name="复制静夜思" text="
静夜思
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
"></cp>
!!!效果
https://www.zggsong.cn/archives/Mirages.html#
主题修改代码
<!-- 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后) -->
<!-- chrome手机版状态栏颜色 -->
<meta name="theme-color" content="#848a82">
<script>
// 创建隐藏内容的复制按钮
document.addEventListener('DOMContentLoaded', initCopyButton);
function initCopyButton() {
const util = {
newButton: function (cp) {
cp.style.display = '0';
let text = cp.getAttribute('text');
text = text[0] === '\n' ? text.slice(1) : text;
const button = document.createElement('a');
button.href = '#'
button.innerHTML = cp.getAttribute('name');
button.className = 'btn btn-primary';
button.onclick = () => {
const originName = button.innerHTML;
const actionResult = this.copy(text) ? '成功' : '失败';
button.innerHTML = '复制' + actionResult;
setTimeout(() => button.innerHTML = originName, 250);
return false;
};
cp.parentNode.insertBefore(button, cp);
},
copy: function (text) {
let result = false;
const target = document.createElement('textarea');
target.style.opacity = '0';
target.textContent = text;
document.body.appendChild(target);
try {
const range = document.createRange();
range.selectNode(target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
result = true;
} catch (e) {
console.log('copy failed.');
}
document.body.removeChild(target);
return result;
}
};
document.querySelectorAll('cp').forEach(cp => util.newButton(cp));
}
</script>
<!--在代码块右上角添加复制按钮-->
<script>
document.addEventListener('DOMContentLoaded', initCodeCopyButton);
function initCodeCopyButton() {
function initCSS(callback) {
const css = `
.btn-code-copy {
position: absolute;
line-height: .6em;
top: .2em;
right: .2em;
color: rgb(87, 87, 87);
}
.btn-code-copy:hover {
color: rgb(145, 145, 145);
cursor: pointer;
}
`;
const styleId = btoa('btn-code-copy').replace(/[=+\/]/g, '');
const head = document.getElementsByTagName('head')[0];
if (!head.querySelector('#' + styleId)) {
const style = document.createElement('style');
style.id = styleId;
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
callback();
};
function copyTextContent(source) {
let result = false;
const target = document.createElement('textarea');
target.style.opacity = '0';
target.textContent = source.textContent;
document.body.appendChild(target);
try {
const range = document.createRange();
range.selectNode(target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
result = true;
} catch (e) { console.log('copy failed.'); }
document.body.removeChild(target);
return result;
};
function initButton(pre) {
const code = pre.querySelector('code');
if (code) {
const preParent = pre.parentElement;
const newPreParent = document.createElement('div');
newPreParent.style = 'position: relative';
preParent.insertBefore(newPreParent, pre);
const copyBtn = document.createElement('div');
copyBtn.innerHTML = 'copy';
copyBtn.className = 'btn-code-copy';
copyBtn.addEventListener('click', () => {
copyBtn.innerHTML = copyTextContent(code) ? 'succeed' : 'failure';
setTimeout(() => copyBtn.innerHTML = 'copy', 250);
});
newPreParent.appendChild(copyBtn);
newPreParent.appendChild(pre);
}
};
const pres = document.querySelectorAll('pre');
if (pres.length !== 0) {
initCSS(() => pres.forEach(pre => initButton(pre)));
}
};
</script>
<!-- 代码块右上角复制结束 -->
<!--DPlayer API-->
<script>
document.addEventListener('DOMContentLoaded', initDplayer);
function initDplayer() {
const common = {
loadResource: function (id, resource, type, callback) {
let loaded = document.head.querySelector('#' + id);
if (loaded) {
callback();
return;
}
const element = document.createElement(type);
element.onload = element.onreadystatechange = () => {
if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
element.onload = element.onreadystatechange = null;
loaded = true;
callback();
}
}
if (type === 'link') {
element.rel = 'stylesheet';
element.href = resource;
} else {
element.src = resource;
}
element.id = id;
document.getElementsByTagName('head')[0].appendChild(element);
},
loadResources: function (callback) {
const cdn = '//s0.pstatp.com/cdn/expire-1-M';
const resources = [
'/dplayer/1.25.0/DPlayer.min.css',
'/dplayer/1.25.0/DPlayer.min.js',
'/hls.js/0.12.4/hls.light.min.js',
'/flv.js/1.5.0/flv.min.js'
];
let unloadedResourceCount = resources.length;
resources.forEach(resource => {
this.loadResource(btoa(resource).replace(/[=+\/]/g, ''), cdn + resource,
({
'css': 'link',
'js': 'script'
})[resource.split('.').pop()],
() => --unloadedResourceCount ? null : callback()
);
});
},
createDplayers: function (sources, callback) {
for (let i = 0; i < sources.length; i++) {
const child = document.createElement('div');
const src = sources[i].getAttribute('src');
sources[i].parentNode.insertBefore(child, sources[i]);
sources[i].style.display = 'none';
const type = src.split('.').pop();
const option = { url: src };
type === 'flv' ? option.type = type : null;
const dplayer = new DPlayer({ container: child, preload: 'none', autoplay: false, screenshot: false, video: option });
}
if (typeof callback === 'function') callback();
}
};
const mirages = {
isMirages: function () { return Mirages || false },
fixVideoSize: function (length) {
let outerTimer = false;
const outerInterval = setInterval(() => {
if (outerTimer) return;
const videos = document.getElementsByTagName('video');
if (videos.length === length) {
const dplayerWraps = document.querySelectorAll('.dplayer-video-wrap');
for (let i = 0; i < length; i++) {
const videoContainers = dplayerWraps[i].querySelectorAll('.video-container.video-4-3');
if (videoContainers.length) {
videoContainers[0].style = 'position: initial;';
videoContainers[0].className = 'video-container video-16-9';
console.log('video-4-3 fixed.');
} else {
const videoContainer = document.createElement('div');
videoContainer.style = 'position: initial;';
videoContainer.className = 'video-container video-16-9';
videoContainer.appendChild(videos[i]);
dplayerWraps[i].appendChild(videoContainer);
console.log('video-16-9 inserted.');
const targetNode = videoContainer;
const config = { childList: true };
const callback = (mutationsList, observer) => {
const newVideoContainers = videoContainer.querySelectorAll(
'.video-container.video-4-3');
if (newVideoContainers.length) {
newVideoContainers[0].className = '';
console.log('auto inserted video-4-3 fixed.');
observer.disconnect();
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
setTimeout(() => observer.disconnect(), 1000 * 120);
}
}
outerTimer = true;
clearInterval(outerInterval);
}
}, 500);
}
};
const dps = document.getElementsByTagName('dp');
if (dps.length !== 0) {
common.loadResources(() => common.createDplayers(dps, () => {
// 修正 Mirages 视频比例错误
mirages.isMirages() ? mirages.fixVideoSize(dps.length) : null;
}));
}
};
</script>
<!--DPlayer API end-->
<!--引入useragent css-->
<link rel="stylesheet" href="//cdn.zrahh.com:4433/css/comment-ua.css">
<!--评论区外链在新窗口打开-->
<script>
document.addEventListener('DOMContentLoaded', initOuterLinkInComment);
function initOuterLinkInComment() {
document.querySelectorAll('.comment-list a[href*="/go/"]').forEach(a => a.target = '_blank');
}
</script>
<!--评论区外链在新窗口打开结束-->
<script>
// 自定义导航栏
document.addEventListener('DOMContentLoaded', initNavLink);
function initNavLink() {
const fixA = a => {
if ('网盘 巨硬 旧站 Travelling'.split(' ').indexOf(a.title) !== -1) {
a.target = '_blank';
} else if (a.title === '关于' && a.className === 'nav-linkcurrent') {
a.className = 'nav-link current';
}
}
document.querySelectorAll('#nav a').forEach(a => fixA(a));
document.querySelectorAll('#navbarCollapse a').forEach(a => fixA(a));
}
</script>
<script>
// 获取每日一句并显示
document.addEventListener('DOMContentLoaded', initDescription);
function initDescription() {
// 锚点开始
if (location.href !== location.origin + '/') return;
const h1 = document.querySelector('h1.blog-title');
const h2 = document.querySelector('h2.blog-description');
// 锚点结束
const local = {
set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
get: key => {
const value = JSON.parse(localStorage.getItem(key));
if (value && new Date(value.date).toDateString() !== new Date().toDateString()) return null;
return value;
}
};
const render = (data, save) => {
h1.innerHTML = data.sentence, h2.innerHTML = data.translation;
if (save) local.set('sentence', data);
};
const data = local.get('sentence');
if (data) { render(data); return; }
fetch('//www.zggsong.cn/zgg/program/api/sentence/').then(response => response.json()).then(json => render(json, true));
}
</script>
<!--apple-touch-icon-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/zggsong/cdn/apple-icon/Icon-40.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://cdn.jsdelivr.net/gh/zggsong/cdn@master/apple-icon/Icon-72.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://cdn.jsdelivr.net/gh/zggsong/cdn/apple-icon/Icon-60@2x.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://cdn.jsdelivr.net/gh/zggsong/cdn/apple-icon/Icon-72@2x.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://cdn.jsdelivr.net/gh/zggsong/cdn/apple-icon/Icon-76@2x.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.jsdelivr.net/gh/zggsong/cdn/apple-icon/Icon-60@3x.png">
<!-- 自定义 HTML 元素拓展 - 在 body 标签结束前 -->
<!--网页预加载-->
<script src="//s0.pstatp.com/cdn/expire-1-M/instant.page/1.2.2/instantpage.min.js" type="application/javascript"></script>
<!--百度统计-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5260baaa8a0643fef5b12bb56cf60ace";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- 加载复制成功 -->
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<!-- 复制提醒 -->
<script>document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！');};</script>
<!-- 自定义右键 -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius: 5px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(9,145,113,0.88);border-radius: 5px}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="https://www.zggsong.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度</span></a></li>
<li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
<li><a href="https://www.zggsong.cn/links.html"><i class="fa fa-user fa-fw"></i><span>和我当邻居</span></a></li>
<li><a href="https://www.zggsong.cn/about.html"><i class="fa fa-pencil fa-fw"></i><span>给我留言吧</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要百度的内容！") : window.open("https://www.baidu.com/s?wd=" + a)
}
function googleSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
本文作者：ZGGSONG
本文链接：https://cloud.tencent.com/developer/article/2100760
版权声明：本站所有未注明转载的文章均为原创，并采用CC BY-NV-SA 4.0授权协议，转载请注明来源
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
