MENU

我的Mirages主题修改汇总

• 2020 年 04 月 10 日 • Typecho

Mirages主题使用了一段时间了,这款主题确实好用,符合我的审美观,已经建议作者下版本加入相册和图片自动排序,到时候后就完美匹配我了,下面是我做的一些修改,基本都是搬得LOGI大神的,我只是挑一些适合我的汇总下,便于日后折腾。


置顶美化=月下谈心

<div class="wrap"><span class="wraps">置顶</span></div>
<style type="text/css">
.wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -8px;
    left: 8px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 400;
    color: #fff;
    opacity: 0.5;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -ms-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
}
.wrap:hover {
    opacity: 0.9;
}
.wraps {
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 30px;
    line-height: 27px;
    position: absolute;
    top: 30px;
    right: -50px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 3px #796E5D, 0px 21px 5px -18px rgba(0,0,0,0.6);
    background: #796E5D;
}
</style>

全站公告=LGOI

<script>
    // 自定义公告显示
    document.addEventListener('DOMContentLoaded', initNotice2);
    document.head.append(document.createRange().createContextualFragment(
        `<style> 
            .blog-notice { 
                display: none; 
            }
            @media screen and (max-device-width: 767px) {
                .el-notification.right {
                    margin: 0 auto;
                    left: 0;
                    right: 0 !important;
                }
            }
        </style>`
    ).firstElementChild);
    function initNotice2() {
        const common = {
            loadResource: function (id, resource, type) {
                return new Promise(function (resolve, reject) {
                    let loaded = document.head.querySelector('#' + id);
                    if (loaded) {
                        resolve('success: ' + resource);
                        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;
                            resolve('success: ' + resource);
                        }
                    }
                    element.onerror = function () {
                        reject(Error(resource + ' load error!'));
                    };
                    if (type === 'link') {
                        element.rel = 'stylesheet';
                        element.href = resource;
                    } else {
                        element.src = resource;
                    }
                    element.id = id;
                    document.getElementsByTagName('head')[0].appendChild(element);
                });
            },
            loadResources: function () {
                const initVue = this.initVue;
                const loadResource = this.loadResource;
                const host = '//s0.pstatp.com/cdn/expire-1-M/';
                const resources = [
                    'vue/2.6.10/vue.min.js',
                    'element-ui/2.8.2/index.js',
                    'element-ui/2.8.2/theme-chalk/index.css'
                ];
                const loadPromises = [];
                resources.forEach(resource => {
                    loadPromises.push(loadResource(btoa(resource).replace(/[=+\/]/g, ''), host + resource,
                        ({
                            'css': 'link',
                            'js': 'script'
                        })[resource.split('.').pop()]
                    ));
                });
                Promise.all(loadPromises).then(
                    function () {
                        let flag = false;
                        const waitVue = setInterval(() => {
                            if (!flag && typeof Vue === 'function') {
                                flag = true;
                                initVue();
                                clearInterval(waitVue);
                            }
                        }, 100);
                    }
                );
            },
            initVue: function () {
                var blog = new Vue({
                    el: document.createElement('div'),
                    created() {
                        this.sayHello();
                        if (this.notice) {
                            this.showNotice();
                        }
                        window.alert = this.alert;
                    },
                    computed: {
                        notice: function () {
                            const blgNotice = document.querySelector('.blog-notice p');
                            if (blgNotice) {
                                const oldNotice = localStorage.getItem('BLOG-NOTICE');
                                const newNotice = blgNotice.innerText;
                                if (!oldNotice || oldNotice !== newNotice) {
                                    return newNotice;
                                }
                            }
                            return ''
                        },
                        hello: function () {
                            var hours = (new Date()).getHours()
                            var t
                            if (hours < 5) {
                                t = '凌晨好,注意休息哦!'
                            } else if (hours >= 5 && hours < 8) {
                                t = '早上好,新的一天又是元气满满呢!'
                            } else if (hours >= 8 && hours < 12) {
                                t = '上午好!'
                            } else if (hours === 12) {
                                t = '中午好!'
                            } else if (hours > 12 && hours <= 18) {
                                t = '下午好!'
                            } else if (hours > 18 && hours <= 22) {
                                t = '晚上好!'
                            } else if (hours > 22 && hours < 24) {
                                t = '夜深了,注意休息哦!'
                            }
                            return t
                        }
                    },
                    methods: {
                        alert: function (message, title, type, duration, showClose, offset, onClose) {
                            if (duration !== 0) {
                                duration = 4500;
                            }
                            this.$notify({
                                message: message,
                                type: type || 'error',
                                title: title || '警告',
                                duration: duration,
                                showClose: showClose || false,
                                offset: offset || 0,
                                onClose: onClose
                            })
                        },
                        showNotice: function () {
                            setTimeout(() => {
                                const notice = this.notice;
                                this.alert(notice, '公告', 'info', 0, true, null, function () {
                                    localStorage.setItem('BLOG-NOTICE', notice);
                                });
                            }, 1000);
                        },
                        sayHello: function () {
                            setTimeout(() => {
                                this.alert('欢迎来到 苏打野 的博客!', this.hello, 'success');
                            }, 1000);
                        }
                    },
                })
            }
        };
        common.loadResources();
    }
