WordPress博客站sakura主题优化

原文：https://fairysen.com/144.html

这里复制了几个我喜欢的

修改评论文本框图片背景

Sakura主题目录的 styles.css 文件大概第3476行位置

.comment-respond textarea {
    /*就下面这张图片随你怎么换*/
    background-image: url(https://view.moezx.cc/images/2018/03/24/comment-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    resize: vertical
}

页面鼠标指针

注意这是 .cur 文件哦，Sakura主题目录的 styles.css 文件里自己 Ctrl+F 找到后替换

https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/work.cur
https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/texto.cur
https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/ayuda.cur
https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur
https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/No_Disponible.cur

分类里的文章小特色图

文件在 Sakura/images/random 里，自己替换记得要满 10 张哦

下拉的白猫

要换就自己PS吧，你改个乌龟什么的也是可以的~
主题目录的 styles.css 文件自己 Ctrl+F 找下面这个URL

https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/scroll.png

评论区头像不显示

原因是白猫提供的 Gravatar 头像镜像挂了，解决方法很简单替换镜像即可（主题设置后台直接修改）

cdn.geekzu.org/avatar //我用的这个
gravatar.loli.net/avatar
cdn.v2ex.com/avatar

BGM自动播放

Sakura主题目录的 footer.php 文件大概第157的 DIV 标签内加一句 data-autoplay="ture"

首页菜单栏颜色

Sakura主题目录的 style.css 文件大概第1108行位置

.site-top ul li a {
    padding: 10px 0;
    display: inline-block;
    color: #666/*颜色随你换*/
}

网站运行时间

直接粘贴代码（一般放到 html 的 </body> 标签之前），Date("10/11/2017 7:00:00") 改成自己要的时间

<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("10/11/2017 7:00:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "网站在各种灾难中运行了: " + A + "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script>

在哪个地方显示就贴下下面的代码（一般在footer）

<span id="runtime_span"></span>

全站黑白

适合在清明节公祭日哀悼时使用，兼容所有主流浏览器，直接添加到 <head> 或者 WP博客自定义CSS 里就可以生效了，原理就是通过 CSS 的滤镜来控制页面的显示，开了缓存的记得清除下~

html {
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter:gray; /*ie9- */
}

文字打字特效

参考文章：酷炫的打字机效果: Typed.js

使用特效需要引用 Typed.js 文件

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>

将如下代码添加到主题目录中的 js/sakura-app.js 文件底部或者 footer.php

var typed = new Typed('.element', {
    strings: ["纠正一个错误的方法有很多", "而解决一个错误的终极方法，就是不给它发生的机会。"], //输入内容, 支持html标签
    typeSpeed: 100, //打字速度
    backSpeed: 50, //回退速度
    loop: true, //是否循环
    loopCount: Infinity,
    showCursor: false //是否开启光标
});

然后用如下代码在你想要的地方引用即可

<span class="element"></span>

标题鼠标触动音乐特效

参考利用HTML5 Web Audio API给网页JS交互增加声音

修改主题目录下的 js/sakura-app.js 文件，大概第10行的位置如下

mashiro_global.ini = new function() {
    this.normalize = function() { // initial functions when page first load (首次加载页面时的初始化函数)
        lazyload();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //标题触动音乐初加载
        web_audio();
        coverVideoIni();
        checkskinSecter();
        scrollBar();
    }
    this.pjax = function() { // pjax reload functions (pjax 重载函数)
        pjaxInit();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //标题触动音乐重载
        web_audio();
        coverVideoIni();
        checkskinSecter();
    }
}

在此文件最底部添加以下代码，保存完事

/* 标题触动音乐 */
var cached_body = $("body");
function web_audio() {
    window.AudioContext = window.AudioContext || window.webkitAudioContext,
        function() {
            if (window.AudioContext) {
                var e = new AudioContext,
                    t =
                    "880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 659 698 659 698 1046 659 1046 1046 1046 987 698 698 987 987 880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 698 1046 987 1046 1174 1174 1174 1046 1046 880 987 784 880 1046 1174 1318 1174 1318 1567 1046 987 1046 1318 1318 1174 784 784 880 1046 987 1174 1046 784 784 1396 1318 1174 659 1318 1046 1318 1760 1567 1567 1318 1174 1046 1046 1174 1046 1174 1567 1318 1318 1760 1567 1318 1174 1046 1046 1174 1046 1174 987 880 880 987 880"
                    .split(" "), //天空之城
                    /*t = "329.628 329.628 349.228 391.995 391.995 349.228 329.628 293.665 261.626 261.626 293.665 329.628 329.628 293.665 293.665 329.628 329.628 349.228 391.995 391.995 349.228 329.628 293.665 261.626 261.626 293.665 329.628 293.665 261.626 261.626 293.665 293.665 329.628 261.626 293.665 329.628 349.228 329.628 261.626 293.665 329.628 349.228 329.628 293.665 261.626 293.665 195.998 329.628 329.628 349.228 391.995 391.995 349.228 329.628 293.665 261.626 261.626 293.665 329.628 293.665 261.626 261.626".split(" "),欢乐颂*/
                    i = 0,
                    o = 1,
                    a = "♪ ♩ ♫ ♬ ♭ € § ¶ ♯".split(" "),
                    n = !1
                $("site-title, #moblieGoTop, .site-branding, .searchbox, .changeSkin-gear, .menu-list>li#star-bg").mouseenter(
                    function(s) {
                        var r = t[i]
                        r || (i = 0, r = t[i]), i += o
                        var c = e.createOscillator(),
                            l = e.createGain()
                        if (c.connect(l), l.connect(e.destination), c.type = "sine", c.frequency.value = r, l.gain.setValueAtTime(0, e.currentTime),
                            l.gain.linearRampToValueAtTime(1, e.currentTime + .01), c.start(e.currentTime), l.gain.exponentialRampToValueAtTime(
                                .001, e.currentTime + 1), c.stop(e.currentTime + 1), n = !0) {
                            var d = Math.round(7 * Math.random()),
                                u = $("<b/>").text(a[d]),
                                h = s.pageX,
                                p = s.pageY - 5
                            u.css({
                                "z-index": 99999,
                                top: p - 20,
                                left: h,
                                position: "absolute",
                                color: "#FF6EB4"
                            }), cached_body.append(u), u.animate({
                                top: p - 180,
                                opacity: 0
                            }, 1500, function() {
                                u.remove()
                            }), s.stopPropagation()
                        }
                        n = !1
                    })
            }
        }()
}

Sakura主题首页的下拉小箭头

首先找到Sakura主题文件包下的 layouts 中的 imgbox.php 文件，在最底下添加如下代码

echo bgvideo(); //BGVideo 
?>
<!-- 首页下拉箭头 -->
<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>

接着修改主题文件中的 style.css 文件（记得在WP后台主题设置-CDN-开启本地调用主题js、css文件）或者直接在 主题设置-自定义CSS样式 中添加如下代码

/* 首页下拉箭头 */
.headertop-bar::after {
    content: '';
    width: 150%;
    height: 4.375rem;
    background: #fff;
    left: -25%;
    bottom: -2.875rem;
    border-radius: 100%;
    position: absolute;
    z-index: 4;
}

.headertop-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    cursor: pointer;
    z-index: 5;
}
@media (max-width: 860px) {
    .headertop-down {
        display: none
    }
}

.headertop-down i {
    font-size: 28px;
    color: #fff;
    -ms-transform: scale(1.5,1); /* IE 9 */
    -webkit-transform: scale(1.5,1); /* Safari */
    transform: scale(1.5,1); /* Standard syntax */
}

最后打开主题文件 JS 目录里的 sakura-app.js 文件，在底下添加函数

/* 首页下拉箭头 */
function headertop_down() {
    var coverOffset = $('#content').offset().top;
    $('html,body').animate({
        scrollTop: coverOffset
    },
    600);
}

首页的一句话和社交卡片

在后台自定义CSS 或直接主题包里的 style.css 文件新增如下代码，通过修改原本与标题并不搭配的暗色调可以和标题搭配，减少视觉上的对立

.header-info {
    width: 63%;
    margin: auto;
    font-size: 16px;
    color: #EE9CA7;  /*这是修改一句话的颜色  （16进制色值）*/
    background: rgba(255,250,250);  /*背景色（RGB色值）*/
    padding: 15px;  /*大小*/
    margin-top: 22px;   /*大小*/
    letter-spacing: 0;
    line-height: 30px;   /*大小*/
    border-radius: 10px;  /*大小*/
    box-sizing: initial;
    white-space: nowrap
}

.top-social img {
    height: 40px;  /*这是修改社交网络外图标的高*/
    width: 40px;  /*这是修改社交网络外图标的宽*/
    padding: 9px;  /*这是修改社交网络图标的大小*/
    background: rgba(255,250,250)  /*这是背景颜色*/
}

关于社交卡片图标的修改，图片都在主题文件的 layouts/imgbox.php 里，你们自个替换下里面的图片URL就成

菜单栏居中显示

从白猫那 F12 过来的

首先要修改 Sakura 主题目录的 header.php 文件，总共需要修改两处我在下图已标明

需要修改的地方

将修改处①替换为如下内容

<?php if (is_front_page()){ ?><!--判断是否为首页-->
<header class="site-header no-select is-homepage" role="banner">
<?php }else{ ?>
<header class="site-header no-select" role="banner">
<?php } ?>
{1}

将修改处②直接删除并在 </div> 这句之下增加如下内容

<div class="lower-cantiner">
    <div class="lower"><?php if(!akina_option('shownav')){ ?>
        <div id="show-nav" class="showNav mobile-fit">
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
        </div><?php } ?>
        <nav class="mobile-fit-control hide"><?php wp_nav_menu( array( 'depth' => 2, 'theme_location' => 'primary', 'container' => false ) ); ?></nav><!-- #site-navigation -->
    </div>
</div>
{1}

文件修改后内容参考图

然后 style.css 文件底部增加如下代码

/* 菜单栏居中 */
.site-header.is-homepage .lower-cantiner {
    display: none;
}
.site-header.is-homepage.yya .lower-cantiner {
    display: block;
}
.site-header:hover.is-homepage .lower-cantiner {
    display: block;
}
.site-top .lower-cantiner {
    position: absolute;
    left: 50%;
    min-width: 758.4px;
    pointer-events: none;
}
#show-nav.mobile-fit {
    position: fixed !important;
    right: 120px;
    opacity: 0;
    pointer-events: none;
}

