记录我的个人站点美化教程,有些设定是自己用F12调试,有些是收集自网络。使用Typecho搭建,handsome主题。

不恰饭的广告:handsome是一款功能完善的Typecho主题,从它的功能设计和更新迭代可以看出作者对这款主题的用心,安利(链接)。

外观设置

透明模式

使用外观设置——外观设置开关——炫酷透明模式,背景图片设为上图,主题色调使用light-light-light,透明模式的背景颜色设为rgba(161,209,235,0.4)

主题开启透明模式时,有些地方需要补充设定CSS来让界面看着和谐统一,主要是底色和文字颜色的调整。在开发者设置——自定义CSS中加入以下代码:

/*除代码框、搜索结果、页面提示、超链接以外文字黑色,透明模式下文字原均为白色*/
:not(*[class^="hljs-"]):not(mark):not(.layui-layer-content):not(a) {
    color:#000!important;
}

/*页面提示字体白色(黑底)*/
.layui-layer-content {
    color: white;
}

/*超链接颜色设为蓝色*/
.comment-content-true a, .wrapper-lg .entry-content a {
    color: #337ab7;
}

/*标题栏底色透明度调整*/
.bg-light .lter, .bg-light.lter {
    background-color: rgba(255,255,255,0.5);
}

/*目录树底色透明度调整*/
.tocify .active, .vditor-outline__item--current, .vditor-outline__item:hover {
    background-color: rgba(255,255,255,0.9);
}

/*左边栏友链提示信息底色透明度调整,原本为黑底黑字无法分辨,调为白底*/
.tooltip-inner {
    background-color: rgba(255,255,255,0.9);
}

/*代码框底色透明度,上面为三对反引号的多行代码框,下面为单对引号的行内代码框。上面原本为纯白,下面原本几乎透明和背景难以区分*/
.hljs {
    background-color:rgba(255,255,255,0)!important;
}
.well, pre {
    background: rgba(255,255,255,.5);
}
code {
    background-color: rgba(255,255,255,0.66);
}

/*搜索提示列表、歌单、闲言碎语透明化,原先为茶色面板,和透明模式其他设置不太搭*/
.dropdown-menu, #skPlayer .skPlayer-list {
    background-color: rgba(255,255,255,0.9);
}
.panel-heading {
    background-color: rgba(255,255,255,0.6);
}
#smallRecording {
   background-color: rgba(255,255,255,0.4);
}

/*修复GitHub页面透明问题。开启透明模式后除暗色外的颜色都变为透明,需要手动修改暗色为透明*/
.bg-dark {
    background-color: transparent;
}

其他调整

开发者设置——自定义CSS中加入以下代码:

/*博客首页、文章标题栏加粗*/
.font-thin {
    font-weight: 500;
}

/*搜索提示栏宽度*/
#search_tips_drop {
    max-width:180px;
}

/*搜索框匹配结果,去除原本黄底效果,去除匹配成功的字符两边的空格*/
.mark, mark {
    padding: 0em;
    background-color: transparent;
    color: rgba(255,0,0,1)!important;
}

功能美化

手机不显示标签云和热门

开发者设置——自定义CSS中加入以下代码:

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

头像旋转

鼠标浮在头像上时,头像旋转720度,鼠标离开后,头像反方向转回720度。

开发者设置——自定义CSS中加入以下代码:

/*头像旋转*/
.img-circle {
    transition: all 0.5s;
}
.img-circle:hover {
    transform: scale(1.15) rotate(720deg);
}

面板上浮和阴影效果

开发者设置——自定义CSS中加入以下代码:

