刚刚换上Handsome主题,做一下备忘吧~

变色Logo

  • 制作Logo。先到NameCheap制作SVG格式的网站Logo,然后放到初级设置-博客logo的HTML结构中。如果这里没有喜欢的图标,可以先在这里随便选一个图标,配上想要的文字并制作出来,然后到阿里图标库选择自己喜欢的图标,复制Svg格式进行替换即可
  • 调整位置。一开始制作出来的Logo可以会因为位置不对从而无法在页面上显示,可以通过调整行scale(缩放)和translate(中心平移)等属性调整。建议制作完成后直接在本地调整,将Logo移到在左上角差不多的地方(具体参考我这里博客左上角Logo位置),然后再上传
  • Logo变色。最后在自定义CSS中加入以下语句,使Logo在不同主题颜色下自动变化。例如这里制作的Logo是灰色的,那么在选择黑色等深色主题时Logo则变成白色
/* Logo变色 */
.bg-black .navbar-brand svg g,.bg-dark  .navbar-brand svg g,.bg-primary .navbar-brand svg g,.bg-info .navbar-brand svg g,.bg-success  .navbar-brand svg g,.bg-danger .navbar-brand svg g{fill:#fff}
  • 需要注意的是,直接使用网上在线工具的图片转Svg格式的Logo不支持变色,因为其中的颜色是原本图片的颜色,只不过将图片进行了Base64转码而已,因此不能修改颜色。所以如果想要变色的Logo还是需要自己制作。虽然调整起来可能有点麻烦,但是给自己博客制作一个属于自己的Logo还是值得的吧!
  • 这里附上我博客的Logo以作参考

点击打开

<svg viewBox="-30 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="jsx-2263963463 artboard-inner" style="width: 265px;height: 300px;" fill="#707070">
<g id="logo_text"><path d="M0.35 9.51L0.50 10.50L3.60 10.50L3.75 9.51L2.59 9.07L2.59 3.05L7.74 10.74L8.90 10.50L8.90 2.16L10.07 1.69L9.93 0.70L6.80 0.70L6.66 1.69L7.83 2.16L7.83 7.97L7.32 6.51L3.39 0.70L0.48 0.70L0.34 1.69L1.51 2.16L1.51 9.06ZM11.40 5.74L12.33 5.91L12.64 4.84C12.91 4.77 13.34 4.69 13.68 4.69C14.29 4.69 14.87 5.08 14.87 5.88L14.87 6.37C13.10 6.37 10.88 6.80 10.88 8.71C10.88 9.98 11.98 10.65 13.24 10.65C14.06 10.65 14.63 10.47 15.05 10.18L15.47 10.50L17.25 10.50L17.42 9.65L16.63 9.34L16.63 6.44C16.63 4.75 15.55 3.81 13.75 3.81C13.05 3.81 12.21 3.99 11.40 4.40ZM14.87 9.07C14.63 9.42 14.14 9.63 13.76 9.63C13.37 9.63 12.80 9.38 12.80 8.58C12.80 7.78 13.57 7.24 14.87 7.24ZM23.77 5.74L23.77 4.12C23.24 3.91 22.76 3.81 22.33 3.81C21.69 3.81 20.96 4.02 20.52 4.17L19.95 3.81L18.13 3.96L18.30 4.82L18.93 4.82L18.93 9.34L18.05 9.65L18.21 10.50L21.69 10.50L21.85 9.65L20.69 9.34L20.69 5.10C21.10 4.94 21.67 4.82 21.95 4.82C22.15 4.82 22.41 4.84 22.51 4.87L22.83 5.91ZM24.86 5.74L25.80 5.91L26.11 4.84C26.38 4.77 26.81 4.69 27.15 4.69C27.76 4.69 28.34 5.08 28.34 5.88L28.34 6.37C26.57 6.37 24.35 6.80 24.35 8.71C24.35 9.98 25.45 10.65 26.71 10.65C27.52 10.65 28.10 10.47 28.52 10.18L28.94 10.50L30.72 10.50L30.88 9.65L30.10 9.34L30.10 6.44C30.10 4.75 29.02 3.81 27.22 3.81C26.52 3.81 25.68 3.99 24.86 4.40ZM28.34 9.07C28.10 9.42 27.61 9.63 27.23 9.63C26.84 9.63 26.26 9.38 26.26 8.58C26.26 7.78 27.03 7.24 28.34 7.24ZM38.79 3.96L38.96 4.82C38.23 4.96 37.77 5.19 37.49 5.47L35.83 7.06L36.67 7.24L38.15 9.34L39.17 9.65L39.00 10.50L36.27 10.50L36.41 9.79L34.68 7.39L34.68 6.85L36.47 5.12L35.77 4.82L35.97 3.96ZM34.24 9.34L34.24 0.25L33.42 0.04L31.70 0.25L31.86 1.05L32.48 1.05L32.48 9.34L31.58 9.65L31.75 10.50L34.96 10.50L35.13 9.65ZM44.69 9.10C44.41 9.44 43.88 9.63 43.50 9.63C42.92 9.63 42.22 9.27 42.22 8.22L42.22 4.00L41.41 3.81L39.73 3.99L39.89 4.82L40.46 4.82L40.46 8.09C40.46 9.62 41.40 10.65 43.01 10.65C43.69 10.65 44.32 10.56 44.86 10.18L45.28 10.50L47.18 10.50L47.35 9.65L46.45 9.34L46.45 4.02L45.75 3.81L43.95 3.99L44.10 4.82L44.69 4.82Z"></path></g>
<g transform="translate(-25 -5) scale(0.02)"><path d="M911.999529 668.00025a39.999972 39.999972 0 0 0 39.999972-39.999972V440.000411c0-117.391917-45.671968-227.79184-128.607909-310.855782C740.47165 46.072688 630.159728 0.20872 512.79981 0.00072 396.687892-0.20728 286.623969 45.568688 203.144028 128.904629A446.623686 446.623686 0 0 0 107.280095 270.56053 438.847691 438.847691 0 0 0 72.00012 443.440408v364.799744c0 53.295963 17.495988 105.775926 49.247965 147.783896C155.360061 1001.128016 190.608037 1024 226.000012 1024c50.103965 0 80.623943-43.527969 105.159926-78.503945 9.279993-13.255991 26.335981-37.575974 34.871975-41.303971 8.351994 3.519998 26.295982 27.519981 35.055976 39.255973C427.91187 979.336031 461.303846 1024 515.999808 1024c55.055961 0 86.159939-46.119968 108.855923-79.791944C634.343725 930.168066 651.983712 904.000084 659.999707 904.000084c8.263994 0 26.119982 24.815983 36.791974 39.639973C721.191664 977.560033 754.63164 1024 811.9996 1024c29.223979 0 71.47195-12.511991 106.759925-72.135949 21.743985-36.743974 33.239977-79.471944 33.239976-123.567913a39.999972 39.999972 0 1 0-79.999943 0c0 29.759979-7.631995 58.399959-22.079985 82.815941-7.279995 12.279991-21.871985 32.887977-37.919973 32.887977-15.207989 0-30.439979-19.519986-50.279965-47.095967C738.343651 864.424112 709.247672 824.000141 659.999707 824.000141c-50.559964 0-78.783945 41.863971-101.471929 75.495947C544.463788 920.352073 528.511799 944.000056 515.999808 944.000056c-14.61599 0-34.695976-26.863981-50.831964-48.463966C440.103861 862.016114 411.679881 824.000141 365.999913 824.000141c-47.359967 0-75.519947 40.151972-100.351929 75.559946-9.519993 13.58399-19.359986 27.615981-28.50398 36.599975-6.551995 6.431995-10.271993 7.839994-11.143992 7.839994-3.759997 0-18.463987-6.503995-40.935971-36.239974-21.319985-28.19198-33.063977-63.543955-33.063977-99.51993V443.424408c0-97.007932 38.239973-188.599867 107.663924-257.903818C327.84794 117.440637 417.447877 80.000664 512.015811 80.000664h0.647999c143.199899 0.248 267.087812 84.68794 324.791772 206.279855A139.215902 139.215902 0 0 0 771.999628 270.00053c-77.199946 0-139.999902 62.799956-139.999902 139.999902s62.799956 139.999902 139.999902 139.999901c39.143972 0 74.567948-16.159989 99.99993-42.15997V628.000278a39.999972 39.999972 0 0 0 39.999971 39.999972zM771.999628 470.00039c-33.087977 0-59.999958-26.911981-59.999958-59.999958s26.911981-59.999958 59.999958-59.999958a59.911958 59.911958 0 0 1 46.375967 21.975984 39.999972 39.999972 0 1 0 0 76.047947A59.911958 59.911958 0 0 1 771.999628 470.00039z m-279.999803-199.99986c-77.199946 0-139.999902 62.799956-139.999902 139.999902s62.799956 139.999902 139.999902 139.999901S631.999726 487.200377 631.999726 410.000432s-62.799956-139.999902-139.999901-139.999902z m0 199.99986c-33.087977 0-59.999958-26.911981-59.999958-59.999958s26.911981-59.999958 59.999958-59.999958a59.911958 59.911958 0 0 1 46.375967 21.975984 39.999972 39.999972 0 1 0 0 76.047947A59.911958 59.911958 0 0 1 491.999825 470.00039z"></path></g> </svg>

网站状态监控

原本基于宝塔API的监控面板不再使用,自己重写了一个。旧监控模板:Weifeng's Blog

新网站状态监控页面:https://www.naraku.cn/posts/75.html

禁用右键和控制台调试

只能防君子而不能防小人,本站不再使用~
  • 禁用F12和右键,自定义尾部html加入,这里引入sweetalert.min.js这个弹框美化包
<script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
<script type="text/javascript">
document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
        swal({
            text: '禁止F12~',
            icon: 'error',
            button: false,
            timer: 2000
        });
        event.keyCode = 0;
        event.returnValue = false;
        return false;
    }
};
document.oncontextmenu=function (){
    swal({
        text: '禁止右键~',
        icon: 'error',
        button: false,
        timer: 2000
    });
    return!1;
};
</script>
  • 禁止控制台调试:自定义JS中加入