之后需要修改 style.css 中的部分属性，请依照下方修改，找不到的 Ctrl+F

/*此属性需要修改*/
.site-top .lower {
    position: relative;
    display: inline-block;
    margin: 15px 0 0 10px;
    font-size: 16px;
    left: -50%;
    pointer-events: auto !important;
}
/*此属性需要修改*/
@media(max-width:1200px) {
    .site-top .lower nav{
        /*right: calc(-150px - 100%);这行注释适配IPadPro*/
        position: absolute;
        float: right;
        animation: searchbox .2s;
        min-width: 860px;
        z-index: -1;
    }
    .site-top .lower nav.navbar {
        right: calc(-50px - 100%);
    }
    .site-top .lower nav.navbar ul {
        background: #fff;
    }
}

最后在后台主题设置中打开 展开导航菜单

移动端左侧栏个人信息

Sakura主题目录的 footer.php 文件，大概59行的 <div class="m-search"> 标签之上添加如下代码

<!--举个栗子，信息自己改-->
<p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">Contact me</p>
<p style="text-align: center;word-spacing: 20px;">
    <a href="tencent://message/?uin=2471091211" class="fa fa-qq" target="_blank" style="color: #088de7"></a>
    <a href="https://github.com/Fog-Forest/" class="fa fa-github-alt" target="_blank" style="color: #333"></a>
    <a onclick="mail_me()" class="fa fa-envelope" style="color: #ffbf00"></a>
