基本配置

  • 主题色调自定义为 white-white-white，纯色背景为 #EFEFEF
  • 代码风格设置为 mac_dark
  • 博主介绍
<span class="text-muted text-xs block">
  <div id="chakhsu">
  </div>
  <script>
    var chakhsu = function(r) {
      function t() {
        return b[Math.floor(Math.random() * b.length)]
      }
      function e() {
        return String.fromCharCode(94 * Math.random() + 33)
      }
      function n(r) {
        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
          var l = document.createElement("span");
          l.textContent = e(),
          l.style.color = t(),
          n.appendChild(l)
        }
        return n
      }
      function i() {
        var t = o[c.skillI];
        c.step ? c.step--:(c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
        r.textContent = c.text,
        r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
        setTimeout(i, d)
      }
      /*以下内容自定义修改*/
      var l = "",
      o = ["时间会告诉你对错"].map(function(r) {
        return r + ""
      }),
      a = 2,
      g = 1,
      s = 5,
      d = 75,
      b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
      c = {
        text: "",
        prefixP: -s,
        skillI: 0,
        skillP: 0,
        direction: "forward",
        delay: a,
        step: g
      };
      i()
    };
    chakhsu(document.getElementById('chakhsu'));
  </script>
</span>
</span>
  • 左侧边栏导航
{"name":"相册","feather":"image","link":"https://iruochen.net/category/image/","target":"_self"},
{"name":"日记","feather":"lock","link":"#","target":"_self"},
{"name":"归档","feather":"archive","link":"https://iruochen.net/archives.html","target":"_self"},
{"name":"时光机","feather":"clock","link":"https://iruochen.net/cross.html","target":"_self"},
{
    "name": "关于",
    "feather":"coffee",

    "sub": [{
        "name": "关于我",
        "feather": "coffee",
"target":"_self",
        "link": ""
    }, {
        "name": "留言板",
        "feather": "at-sign",
"target":"_self",
        "link": "https://iruochen.net/msg.html"
    }]
}
  • 时光机社交按钮配置
{"name":"twitter","class":"fontello fontello-twitter","link":"#"},
{"name":"facebook","class":"fontello fontello-facebook","link":"#"},
{"name":"googlepluse","class":"fontello fontello-google-plus","link":"#"},
{"name":"github","status":"single","link":"#"}
  • 时光机联系方式配置
{"name":"email","img":"","value":"wangrui@ruochen.email","link":"Mailto:wangrui@ruochen.email"},
{"name":"QQ","img":"","value":"1441865605","link":"tencent://message/?uin=1441865605&Site=admin5.com&Menu=yes"},
{"name":"telegram","img":"","value":"@iruochen","link":"https://t.me/iruochen"}
  • 主题增强功能 > 显示主题右侧边栏的设置按钮
  • gravatar镜像源地址：https://gravatar.zxqme.com/avatar
  • 公共 CDN 库不要选择 BootCDN，容易挂
  • 页面元素设置显示 > 左侧边栏元素控制：三个都勾选
  • 博客 logo 制作

美化

首页文章列表悬停上浮(开发者设置 > 自定义CSS)

