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

变色Logo

  • 制作Logo。先到NameCheap制作SVG格式的网站Logo，然后放到初级设置-博客logo的HTML结构中。如果这里没有喜欢的图标，可以先在这里随便选一个图标，配上想要的文字并制作出来，然后到阿里图标库选择自己喜欢的图标，复制Svg格式进行替换即可
  • 调整位置。一开始制作出来的Logo可以会因为位置不对从而无法在页面上显示，可以通过调整行scale（缩放）和translate（中心平移）等属性调整。建议制作完成后直接在本地调整，将Logo移到在左上角差不多的地方（具体参考我这里博客左上角Logo位置），然后再上传

  • Logo变色。最后在自定义CSS中加入以下语句，使Logo在不同主题颜色下自动变化。例如这里制作的Logo是灰色的，那么在选择黑色等深色主题时Logo则变成白色

    1. /* Logo变色 */
    2. .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以作参考

[collapse title=”点击打开” status=”false”]

  1. <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">
  2. <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>
  3. <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>

[/collapse]

  • SVG调整参考：

  • 禁用F12和右键，自定义尾部html加入，这里引入sweetalert.min.js这个弹框美化包

    1. <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    2. <script type="text/javascript">
    3. document.onkeydown = function () {
    4.   if (window.event && window.event.keyCode == 123) {
    5.       swal({
    6.           text: '禁止F12~',
    7.           icon: 'error',
    8.           button: false,
    9.           timer: 2000
    10.       });
    11.       event.keyCode = 0;
    12.       event.returnValue = false;
    13.       return false;
    14.   }
    15. };
    16. document.oncontextmenu=function (){
    17.   swal({
    18.       text: '禁止右键~',
    19.       icon: 'error',
    20.       button: false,
    21.       timer: 2000
    22.   });
    23.   return!1;
    24. };
    25. </script>

  • 禁止控制台调试：自定义JS中加入

    1. // 禁止调试
    2. (function noDebuger() {
    3.   function testDebuger() {
    4.       var d = new Date();
    5.       debugger;
    6.       if (new Date() - d > 10) {
    7.           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>';
    8.           return true;
    9.       }
    10.       return false;
    11.   }
    12.   function start() {
    13.       while (testDebuger()) {
    14.           testDebuger();
    15.       }
    16.   }
    17.   if (!testDebuger()) {
    18.       window.onblur = function () {
    19.           setTimeout(function () {
    20.               start();
    21.           }, 500)
    22.       }
    23.   }else {
    24.       start();
    25.   }
    26. })();

    底部徽标

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

[collapse title=”点击打开” status=”false”]

  1. <!-- 底部信息 -->
  2.     <div class="wrapper bg-light">
  3.     <!-- 左侧底部 -->
  4.         <div class="github-badge">
  5.             <a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动">
  6.             <span class="badge-subject">Powered</span>
  7.             <span class="badge-value bg-green">Typecho</span></a>
  8.         </div>
  9.     <!-- 右侧底部 -->
  10.          <span class="pull-right hidden-xs text-ellipsis">
  11.               <?php $this->options->BottomInfo(); ?>
  12.               <div class="github-badge">
  13.                   <a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="粤ICP备XXXX号">
  14.                 <span class="badge-subject">&copy;<?php echo date("Y");?></span>
  15.                 <span class="badge-value bg-blue">粤ICP备XXXX号</span></a>
  16.             </div>
  17.           </span>
  18.     </div>
  19. <!-- /底部信息 -->

[/collapse]

  • 自定义CSS中加入