</p>

鼠标点击特效1

参考鼠标点击特效和鼠标跟随特效

将下面的代码保存为 click.js，在主题 footer.php 文件中 </body> 标签前引用即可

onload = function() {
    var click_cnt = 0;
    var $html = document.getElementsByTagName("html")[0];
    var $body = document.getElementsByTagName("body")[0];
    $html.onclick = function(e) {
        var $elem = document.createElement("b");
        $elem.style.color = "#E94F06";
        $elem.style.zIndex = 9999;
        $elem.style.position = "absolute";
        $elem.style.select = "none";
        var x = e.pageX;
        var y = e.pageY;
        $elem.style.left = (x - 10) + "px";
        $elem.style.top = (y - 20) + "px";
        clearInterval(anim);
        switch (++click_cnt) {
            case 10:
                $elem.innerText = "OωO";
                break;
            case 20:
                $elem.innerText = "(๑•́ ∀ •̀๑)";
                break;
            case 30:
                $elem.innerText = "(๑•́ ₃ •̀๑)";
                break;
            case 40:
                $elem.innerText = "(๑•̀_•́๑)";
                break;
            case 50:
                $elem.innerText = "（￣へ￣）";
                break;
            case 60:
                $elem.innerText = "(╯°口°)╯(┴—┴";
                break;
            case 70:
                $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
                break;
            case 80:
                $elem.innerText = "╮(｡>口<｡)╭";
                break;
            case 90:
                $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
                break;
            case 100:
            case 101:
            case 102:
            case 103:
            case 104:
            case 105:
                $elem.innerText = "(ꐦ°᷄д°᷅)";
                break;
            default:
                $elem.innerText = "❤";
                break;
        }
        $elem.style.fontSize = Math.random() * 10 + 8 + "px";
        var increase = 0;
        var anim;
        setTimeout(function() {
            anim = setInterval(function() {
                if (++increase == 150) {
                    clearInterval(anim);
                    $body.removeChild($elem);
                }
                $elem.style.top = y - 20 - increase + "px";
                $elem.style.opacity = (150 - increase) / 120;
            }, 8);
        }, 70);
        $body.appendChild($elem);
    };
};

