Typecho-Cuteen主题的小小美化

文章	评论	标签
143	296	6

引言

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

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

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

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

一、背景优化

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

使用方法

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

更改背景颜色配置

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) 将背景设置为图片

使用方法

打开后台——外观——设置外观——高级设置——自定义CSS样式
输入如下代码：
```
body {background-image:url(xxxxxxxx);}
```
其中xxxxxxxx部分为图片URL地址。
在这里，推荐一些随机图片api（🔗传送门）

二、文章边框荧光效果

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

使用方法

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

修改相关源码

原代码：

.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%);

三、链接变色效果

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

使用方法

打开后台——外观——设置外观——高级设置——自定义CSS样式

输入以下内容

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

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

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

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

使用方法

打开后台——外观——设置外观——高级设置——自定义CSS样式

输入以下内容

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

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

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

使用方法

借助于WowScroll插件
这是一款typecho插件，一款基于wow.js开发的元素初次加载动画插件，主要功能就是给元素添加好看的入场动画。
使用方法

1.点击右上角绿色的Clone or download，Download ZIP, 解压文件。

2.重命名文件夹为WowScroll

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

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

直接下载
原作者地址：https://keymoe.com/archives/55/
GitHub：https://github.com/Sanakey/WowScroll
后台——插件管理——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之类的图标信息

使用方法

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

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

改动前

改动后

即增加了以下代码

    <div class="p1">
    <div class=" mybox sidebar-4 relative">

    <div class="social">
    <a href="https://www.skyqian.com" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/137f10001585dc4b9bf22"></a>

    <a href="https://www.skyqian.com" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/137e90001143f7ee95bdb"></a>

    <a href="https://www.skyqian.com" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/1380000012cb6467b7f09"></a>

    <a href="https://www.skyqian.com" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/ffff000227d8ccd4f785"></a>
    </div>
   </div>
</div>

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

七、改变标题字体

这个依个人喜好而定

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

进入后台——高级设置——自定义CSS
填入如下代码：
```
.aaa,.bbb{
font-family:xxxx,xxxx,"xxxx","xxxx";
font-weight:400;
}
```
简单介绍一下这个语法，其中的xxxx应该怎么填写？
```
body{
  font-family:第一种字体, 第二种字体, "名字中带空格的字体", "通用字";
} 
```
常用的通用字有五种，分别是 sans-serif （无衬线体）、serif （衬线体）、monospace （等宽体）、cursive （手写体）和 fantasy （幻想体）。
根据自己的喜好自由搭配。
进入后台——高级设置——自定义头部内容
填入如下代码：
```
<link href="https://fonts.googleapis.com/css2?family=xxx+xxx&family=xxxxx&display=swap" rel="stylesheet">
```
字体中带空格的话就用+代替。
display是什么作用？简单提一下吧。
auto：字体显示策略由用户代理定义。
block：为字体提供一个短暂的阻塞周期和无限的交换周期。
swap：为字体提供一个非常小的阻塞周期和无限的交换周期。
fallback：为字体提供一个非常小的阻塞周期和短暂的交换周期。
optional：为字体提供一个非常小的阻塞周期，并且没有交换周期。
这里提供了模板，其中的内容自己添加吧。

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

填写如下代码：

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

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

常见问题

为什么我改了后发现主题没有变化？
答：一般分为两种情况：一是浏览器的缓存问题，可以自己清理浏览器缓存或者打开无痕窗口进行访问。二是可能是因为CDN缓存或者是服务器的缓存服务导致的，清理缓存并刷新一下即可。
侧边看看的定位Bug？
答：
进入~/usr/themes/Cuteen/Static/Js/sidebar-follow-jquery.js
在93行的位置，删除_self.cache.placeholder.css('height', elementHeight).insertBefore(element);
最后在主题后台——高级设置——自定义底部内容里增加如下代码
```
$(window).scroll(function(){
if($(window).scrollTop()<=1440){
$('.sidebar-2').css('position','');
}
})
```