// 禁止调试
(function noDebuger() {
    function testDebuger() {
        var d = new Date();
        debugger;
        if (new Date() - d > 10) {
            document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了,<a href="/" target="_blank" style="color:#4285f4;">点击返回</a>试试吧~</div>';
            return true;
        }
        return false;
    }
    function start() {
        while (testDebuger()) {
            testDebuger();
        }
    }
    if (!testDebuger()) {
        window.onblur = function () {
            setTimeout(function () {
                start();
            }, 500)
        }
    }else {
        start();
    }
})();

底部徽标

  • 打开/handsome/component/footer.php,找到<div class="wrapper bg-light">,修改成想要的样式

点击打开

<!-- 底部信息 -->
    <div class="wrapper bg-light">
    <!-- 左侧底部 -->
        <div class="github-badge">
            <a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动">
            <span class="badge-subject">Powered</span>
            <span class="badge-value bg-green">Typecho</span></a>
        </div>
    <!-- 右侧底部 -->
         <span class="pull-right hidden-xs text-ellipsis">
              <?php $this->options->BottomInfo(); ?>
              <div class="github-badge">
                  <a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="粤ICP备XXXX号">
                <span class="badge-subject">&copy;<?php echo date("Y");?></span>
                <span class="badge-value bg-blue">粤ICP备XXXX号</span></a>
            </div>
          </span>
    </div>