<script type="text/javascript" src="/click.js"></script>

注意，此 js 挂载到了 onload 上，如果你还有其他的效果也挂载在 onload ，请自行下载该文件，合并两个函数的代码到一起。（比如浏览器标签页动态标题效果，一般也挂载到 onload 上）

移动端首页信息块显示

该区块存放里有你的信息，在手机端被 display:none 了，所以需要注释掉。

去掉之后还需要美化下样式，加入如下 CSS

/*移动端美化样式*/
@media (max-width:860px) {

    /*cusinfo .header-tou img {
    }移动端的头像样式自己改*/
    .center-text {
        /*移动端文字大小*/
        font-size: 40px;
    }

    .focusinfo .header-info {
        /*移动端首页一句话*/
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        background: none !important
    }

    .focusinfo .header-info .top-social_v2 {
        /*移动端社交图标*/
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0px;
    }

    #centerbg {
        /*移动端背景全屏*/
        height: 100vh;
    }
}

JavaScript代码屏蔽网页各种按键

粘贴到网站全局文件底部即可，按照需求可以删除你不需要的功能，用处不大就图一乐儿~

<script type='text/javascript'>
    //屏蔽右键菜单
    document.oncontextmenu = function(event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
    //屏蔽粘贴
    document.onpaste = function(event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
    //屏蔽复制

    //屏蔽剪切
    document.oncut = function(event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
    //禁止f12

    function fuckyou() {
        window.close(); //关闭当前窗口(防抽)
        window.location = "about:blank"; //将当前窗口跳转置空白页
    }

    function ck() {
        console.profile();
        console.profileEnd();
        //我们判断一下profiles里面有没有东西，如果有，肯定有人按F12了，没错！！
        if (console.clear) {
            console.clear()
        };
        if (typeof console.profiles == "object") {
            return console.profiles.length > 0;
        }
    }

    function hehe() {
        if ((window.console && (console.firebug || console.table && /firebug/i.test(console.table()))) || (typeof opera ==
                'object' && typeof opera.postError == 'function' && console.profile.length > 0)) {
            fuckyou();
        }
        if (typeof console.profiles == "object" && console.profiles.length > 0) {
            fuckyou();
        }
    }
    hehe();
    window.onresize = function() {
        if ((window.outerHeight - window.innerHeight) > 200)
            //判断当前窗口内页高度和窗口高度，如果差值大于200，那么呵呵
            fuckyou();
    }

    document.onkeydown = function(event) {
        if ((event.keyCode == 112) || //屏蔽 F1
            (event.keyCode == 113) || //屏蔽 F2
            (event.keyCode == 114) || //屏蔽 F3
            (event.keyCode == 115) || //屏蔽 F4
            // (event.keyCode == 116) || //屏蔽 F5
            (event.keyCode == 117) || //屏蔽 F6
            (event.keyCode == 118) || //屏蔽 F7
            (event.keyCode == 119) || //屏蔽 F8
            (event.keyCode == 120) || //屏蔽 F9
            (event.keyCode == 121) || //屏蔽 F10
            (event.keyCode == 122) || //屏蔽 F11
            (event.keyCode == 123)) //屏蔽 F12
        {
            return false;
        }
    }
    window.onhelp = function() {
        return false;
    }
</script>

JS聊天机器人框架BotUI

通用方法

head 部分，需要引入 CSS 样式文件

<link rel="stylesheet" href="build/botui.min.css">
<link rel="stylesheet" href="build/botui-theme-default.css">

body 部分，设置好聊天机器人的对话容器位置

<div class="botui-app-container" id="botui-app">
    <bot-ui></bot-ui>
</div>

引入 botui.js、vue.js，设置好预回复的内容

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="build/botui.js"></script>
<!-- 回复配置可参考：http://docs.botui.org/guide.html#hello-world -->

Sakura主题使用方法

WP后台-Sakura主题设置-CDN- 开启本地调用主题 js、css 文件
修改Sakura主题目录下的 js/sakura-app.js 文件，找到大概第10行的位置，这一步主要是为了解决开启 PJAX 后，首次访问页面聊天框不加载的问题，如果没有开启 PJAX 可以忽略

mashiro_global.ini = new function() {
    this.normalize = function() { // initial functions when page first load (首次加载页面时的初始化函数)
        lazyload();
        social_share();
        post_list_show_animation();
        copy_code_block();
        coverVideoIni();
        checkskinSecter();
        scrollBar();
    }
    this.pjax = function() { // pjax reload functions (pjax 重载函数)
        pjaxInit();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //BotUI
        if ($("div").hasClass("popcontainer")) {
            loadBotui()
        }
        coverVideoIni();
        checkskinSecter();
    }
}

然后在此文件 js/sakura-app.js 底部增加如下代码

/*BotUI*/
if ($("div").hasClass("popcontainer")) {
    loadBotui()
}
$("bot-ui").click(function() {
    loadBotui()
});

function loadBotui() {
    if ($('div').hasClass('popcontainer')) {
        if (mashiro_global.variables.has_bot_ui) {
            bot_ui_ini()
        } else {
            $.getScript('https://oss.amogu.cn/blog/botui/botui.js',
                //上方JS中的'BotUI回复配置'修改底部为你自己的 BotUI 回复配置，其他不变
                function() {
                    bot_ui_ini();
                    mashiro_global.variables.has_bot_ui = true
                })
        }
    }
}

最后在 WordPress 中新建一个页面，内容中填入如下代码

<div class="popcontainer" id="fogforest" style="min-height:300px; padding:2px 6px 4px 6px; background-color: rgba(242, 242, 242,0.5); border-radius: 10px; 2px solid">
    <p></p>
    <center><strong>与 蘑菇君 对话中...</strong></center>
    <bot-ui>
        <center>
            <div style=" background-image: url(https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@1.7/botui/loading.svg);background-repeat: no-repeat;background-size: 10em;background-position: center;height: 10em;"></div>
            <p>Loading</p>
        </center>
    </bot-ui>
</div>