IT博客汇 | Handsome美化记录

Handsome美化记录

MatthewLXJ发表于 2022-03-21 09:04:00

Typecho美化记录

更新优化记录，参考全站友链作者kano酱-【备忘】Handsome主题修改记录

vditor静态资源加速

[collapse status="false" title="vditor静态资源加速"]

jsdelivr以及被屏蔽，handsome的vditor静态资源使用的是jsdelivr的CDN，因此更换jsdelivr。
配置文件：/usr/themes/handsome/libs/CDN.php

https://cdn.jsdelivr.net/npm/vditor@3.8.10

替换为

https://jsd.sorkai.com/web/npm/vditor@3.8.10

[/collapse]

配置Google Analytics

[collapse status="false" title="配置Google Analytics"]
在文件：

/usr/themes/handsome/component/header.php

<head>下添加谷歌统计代码：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KRWHE9WXLD"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-KRWHE9WXLD');
</script>

[/collapse]

友链页面优化

[collapse status="false" title="友链页面优化"]

源码完全参考全站友链作者kano酱-【备忘】Handsome主题修改记录。
文件路径：/usr/themes/handsome/links.php

<?php
/**
* 友情链接
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('component/header.php');
?>
<style type="text/css">

</style>

    <!-- aside -->
    <?php $this->need('component/aside.php'); ?>
    <!-- / aside -->

<!-- <div id="content" class="app-content"> -->
    <a class="off-screen-toggle hide"></a>
    <main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>">
    <div class="hbox hbox-auto-xs hbox-auto-sm">
        <div class="col center-part" id="post-panel">
        <div class="bg-light lter wrapper-md">
            <h1 class="entry-title m-n font-thin text-black l-h"><span class="title-icons"><i data-feather="link"></i></span><?php _me
                ("海内存知己，天涯若比邻")
                ?></h1>
            <?php if (trim($this->fields->intro) !== ""): ?>
            <div class="entry-meta text-muted  m-b-none small post-head-icon"><?php echo $this->fields->intro; ?></div>
            <?php endif ?>
        </div>
        <div class="wrapper-md">
            <div class="tab-container post_tab">
                <div class="tab-content">
                    <!-- list -->
                    <div id="my-info" class="tab-pane fade in active">
                        <?php echo Content::returnLinkList("ten","tab_4"); ?>
                        <div class="wrapper ng-binding" id="post-content">
                            <?php Content::postContentHtml($this,$this->user->hasLogin()); ?>
                        </div>
                        <!--评论-->
                        <div class="bg-white wrapper border-radius-6">
                            <?php $this->need('component/comments.php') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!--首页右侧栏-->
        <?php $this->need('component/sidebar.php') ?>
    </div>
    <!-- /content -->
</main>
    <!-- footer -->
    <?php $this->need('component/footer.php'); ?>
    <!-- / footer -->

[/collapse]

2022年3月25日更新分割线

本文引用自全站友链作者Lime's Blog - Handsome美化记录

主题标题居中

[collapse status="false" title="主题标题居中"]

效果

步骤

开发者设置➡自定义CSS

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

[/collapse]

多彩标签云

[collapse status="false" title="多彩标签云"]

效果

步骤

开发者设置➡自定义JavaScript、PJAX➡PJAX回调函数
两处均需要添加

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;
});

[/collapse]

博客信息多彩数字

[collapse status="false" title="博客信息多彩数字"]

效果

步骤

开发者设置➡自定义JavaScript、PJAX➡PJAX回调函数
两处均需要添加

let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

[/collapse]

左侧导航栏多彩图标

[collapse status="false" title="左侧导航栏多彩图标"]

效果

步骤

开发者设置➡自定义JavaScript、PJAX➡PJAX回调函数
两处均需要添加

let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

[/collapse]

右侧滚动条美化

[collapse status="false" title="右侧滚动条美化"]

步骤

开发者设置➡自定义CSS

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

[/collapse]

复制弹窗提醒

[collapse status="false" title="复制弹窗提醒"]

效果

步骤

开发者设置➡自定义JavaScript

/* 复制成功提示代码开始 */ 
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：MatthewLXJ'Blog<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "3000"
    })
}}
/* 复制成功提示代码结束 */

[/collapse]

右侧导航栏美化

[collapse status="false" title="右侧导航栏美化"]

效果

步骤

/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

[/collapse]

底部页脚美化

[collapse status="false" title="底部页脚美化"]

效果

步骤

usr/themes/handsome/component/footer.php删代码至如图所示

开发者设置➡自定义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
}

博客底部左侧信息

<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-orange">©2022 Lime's Blog</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn/">
     <span class="badge-subject">粤ICP备</span>
     <span class="badge-value bg-green">2021014387号</span>
</a>

博客底部右侧信息

<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-purple">Typecho</span>
</a>

[/collapse]

博客字体美化

ZFonts

Logo扫光效果

[collapse status="false" title="Logo扫光效果"]

步骤

开发者设置➡自定义CSS

/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

[/collapse]

粗体上色

[collapse status="false" title="粗体上色"]

效果

粗体上色，颜色可自定义修改

步骤

开发者设置➡自定义CSS

/* 粗体上色 */
strong{
  color: rgb(230, 145, 56);
}

[/collapse]

handsome原生入站提示

[collapse status="false" title="handsome原生入站提示"]

效果：

步骤

自定义输出body尾部的html代码

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})

</script>

[/collapse]