</script>

代码复制=LOGI

<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('pre');
            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) ? 'success' : '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>

回调函数:initCodeCopyButton();

微语-剽来的(嫖的呆呆的)

HTML

 <div class="post-content" itemprop="articleBody">
                    <ul class="cbp_tmtimeline"> 
    <li> <time class="cbp_tmtime"> <span>xxx-xx-xx</span></time> <div class="cbp_tmlabel"> 
<p>xxxxxxxxxxxxxx</p> </div> </li> 
        </ul>
        </div>

CSS

<style type="text/css">
    /*   shuo  */
body.theme-dark .cbp_tmtimeline::before {
background: RGBA(255, 255, 255, 0.06);
}
ul.cbp_tmtimeline {
padding:0;
}   
div class.cdp_tmlabel > li .cbp_tmlabel {
margin-bottom:0;
} 
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
/*position: relative;*/
} 
/* The line */
.cbp_tmtimeline:before {
content: '';
/* position: absolute; */
top: 0;
bottom: 0;
width: 4px;
background: RGBA(0, 0, 0, 0.02);
left: 80px;
margin-left: 10px;
}

/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
/*  width: 29%;  */
/*  padding-right: 110px; */
max-width:110px;
position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
color: #9BCD9B;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: RGBA(255, 125, 73, 0.75);
}
div.cbp_tmlabel > p {
margin-bottom:0;
}
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 45px 120px;
background: #9BCD9B;
color: #fff;
padding: 1.5em;
/* font-size: 1.2em; */
font-weight: 300;
line-height: 1.4;
position: relative;
border-radius: 5px;
    transition: all 0.3s ease 0s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
cursor:pointer;
}
.cbp_tmlabel:hover {
    /* transform:scale(1.05); */
    transform: translateY(-3px);
    z-index: 1;
    -webkit-box-shadow:0 15px 32px rgba(0,0,0,0.15) !important
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: RGBA(255, 125, 73, 0.75);
}

/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #9BCD9B;
border-width: 10px;
top: 4px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: RGBA(255, 125, 73, 0.75);
}
/* Media  */
@media screen and (max-width: 65.375em) {

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 1.2em;
}
}

@media screen and (max-width: 47.2em) {
.cbp_tmtimeline:before {
    display: none;
}

.cbp_tmtimeline > li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
}

.cbp_tmtimeline > li .cbp_tmtime span {
    text-align: left;
}

.cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 30px 0;
    padding: 1em;
    font-weight: 400;
    font-size: 95%;
}

.cbp_tmtimeline > li .cbp_tmlabel:after {
    right: auto;
    left: 20px;
    border-right-color: transparent;
    border-bottom-color: #9BCD9B;
    top: -20px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: RGBA(255, 125, 73, 0.75);
}

.cbp_tmtimeline > li .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: -55px 5px 0 0px;
}   
}
/*   end  */</style>

点击复制功能

<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('pre');
                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>

回调函数:initCopyButton();

HTML

    <cp name="复制静夜思" text="
           静夜思
    床前明月光,疑是地上霜。
    举头望明月,低头思故乡。
    "></cp>

注意事项
如果显示复制成功,但是粘贴是空的,解决办法如下(同代码复制):

  • 改 35 行,把 const target = document.createElement('pre'); 改成 const
    target = document.createElement('textarea'); 也就是 pre 改成 textarea

顶部导航栏自动隐藏和展开

最后编辑于: 2020 年 09 月 26 日
添加新评论

已有 13 条评论
  1. 才发现,你居然用另外个域名向我申请了链接!!!对不对,Project Schuck是不是你,为了避免重复,我把这个链接删除了啊,保留1个链接“苏三说”,好吧?!

    1. @林三,,,你没仔细看吧,,我早在你那留言了。

  2. #(狂汗) 我就是嫖的你的,嫖完了忘记出处了,所以没备注你,,你咋找到我的,,,

    1. @苏乙己你在我下面留言了啊OωO

  3. @(滑稽) 其实我也是别人那边白嫖过来的

  4. kevin kevin

    萌新想请问“微语”该怎么添加到网站里面qwq

    1. @kevin把CSS代码,放到你的CSS文件的最后面,新建个独立页面放入HTML代码即可。基本适合任何主题。

    2. kevin kevin

      @苏乙己请问这段CSS代码是要重新建个文件吗?还是直接编辑主题里原有的CSS文件

    3. @kevin不用新建,直接放到原来主题的CSS文件最下面就行了,新建CSS文件还得写链接麻烦。

    4. kevin kevin

      @苏乙己谢谢!!

0:00