.blog-post .panel:not(article) {
transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

标题居中(开发者设置 > 自定义CSS)

/*标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}

文章一二三四级标题美化(开发者设置 > 自定义CSS)

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

手机适配中不显示热门及标签云(开发者设置 > 自定义CSS)

/*手机适配中不显示热门及标签云*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

文章内打赏图标跳动(开发者设置 > 自定义CSS)

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

彩色标签云(开发者设置 > 自定义 JavaScript)

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
  tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
  tag.style.backgroundColor = tagsColor;
});

pjax 回调函数也要加

document.body.oncopy = null;
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
  tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
  tag.style.backgroundColor = tagsColor;
});

鼠标右键修改(开发者设置 > 自定义输出body 尾部的HTML代码)

<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="#"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="#"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
   
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

右侧边栏(在线人数、访客总数、响应耗时、全站字数、公众号图片)

  • /handsome/component/sidebar.php
<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; }
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>

<!--博客信息-->
         <?php if (@!in_array('info', Utils::checkArray($this->options->sidebarSetting))): ?>
      <section id="blog_info" class="widget widget_categories wrapper-md clear">
       <h5 class="widget-title m-t-none text-md"><?php _me("博客信息") ?></h5>
       <ul class="list-group box-shadow-wrap-normal">
           <li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge
pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>

           <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
        <span class="badge
        pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
           <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
            <span class="badge
        pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
           <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="award"></i></span> <span
                       class="badge
           pull-right"><?php $stat->publishedPostsNum() ?></span><?php _me("文章数目") ?></li>
           <?php if (COMMENT_SYSTEM == 0): ?>
           <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="message-circle"></i></span>
               <span class="badge
           pull-right"><?php $stat->publishedCommentsNum() ?></span><?php _me("评论数目") ?></li>
           <?php endif; ?>
           <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span> <span
                       class="badge
           pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
       </ul>
      </section>
      <?php endif; ?>
          <!--个人公众号位置-->
           <section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
              <h5 class="widget-title m-t-none text-md"><?php _me("欢迎关注微信公众号") ?></h5>
              <img src="" alt="个人微信公众号" title="个人微信公众号" class="block">
      </section>
      <?php if ($this->options->adContentSidebar != ""): ?>
  • /handsome/functions.php
//在线人数
function online_users() {
    $filename='online.txt'; //数据文件
    $cookiename='Nanlon_OnLineCount'; //Cookie名称
    $onlinetime=30; //在线有效时间
    $online=file($filename);
    $nowtime=$_SERVER['REQUEST_TIME'];
    $nowonline=array();
    foreach($online as $line){
        $row=explode('|',$line);
        $sesstime=trim($row[1]);
        if(($nowtime - $sesstime)<=$onlinetime){
            $nowonline[$row[0]]=$sesstime;
        }
    }
    if(isset($_COOKIE[$cookiename])){
        $uid=$_COOKIE[$cookiename];
    }else{
        $vid=0;
        do{
            $vid++;
            $uid='U'.$vid;
        }while(array_key_exists($uid,$nowonline));
        setcookie($cookiename,$uid);
    }
    $nowonline[$uid]=$nowtime;
    $total_online=count($nowonline);
    if($fp=@fopen($filename,'w')){
        if(flock($fp,LOCK_EX)){
            rewind($fp);
            foreach($nowonline as $fuid=>$ftime){
                $fline=$fuid.'|'.$ftime."\n";
                @fputs($fp,$fline);
            }
            flock($fp,LOCK_UN);
            fclose($fp);
        }
    }
    echo "$total_online";
}
  • /handsome/libs/Content.php
/*访问总量代码开始*/
function theAllViews(){
    $db = Typecho_Db::get();
    $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
        echo number_format($row[0]['SUM(VIEWS)']);
}
/*访问总量代码结束*/
/*响应时间代码开始*/
function timer_start() {
    global $timestart;
    $mtime = explode( ' ', microtime()  );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3  ) {
    global $timestart, $timeend;
    $mtime = explode( ' ', microtime()  );
    $timeend = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision  );
    $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display  ) {
        echo $r;
    }
    return $r;
}
/*响应时间代码结束*/

底部版权美化

  • /handsome/component/footer.php 删除下列代码
Powered by <a target="blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a>

&copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;
  • 开发者设置 > 自定义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: #007ec6
}
.github-badge .bg-orange {
  background-color: #ffa500
}
.github-badge .bg-red {
  background-color: #f00
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-purple {
  background-color: #ab34e9
}
  • 开发者设置 > 底部左侧信息
<div class="github-badge">
<a href="./" title="©2022 ruochen">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2022 ruochen</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="" target="_blank" title="xICP备 xxxxxxxx号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">xICP备</span><span class="badge-value bg-green">xxxxxxxx号</span>
</a>
</div>
  • 开发者设置 > 底部右侧信息
<div class="github-badge">
    <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" >
        <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
    </a>
</div>
 |  
<div class="github-badge">
    <a href="https://www.baidu.com/" target="_blank" title="baidu" >
        <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
    </a>
</div>
 |  
<div class="github-badge">
    <a href="https://baidu.comt/" target="_blank" title="baidu">
        <span class="badge-subject">Modified</span><span class="badge-value bg-red">baidu</span>
    </a>
</div>

添加更多表情

  • emotion文件夹上传到 /handsome/assets/img
  • OwO.json 文件上传到 /handsome/usr

下载地址
链接：https://pan.baidu.com/s/19UniNgsZ7nGblCszqpLZbw
提取码：zq8k

正文结束添加版权信息

  • /handsome/post.php(83行)
<!--文章的页脚部件：打赏和其他信息的输出-->
<!--版权声明开始-->
<div class="entry-content l-h-2x">
  <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
    <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">
      END
    </span>
  </div>
  <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
    <span>
      本文作者：
      <a href="<?php $this->author->permalink(); ?>" rel="author">
        <?php $this->
          author(); ?>
      </a>
      <br>
    </span>
    <span>
      文章标题：
      <a href="<?php $this->permalink() ?>">
        <?php $this->
          title() ?>
      </a>
      <br>
    </span>
    <span>
      本文地址：
      <a href="<?php $this->permalink() ?>">
        <?php $this->
          permalink() ?>
      </a>
      <br>
    </span>
    <span>
      版权说明：若无注明，本文皆
      <a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>">
        <?php $this->
          options->title() ?>
      </a>
      原创，转载请保留文章出处。
    </span>
  </div>
</div>
<!--版权声明结束-->

更换 Gravatar 默认头像

  • /handsome/libs/Utils.php 找到getGravator函数，修改$default变量值

mm：神秘人
identicon：抽象图形（自动生成）
wavatar Wavatar：（自动生成）
monsterid：小怪物（自动生成）
retro：复古（自动生成）

附：handsome文件

component/aside.php        左边导航栏
component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头，没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增，第三方评论
css/        博客CSS，一般不要改
fonts/      博客字体，一般不要改
img/        图像，一般不要改
js/         js文件，一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件？
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色

关闭文章朗读

  • 开发者设置 > 开发者高级设置
{
"post_speech":false
}

评论UserAgent插件

  • 下载插件，将其放置到 plugins 目录下

  • /handsome/component/comments.php 102 行添加如下代码
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments    ->ip); ?>

右小角显示用户信息插件

  • 下载插件，解压后将其放置到 plugins/libs 目录下
  • 开发者设置 > 自定义输出body 尾部的HTML代码
<!-- 客户端信息 -->
<div id="fps" style="z-index:5;position:fixed;bottom:3px;right:3px;color:#2196F3;font-size:10px;-webkit-pointer-events: none;    -moz-pointer-events: none;    -ms-pointer-events: none;    -o-pointer-events: none;"></div>
<script src="/usr/themes/handsome/assets/libs/layer/layer.js"></script>
<script src="/usr/themes/handsome/assets/js/sweetalert.min.js"> </script>
<script src="/usr/themes/handsome/assets/js/fps.js"></script>

修改博客字体

  • 下载鸿蒙字体放到 /handsome/assets/fonts/ 目录
  • 开发者设置 > 自定义CSS
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap;
src:url("字体文件url") format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium}
body {font-family: HarmonyOS!important;}
.blog-post .panel:not(article) {
transition: all 0.3s;
}

常见问题

附件上传最多2M

  • vim /etc/php.ini

    post_max_size=500M
upload_max_filesize=500M
max_execution_time=60
  • systemctl restart php-fpm
END
本文作者：
 文章标题：handsome美化教程
 本文地址：https://iruochen.net/archives/9/
 版权说明：若无注明，本文皆ruochen's blog原创，转载请保留文章出处。
最后修改：2023 年 04 月 09 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