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]

使用鼠标选中文字时文字的颜色，默认为白色。

默认 Tag
文字的颜色
文字的颜色
文字的颜色
文字的颜色
文字的颜色

文字的颜色
文字的颜色
文字的颜色
文字的颜色
文字的颜色
文字的颜色

六、快速输入警告符：

短代码：!

说明

示例

效果

快速输入:

快速输入: [!/]

快速输入:

七、回复可见

短代码：hide

说明

示例

效果

添加需要评论才可以查看的内容

[hide]这里是评论可见的内容[/hide]

此处内容需要评论回复后方可阅读

八、折叠框

短代码：collapse

说明

示例

效果

可以点击标题展开 / 折叠的内容

[collapse title="标题"]
折叠内容
[/collapse]

标题

折叠内容

九、Github

短代码：github

说明

示例

效果

放置一个 Github 仓库控件

[github repo="typecho/typecho" /]

十、markdown扩展

说明

示例

效果

markdown扩展内容

==测试==

~~测试~~

{{测试: ceshi}}

- [ ] 未选中
- [x] 选中

`测试`

测试

测试 (ceshi)

未选中
选中

测试

十一、代码形式

代码形式一

代码形式二

#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>
!!!

教程来自于LOGI-Typecho 简单实现点击复制

主题修改代码