<!-- /底部信息 -->

  • 自定义CSS中加入

点击打开

/* 底部页脚小徽标 */
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-blue {background-color: #3282b8}
.github-badge .bg-purple {background-color: #3F51B5}
.github-badge .bg-green {background-color: #3bca6e}

右侧图标

  • 将喜欢的图标放到handsome/ausr/img/sj2/目录下即可
  • 这里提供一套现在自用的漫威小图标:请前往博客共享网盘下载

代码高亮

准备

  • 样式文件:handsome.min.css2019-12-08 更新)

使用

  • 下载插件,解压,放到 usr/plugins/ 目录
  • 文件夹名改为 CodePrettify
  • 登录后台激活插件,选择主题风格,是否显示行号(请勿与其它同类插件同时启用,以免互相影响)
  • 替换 usr/themes/handsome/assets/css/下的handsome.min.css文件

Pjax

如果你的网站有开启Pjax,请把以下代码添加到回调函数的地方

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
    for (var i = 0; i < pres.length; i++){
        if (pres[i].getElementsByTagName('code').length > 0)
            pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

修改后台路径

  • admin文件夹改名,改成你需要的例如abc,然后找到Typecho根目录下的config.inc.php文件,将define('__TYPECHO_ADMIN_DIR__', '/admin/');中的的/admin/改成/abc/即可,以后要登录后台访问xxx.com/abc/即可
  • 若使用handsome主题,还需要在外观设置-外观设置开关,勾选不显示左侧边栏底部菜单

GZIP加速网站

找到你的Typecho的网站根目录中的index.php,添加如下代码

/* 开启gzip压缩 */
ob_start('ob_gzhandler');

Gravatar国内源

  • 找到Typecho的安装目录中的config.inc.php文件,添加一行代码更换为国内v2ex源
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
  • Handsome主题可以直接在外观设置-速度优化-Gravatar镜像源地址中填入https://cdn.v2ex.com/gravatar/

一键评论打卡

  • 插件大法:Ideal
  • 手动配置:

1、首先在设置外观-开发者设置-自定义JavaScriptPJAX回调函数都加入以下代码:

点击打开

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子!::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")
    }
};

2、打开主题目录的component/comments.php130行左右,找到以下代码:

点击打开

<div class="OwO padder-v-sm"></div>
    

3、在上面代码加上属性style="display: inline;",且在其后面加入以下代码

点击打开

<!-- 一键打卡 -->
    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<!-- /一键打卡 -->

4、在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

点击打开

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

随机播放音乐

  • 找到文件handsome/libs/Get.php,在190行的break前插入以下代码。此行代码将歌单列表变成乱序,每次刷新网页就是一个新的乱序歌单,从而实现随机播放
shuffle($info);  // 随机音乐
  • 在如下位置插入:

点击打开

<?php
// .......................................
case 'collect':
    $datas = $api->format(true)->playlist($id);
    $datas = json_decode($datas,true);
    foreach ( $datas as $keys => $data){

        $cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url'];

        $info[$keys] = array(
            'name' => $data['name'],
            'url' => '',
            'song_id' => $data['id'],
            'cover' => $cover,
            'author' => $data['artist'][0]
        );
    }

    shuffle($info);  /** 插入此行 */

    break;
default:
    $data = "";break;

}