[collapse title=”点击打开” status=”false”]

  1. /* 底部页脚小徽标 */
  2. .github-badge {
  3.   display: inline-block;
  4.   border-radius: 4px;
  5.   text-shadow: none;
  6.   font-size: 12px;
  7.   color: #fff;
  8.   line-height: 15px;
  9.   background-color: #abbac3;
  10.   margin-bottom: 5px
  11. }
  12. .github-badge .badge-subject {
  13.   display: inline-block;
  14.   background-color: #4d4d4d;
  15.   padding: 4px 4px 4px 6px;
  16.   border-top-left-radius: 4px;
  17.   border-bottom-left-radius: 4px
  18. }
  19. .github-badge .badge-value {
  20.   display: inline-block;
  21.   padding: 4px 6px 4px 4px;
  22.   border-top-right-radius: 4px;
  23.   border-bottom-right-radius: 4px
  24. }
  25. .github-badge .bg-blue {background-color: #3282b8}
  26. .github-badge .bg-purple {background-color: #3F51B5}
  27. .github-badge .bg-green {background-color: #3bca6e}

[/collapse]

右侧图标

  • 将喜欢的图标放到handsome/ausr/img/sj2/目录下即可

  • 这里提供一套现在自用的漫威小图标：请前往博客共享网盘下载

    代码高亮

    准备

  • 插件：Code-Prettify

[button color=”info” icon=”glyphicon glyphicon-download-alt”]Gihub下载[/button] [button color=”info” icon=”glyphicon glyphicon-download-alt”]码云下载[/button]

  • 样式文件：handsome.min.css（2019-12-08更新）

[button color=”info” icon=”glyphicon glyphicon-download-alt”]handsome.min.css-6.0[/button]

使用

  • 下载插件，解压，放到 usr/plugins/目录
  • 文件夹名改为CodePrettify
  • 登录后台激活插件，选择主题风格，是否显示行号（请勿与其它同类插件同时启用，以免互相影响）

  • 替换 usr/themes/handsome/assets/css/下的handsome.min.css文件

    Pjax

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

    1. if (typeof Prism !== 'undefined') {
    2. var pres = document.getElementsByTagName('pre');
    3.   for (var i = 0; i < pres.length; i++){
    4.       if (pres[i].getElementsByTagName('code').length > 0)
    5.           pres[i].className  = 'line-numbers';}
    6. 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，添加如下代码

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

    Gravatar国内源

  • 找到Typecho的安装目录中的config.inc.php文件，添加一行代码更换为国内v2ex源

    1. define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');

  • Handsome主题可以直接在外观设置-速度优化-Gravatar镜像源地址中填入[https://cdn.v2ex.com/gravatar/](https://cdn.v2ex.com/gravatar/)

    一键评论打卡

  • 插件大法：Ideal

  • 手动配置：

1、首先在设置外观-开发者设置-自定义JavaScript和PJAX回调函数都加入以下代码:
[collapse title=”点击打开” status=”false”]

  1. function a(a, b, c) {
  2.         if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
  3.         else if (a.selectionStart || "0" == a.selectionStart) {
  4.             var l = a.selectionStart,
  5.                 m = a.selectionEnd,
  6.                 n = m;
  7.             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);
  8.             c ? n += b.length + c.length : n += b.length - m + l;
  9.             l == m && c && (n -= c.length);
  10.             a.focus();
  11.             a.selectionStart = n;
  12.             a.selectionEnd = n
  13.         } else a.value += b + c, a.focus()
  14. }
  15. var b = (new Date).toLocaleTimeString(),
  16.         c = document.getElementById("comment") || 0;
  17. window.SIMPALED = {};
  18. window.SIMPALED.Editor = {
  19.     daka: function() {
  20.         a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
  21.     },
  22.     zan: function() {
  23.         a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
  24.     },
  25.     cai: function() {
  26.         a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
  27.     }
  28. };

[/collapse]
2、打开主题目录的component/comments.php的130行左右，找到以下代码：
[collapse title=”点击打开” status=”false”]

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

[/collapse]
3、在上面代码加上属性style="display: inline;"，且在其后面加入以下代码
[collapse title=”点击打开” status=”false”]

  1. <!-- 一键打卡 -->
  2.     <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>
  3.     <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>
  4.     <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>
  5. <!-- /一键打卡 -->

[/collapse]
4、在后台—>设置外观—>开发者设置—>自定义CSS加入以下代码:
[collapse title=”点击打开” status=”false”]

  1. .secret_comment {
  2.     top: 5px;
  3. }
  4. .OwO.OwO-open .OwO-body {
  5.     display:table
  6. }

[/collapse]

随机播放音乐

  • 找到文件handsome/libs/Get.php，在190行的break前插入以下代码。此行代码将歌单列表变成乱序，每次刷新网页就是一个新的乱序歌单，从而实现随机播放

    1. shuffle($info);  // 随机音乐

  • 在如下位置插入：

[collapse title=”点击打开” status=”false”]

  1. <?php
  2. // .......................................
  3. case 'collect':
  4.     $datas = $api->format(true)->playlist($id);
  5.     $datas = json_decode($datas,true);
  6.     foreach ( $datas as $keys => $data){
  7.         $cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url'];
  8.         $info[$keys] = array(
  9.             'name' => $data['name'],
  10.             'url' => '',
  11.             'song_id' => $data['id'],
  12.             'cover' => $cover,
  13.             'author' => $data['artist'][0]
  14.         );
  15.     }
  16.     shuffle($info);  /** 插入此行 */
  17.     break;
  18. default:
  19.     $data = "";break;
  20. }
  21. return json_encode($info,true);
  22. }

[/collapse]

自定义控制台输出

√> 参考：花式玩耍Console.log

  • 将想要的文字转换成字符画Text to ASCII](http://patorjk.com/software/taag/#p=display&f=ANSI Shadow&t=1)

    1. ███╗   ██╗ █████╗ ██████╗  █████╗ ██╗  ██╗██╗   ██╗
    2. ████╗  ██║██╔══██╗██╔══██╗██╔══██╗██║ ██╔╝██║   ██║
    3. ██╔██╗ ██║███████║██████╔╝███████║█████╔╝ ██║   ██║
    4. ██║╚██╗██║██╔══██║██╔══██╗██╔══██║██╔═██╗ ██║   ██║
    5. ██║ ╚████║██║  ██║██║  ██║██║  ██║██║  ██╗╚██████╔╝
    6. ╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝

  • 处理字符画。console.log()是不允许换行的，因此需要将所有换行的地方修改为\n

  • 测试。修改完后可以在控制台尝试将转换后的字符画用console.log("转换后的字符")打印，看看效果

[collapse title=”点击打开” status=”false”]

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

[/collapse]

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

[collapse title=”点击打开” status=”false”]

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

[/collapse]

  • 效果：按F12看看吧！

    Font-Awesome旋转图标

  • 先在自定义Head中引入字体：

    1. <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等图标，举个栗子：
    1. {"name":"Spin","class":"fa fa-spinner fa-spin","link":"#","target":"_self"},
    2. {"name":"Pulse","class":"fa fa-cog fa-pulse","link":"#","target":"_self"}