/*首页文章面板上浮特效,以及上浮后阴影效果*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 5px rgba(80,100,117,0.3);
}

/*首页文章面板四周阴影*/
.panel {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel-small {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel-small:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

页面顶部彩虹条

开发者设置——自定义输出body尾部的HTML代码中加入以下代码:

<!--顶部彩虹进度条-->
<div class="colorTopBar"></div>

开发者设置——自定义CSS中加入以下代码:

/*顶部彩色条*/
.colorTopBar{
    animation: colorTopBar 1s infinite linear;
    height:2px;
    top:0;
    left:0;
    position: fixed;
    width:100%;
    z-index:9999;
}
@keyframes colorTopBar{
        0%{
            background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
        }
        20%{
            background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
        }
        40%{
            background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
        }
        60%{
            background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
        }
        80%{
            background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
        }
        100%{
            background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        } 
}

/*手机端不显示*/
/*
@media (max-width:767px) {
    .colorTopBar {
        display: none;
    }
}
*/

鼠标按压烟花特效

第一段代码修改自个人博客ONESRC文中源码,第二段代码来源已忘。

开发者设置——自定义JavaScript中加入以下代码:

/*鼠标按压特效,这一段是控制圆球的生成以及向四周扩散*/
<!-- Click Effect -->
function clickEffect() {
    let balls = [];
    let longPressed = false;
    let longPress;
    let multiplier = 0;
    let width, height;
    let origin;
    let normal;
    let ctx;
    const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
    const pointer = document.createElement("span");
    pointer.classList.add("pointer");
    document.body.appendChild(pointer);

    if (canvas.getContext && window.addEventListener) {
        ctx = canvas.getContext("2d");
        updateSize();
        window.addEventListener('resize', updateSize, false);
        loop();
        window.addEventListener("mousedown", function(e) {
            pushBalls(randBetween(10, 20), e.clientX, e.clientY);
            document.body.classList.add("is-pressed");
            longPress = setTimeout(function() {
                document.body.classList.add("is-longpress");
                longPressed = true;
            }, 500);
        }, false);
        window.addEventListener("mouseup", function(e) {
            clearInterval(longPress);
            if (longPressed == true) {
                document.body.classList.remove("is-longpress");
                pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                longPressed = false;
            }
            document.body.classList.remove("is-pressed");
        }, false);
        window.addEventListener("mousemove", function(e) {
            let x = e.clientX;
            let y = e.clientY;
            pointer.style.top = y + "px";
            pointer.style.left = x + "px";
        }, false);
    } else {
        console.log("canvas or addEventListener is unsupported!");
    }


    function updateSize() {
        canvas.width = window.innerWidth * 2;
        canvas.height = window.innerHeight * 2;
        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';
        ctx.scale(2, 2);
        width = (canvas.width = window.innerWidth);
        height = (canvas.height = window.innerHeight);
        origin = {
            x: width / 2,
            y: height / 2
        };
        normal = {
            x: width / 2,
            y: height / 2
        };
    }
    class Ball {
        constructor(x = origin.x, y = origin.y) {
            this.x = x;
            this.y = y;
            this.angle = Math.PI * 2 * Math.random();
            if (longPressed == true) {
                this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
            } else {
                this.multiplier = randBetween(6, 12);
            }
            this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
            this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
            this.r = randBetween(8, 12) + 3 * Math.random();
            this.color = colours[Math.floor(Math.random() * colours.length)];
        }
        update() {
            this.x += this.vx - normal.x;
            this.y += this.vy - normal.y;
            normal.x = -2 / window.innerWidth * Math.sin(this.angle);
            normal.y = -2 / window.innerHeight * Math.cos(this.angle);
            this.r -= 0.3;
            this.vx *= 0.9;
            this.vy *= 0.9;
        }
    }

    function pushBalls(count = 1, x = origin.x, y = origin.y) {
        for (let i = 0; i < count; i++) {
            balls.push(new Ball(x, y));
        }
    }

    function randBetween(min, max) {
        return Math.floor(Math.random() * max) + min;
    }

    function loop() {
        ctx.fillStyle = "rgba(255, 255, 255, 0)";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < balls.length; i++) {
            let b = balls[i];
            if (b.r < 0) continue;
            ctx.fillStyle = b.color;
            ctx.beginPath();
            ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
            ctx.fill();
            b.update();
        }
        if (longPressed == true) {
            multiplier += 0.2;
        } else if (!longPressed && multiplier >= 0) {
            multiplier -= 0.4;
        }
        removeBall();
        requestAnimationFrame(loop);
    }

    function removeBall() {
        for (let i = 0; i < balls.length; i++) {
            let b = balls[i];
            if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
                balls.splice(i, 1);
            }
        }
    }
}

/*可以选择在手机上关闭特效*/
/*
function isPC() { 
  var userAgentInfo=navigator.userAgent; 
  var Agents =new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"); 
  var flag=true; 
  for(var v=0;v<Agents.length;v++) { 
     if(userAgentInfo.indexOf(Agents[v])>0) { 
       flag=false; 
       break; 
     } 
  } 
  return flag; 
}
*/

// if(isPC()) {
  //调用
  clickEffect();
// }
<!-- End Click Effect -->

开发者设置——自定义CSS中加入以下代码:

/*鼠标按压特效*/
/*这一段是生成长按鼠标时,鼠标周围的圆环,以及在按下位置黄色圆圈的收缩舒张*/
.pointer {
    --size: 30px;
    pointer-events: none;
    width: var(--size);
    height: var(--size);
    background: rgba(247, 56, 89, 0.2);
    position: fixed;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0);
    transition: transform 0.3s;
    border: 2px solid rgba(247, 56, 89, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.pointer:before {
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    display: block;
    background: none;
    border-radius: 50%;
    transition: background 0.5s, box-shadow 0.5s;
}

.is-pressed .pointer {
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.is-longpress .pointer {
    animation: wobble 0.2s infinite alternate;
}

.is-longpress .pointer:before {
    background: #faf15d;
    box-shadow: 0 0 5px rgba(250, 241, 93, 0.5);
    animation: wobble2 0.2s infinite alternate;
}

@keyframes wobble {
    to {
        transform: translate3d(-50%, -50%, 0) scale(0.5);
    }
}

@keyframes wobble2 {
    to {
        transform: scale(0.5);
    }
}

/*手机端不显示*/
/*
@media (max-width:767px) {
    .pointer,wobble,wobble2 {
        display: none;
    }
}
*/

复制时弹出提示

复制时弹出提示“复制成功,若要转载请注明出处!”。

开发者设置——自定义输出body尾部的HTML代码中加入以下代码:

<!--复制提示 && 禁用F12 && 自定义右键-->
<!--这个lay.js是用在与页面弹窗有关的功能上的-->
<script src="https://cdn.jsdelivr.net/gh/HuaHuaY/huahuaorz.com-handsome-assets/6.0.0/src/脚本/layer.js"></script>

开发者设置——自定义JavaScript中加入以下代码:

/*复制提示*/
document.body.oncopy = function() {layer.msg('复制成功,若要转载请注明出处!');};

禁用F12

按下键盘上F12后,不弹出调试界面并提示“F12已禁用”。

开发者设置——自定义输出body尾部的HTML代码中加入以下代码:

<!--复制提示 && 禁用F12 && 自定义右键-->
<!--这个lay.js是用于与页面提示有关的功能-->
<script src="https://cdn.jsdelivr.net/gh/HuaHuaY/huahuaorz.com-handsome-assets/6.0.0/src/脚本/layer.js"></script>

开发者设置——自定义JavaScript中加入以下代码:

/*禁用F12*/
document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        layer.msg("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }
}

自定义右键菜单

将网页内鼠标右键单击菜单替换成自定义样式。

有“返回”、“前进”、“刷新”、“复制”、“百度搜索”、“Google搜索”、“首页”和“友链”共8个选项。

开发者设置——自定义输出body尾部的HTML代码中加入以下代码:

<!--复制提示 && 禁用F12 && 自定义右键-->
<!--这个lay.js是用在与页面弹窗有关的功能上的-->
<script src="https://cdn.jsdelivr.net/gh/HuaHuaY/huahuaorz.com-handsome-assets/6.0.0/src/脚本/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:rgba(194, 212, 231, 0.3);font-weight:700;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:#000;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#000;background:rgba(255,255,255,0.3)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:rgba(194, 212, 231, 0.3)!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:rgba(194, 212, 231, 0.3) !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left 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 style="border-bottom:2px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh 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 style="border-bottom:2px solid gray"><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-search fa-fw"></i><span>Google搜索</span></a></li>
        <li><a href="https://www.huahuaorz.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="https://www.huahuaorz.com/links.html"><i class="fa fa-meh-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 googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.google.com/search?q=" + 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>

彩色标签云

标签云背景改为彩色。

开发者设置——自定义JavaScriptPJAX——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;
});

页面标题变化

在浏览器中切换到博客所在标签页时,网站在浏览器标题栏名称显示2秒“ヾ(Ő∀Ő3)ノ想我啦!”后换为正常标题,切换到其他标签页时,标题栏名称显示“ヽ(●-`Д´-)ノ别走啊!”。

开发者设置——自定义输出body尾部的HTML代码中加入以下代码:

<!--页面标题变化-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         document.title = 'ヽ(●-`Д´-)ノ别走啊!';
         clearTimeout(titleTime);
     }
     else {
         document.title = 'ヾ(Ő∀Ő3)ノ想我啦!';
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>

UserAgent——显示评论者的浏览器、系统、IP所在地址

暂不支持IPV6。来自松鼠的博客:安利一款Hansome主题专用的UserAgent插件

修改文件调用插件

修改handsome主题componet目录下comments.php文件。将

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b>
</span>

修改为

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

P.S. 使用vim编辑时,可以使用“:/”去定位,匹配到的文字会高亮显示,修改完成后可输入“:noh”取消高亮。

在Typecho后台启用插件

UserAgent 1.1.7z解压后上传到主题下的usr/plugins目录,并在后台启用。

修改文件获取真实IP

在Typecho根目录下config.inc.php文件末尾添加以下代码:

//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}
Last modification:August 13th, 2020 at 01:31 am
谢谢你请我吃糖果!