首页 技术教程

⏳ 浅蓝最后一次降雪:2020 年 12 月 17 日


引言

主题已经更新至4.x系列,该文章是针对3.x版本编写,所以部分存在不兼容4.x的部分,可自行参考并作出更改。

主要针对背景、链接、列表、过渡动画等等的相关优化。

组成部分:自己编写、借鉴群友、源于网络。

建议:美化适宜即可,过多的特效反而是累赘。不仅会带来视觉疲劳,而且影响阅读者的流畅体验。

一、背景优化

a) 背景透明化,并实现动态背景

使用方法

  1. 进入目录

    目录地址~/usr/themes/Cuteen/Static/Css/Main.css

  2. 更改背景颜色配置

    html {
        background-color: clear;  //需要更改的地方,原先是white
        font-size: 16px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        min-width: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        text-rendering: optimizeLegibility;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

标记background-color: white;改为background-color: clear;

【建议】

搭配主题优化插件AliceStyle,获得动态背景效果。

插件下载地址:https://share.qian.blue/AliceStyle

使用教程:https://racns.com/374.html

b) 将背景设置为图片

使用方法

  1. 打开后台——外观——设置外观——高级设置——自定义CSS样式
  2. 输入如下代码:

    body {background-image:url(xxxxxxxx);}

    其中xxxxxxxx部分为图片URL地址。

    在这里,推荐一些随机图片api(🔗传送门

二、文章边框荧光效果

实质上是css效果中的box阴影效果。

使用方法

  1. 进入目录

    目录地址~/usr/themes/Cuteen/Static/Css/Main.css

  2. 修改相关源码

    原代码:

    .mybox {
        /* margin-bottom: 2.333rem; */
        background-clip: border-box;
    }

    更改后:

    .mybox {
        /* margin-bottom: 2.333rem; */
        background-clip: border-box;
        border-radius: 15px;
        box-shadow: -2px 8px 17px 0 rgb(157 167 255 / 36%), 0 6px 20px 0 rgb(255 255 255 / 19%);
    }

    标记:增加了代码

    border-radius: 15px;
    box-shadow: -2px 8px 17px 0 rgb(157 167 255 / 36%), 0 6px 20px 0 rgb(255 255 255 / 19%);

三、链接变色效果

主题本身没有链接的突出(指的是与非文本链接文字之间的颜色区分)

使用方法

  1. 打开后台——外观——设置外观——高级设置——自定义CSS样式
  2. 输入以下内容

    a:link {color:xxxx;}      /* 未访问链接*/
    a:visited {color:xxxx;}  /* 已访问链接 */
    a:hover {color:xxxx;}  /* 鼠标移动到链接上 */
    a:active {color:xxxx;}  /* 鼠标点击时 */

    :其中的xxxx需要你根据自己的喜好填写相关颜色。

四、文章列表增加圆角和边框效果

原本的主题的圆角不太明显,如果想要幅度大一点的,可以考虑增加。

使用方法

  1. 打开后台——外观——设置外观——高级设置——自定义CSS样式
  2. 输入以下内容

    //PC端
    .mb2.relative.flex.overflow-hidden.bghei.cardstyle.mx-auto{
            border-radius: 30px;
    box-shadow: -2px 8px 17px 0 rgb(110 110 110 / 36%), 0 6px 20px 0 rgb(255 255 255 / 20%);
        border: 2px solid #ffffff;
        }
    //mobile端
    .relative.flex.overflow-hidden.cardstyle.mx-auto {
    border-radius: 30px;
    box-shadow: -2px 8px 17px 0 rgb(110 110 110 / 36%), 0 6px 20px 0 rgb(255 255 255 / 20%);
        border: 2px solid #ffffff;
    }

五、为你博客增加过渡效果

此处主要针对于首次进入文章列表和友链,优化其出场效果。

使用方法

  1. 借助于WowScroll插件

    这是一款typecho插件,一款基于wow.js开发的元素初次加载动画插件,主要功能就是给元素添加好看的入场动画。

    使用方法
    1.点击右上角绿色的Clone or downloadDownload ZIP, 解压文件。

    2.重命名文件夹为WowScroll

    3.将WowScroll文件夹上传至typecho的插件usr/plugins目录

    4.登录后台启用WowScroll插件即可正确食用


    直接下载

    原作者地址:https://keymoe.com/archives/55/

    GitHub:https://github.com/Sanakey/WowScroll

  2. 后台——插件管理——WowScroll——设置——动画作用元素

    填写如下代码

    // 文章类名
    .relative.flex.overflow-hidden.cardstyle.mx-auto
    .mb2.relative.flex.overflow-hidden.bghei.cardstyle.mx-auto
    //友联列表
    .Link_Box.lg-col-4.md-col-4.sm-col-12

    注意:不可以直接复制粘贴,多元素要是用半角逗号隔开,也就是英文逗号,

    也就是.relative.flex.overflow-hidden.cardstyle.mx-auto,.mb2.relative.flex.overflow-hidden.bghei.cardstyle.mx-auto,.Link_Box.lg-col-4.md-col-4.sm-col-12

    “文章类名”仅对列表模式生效

六、增加侧边栏个人信息

比如QQ、GitHub之类的图标信息

使用方法

  1. 进入目录~/usr/themes/Cuteen/Base/sidebar.php

    在“最新回复”之上,在“文章、评论、标签”之下,即23行左右。

    改动前

    image-20201024174327683

    改动后

    image-20201024174530115

    即增加了以下代码

        <div class="p1">
        <div class=" mybox sidebar-4 relative">
    
        <div class="social">
        <a href="https://www.qian.blue" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/137f10001585dc4b9bf22"></a>
    
        <a href="https://www.qian.blue" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/137e90001143f7ee95bdb"></a>
    
        <a href="https://www.qian.blue" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/1380000012cb6467b7f09"></a>
    
        <a href="https://www.qian.blue" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/ffff000227d8ccd4f785"></a>
        </div>
       </div>
    </div>

    其中href="https://www.qian.blue"是根据自己的情况填写的。

七、改变标题字体

这个依个人喜好而定

首先你得有一点css基础,如果不了解可以谷歌搜一下。

  1. 进入后台——高级设置——自定义CSS

    填入如下代码:

    .aaa,.bbb{
    font-family:xxxx,xxxx,"xxxx","xxxx";
    font-weight:400;
    }

    简单介绍一下这个语法,其中的xxxx应该怎么填写?

    body{
      font-family:第一种字体, 第二种字体, "名字中带空格的字体", "通用字";
    } 

    常用的通用字有五种,分别是 sans-serif (无衬线体)、serif (衬线体)、monospace (等宽体)、cursive (手写体) 和 fantasy ( 幻想体)。

    根据自己的喜好自由搭配。

  2. 进入后台——高级设置——自定义头部内容

    填入如下代码:

    <link href="https://fonts.googleapis.com/css2?family=xxx+xxx&family=xxxxx&display=swap" rel="stylesheet">

    字体中带空格的话就用+代替。

    display是什么作用?简单提一下吧。

    auto:字体显示策略由用户代理定义。

    block:为字体提供一个短暂的阻塞周期和无限的交换周期。

    swap:为字体提供一个非常小的阻塞周期和无限的交换周期。

    fallback:为字体提供一个非常小的阻塞周期和短暂的交换周期。

    optional:为字体提供一个非常小的阻塞周期,并且没有交换周期。

    这里提供了模板,其中的内容自己添加吧。

  3. 进入后台——顶部风格设置

    填写如下代码:

    <div class="big-title aaa">勿埋我心</div>  //大标题
    <div class="sub-title bbb h3">我要这天,再遮不住我的眼;要这地,再埋不了我的心。</div>  //小标题

    到这里就实现了改变字体,去看看你的标题效果吧。

常见问题

  1. 为什么我改了后发现主题没有变化?

    答:一般分为两种情况:一是浏览器的缓存问题,可以自己清理浏览器缓存或者打开无痕窗口进行访问。二是可能是因为CDN缓存或者是服务器的缓存服务导致的,清理缓存并刷新一下即可。

  2. 侧边看看的定位Bug?

    答:

    进入~/usr/themes/Cuteen/Static/Js/sidebar-follow-jquery.js

    image-20201024175248742

    在93行的位置,删除_self.cache.placeholder.css('height', elementHeight).insertBefore(element);

    最后在主题后台——高级设置——自定义底部内容里增加如下代码

    $(window).scroll(function(){
    if($(window).scrollTop()<=1440){
    $('.sidebar-2').css('position','');
    }
    })

最后,成品效果

image-20201024002414954image-20201024002446612
image-20201024002302082image-20201024002353219

参考资料:风来自很远の地方




文章评论

目录