return json_encode($info,true);
}

自定义控制台输出

███╗   ██╗ █████╗ ██████╗  █████╗ ██╗  ██╗██╗   ██╗
████╗  ██║██╔══██╗██╔══██╗██╔══██╗██║ ██╔╝██║   ██║
██╔██╗ ██║███████║██████╔╝███████║█████╔╝ ██║   ██║
██║╚██╗██║██╔══██║██╔══██╗██╔══██║██╔═██╗ ██║   ██║
██║ ╚████║██║  ██║██║  ██║██║  ██║██║  ██╗╚██████╔╝
╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ 
  • 处理字符画。console.log()是不允许换行的,因此需要将所有换行的地方修改为\n
  • 测试。修改完后可以在控制台尝试将转换后的字符画用console.log("转换后的字符")打印,看看效果

点击打开

console.log("███╗   ██╗ █████╗ ██████╗  █████╗ ██╗  ██╗██╗   ██╗\n████╗  ██║██╔══██╗██╔══██╗██╔══██╗██║ ██╔╝██║   ██║\n██╔██╗ ██║███████║██████╔╝███████║█████╔╝ ██║   ██║\n██║╚██╗██║██╔══██║██╔══██╗██╔══██║██╔═██╗ ██║   ██║\n██║ ╚████║██║  ██║██║  ██║██║  ██║██║  ██╗╚██████╔╝\n╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ");

  • 这里使用的是Handsome主题,将以下代码插入到设置外观 - 开发者设置 - 自定义输出body尾部HTML代码即可

点击打开

<script type="text/javascript">
    console.clear();  // 清屏
    console.log("███╗   ██╗ █████╗ ██████╗  █████╗ ██╗  ██╗██╗   ██╗\n████╗  ██║██╔══██╗██╔══██╗██╔══██╗██║ ██╔╝██║   ██║\n██╔██╗ ██║███████║██████╔╝███████║█████╔╝ ██║   ██║\n██║╚██╗██║██╔══██║██╔══██╗██╔══██║██╔═██╗ ██║   ██║\n██║ ╚████║██║  ██║██║  ██║██║  ██║██║  ██╗╚██████╔╝\n╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ");
</script>

  • 效果:按F12看看吧!

Font-Awesome旋转图标

  • 先在自定义Head中引入字体:
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  • fa-spin 可以使任何图标执行旋转动画, fa-pulse可以使图标以 8 步为周期进行旋转
  • 可以完美执行旋转动画的图标有:加载fa-spinner,刷新fa-refresh 、 齿轮fa-cog等图标,举个栗子:
{"name":"Spin","class":"fa fa-spinner fa-spin","link":"#","target":"_self"},
{"name":"Pulse","class":"fa fa-cog fa-pulse","link":"#","target":"_self"}
最后修改:2020 年 04 月 21 日 07 : 40 PM
如果觉得我的文章对你有帮助,请我吃颗糖吧~