Typecho Cuteen 主题美化
导读：美化列表 1. 给博客添加每日60s早报 前往 https://www.alapi.cn/ 注册一个账号 复制自己的Token替换下边的 你的密钥内容然后新建一篇文章，直接粘贴代码发布即可
2. 网站底部添加运行时间
在 usr/themes/cuteen/include/footer.php合适位置添加如下代码
span id = "runtime_span">
/span>
script type = "text/javascript">
function show_runtime()
{
window.setTimeout("show_runtime()",1000);
X=new
Date("1/01/2021 00:00:00");
//初始建站时间这里修改 月/日/年
Y=new Date();
T=(Y.getTime()-X.getTime());
M=24*60*60*1000;
a=T/M;
A=Math.floor(a);
b=(a-A)*24;
B=Math.floor(b);
c=(b-B)*60;
C=Math.floor((b-B)*60);
D=Math.floor((c-C)*60);
runtime_span.innerHTML="网站已运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}
show_runtime();
/script>
3. 为博客添加随机一言
css文件配置：
将以下代码放置在 usr/themes/cuteen/include/header.php 中的 head>
/head>
里
link rel="stylesheet" type="text/css" href="https://www.whbblog.cn/css/yiyan.css">
script 配置：
将以下代码放置在 usr/themes/cuteen/post.php 中的合适位置。
div class="qinian">
div class="text-center main-shadow yiyan-box radius8 them-box">
p id="hitokoto">
获取中.../p>
script src="https://v1.hitokoto.cn/?c=i&
encode=js&
select=%23hitokoto" defer>
/script>
/div>
/div>
效果如下：
4. 侧边栏添加小卡片
将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置
section id="custom_html-2" class="bg-white dark:bg-black dark:bg-opacity-20 rounded border border-gray-900/10 relative mb-4">
div class="textwidget custom-html-widget">
aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
div class="textwidget widget-text">
style type="text/css">
#container-box-1{
color:#526372;
text-transform:uppercase;
width:100%;
font-size:16px;
line-height:50px;
text-align:center;
padding: 10px;
background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);
border-radius: var(--main-radius);
}
#flip-box-1{
overflow:hidden;
height:50px;
border-radius:99px}
#flip-box-1 div{
height:50px}
#flip-box-1>
div>
div{
color:#fff;
display:inline-block;
text-align:center;
height:50px;
width:100%}
#flip-box-1 div:first-child{
animation:show 8s linear infinite}
.flip-box-1-1{
background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
.flip-box-1-2{
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
.flip-box-1-3{
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}
.flip-box-1-4{
background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}
.flip-box-1-5{
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
.flip-box-1-6{
background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
}
@keyframes show{
0%{
margin-top:-300px}
5%{
margin-top:-250px}
16.666%{
margin-top:-250px}
21.666%{
margin-top:-200px}
33.332%{
margin-top:-200px}
38.332%{
margin-top:-150px}
49.998%{
margin-top:-150px}
54.998%{
margin-top:-100px}
66.664%{
margin-top:-100px}
71.664%{
margin-top:-50px}
83.33%{
margin-top:-50px}
88.33%{
margin-top:0}
99.996%{
margin-top:0}
100%{
margin-top:300px}
}
/style>
div id="container-box-1">
div class="container-box-1-1">
坚持每天来逛逛，会让你/div>
div id="flip-box-1">
div>
div class="flip-box-1-1">
生活也美好了！/div>
/div>
div>
div class="flip-box-1-2">
心情也舒畅了！/div>
/div>
div>
div class="flip-box-1-3">
走路也有劲了！/div>
/div>
div>
div class="flip-box-1-4">
腿也不痛了！/div>
/div>
div>
div class="flip-box-1-5">
腰也不酸了！/div>
/div>
div>
div class="flip-box-1-6">
工作也轻松了！/div>
/div>
/div>
div class="container-box-1-2">
你好我也好，不要忘记哦!/div>
/div>
/div>
div class="clear">
/div>
/aside>
/div>
/section>
效果展示：
5. 侧边栏添加和风天气组件
将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置
section data-id="sidebar-weather" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
div id="he-plugin-standard">
/div>
script>
WIDGET = {
"CONFIG": {
"layout": "2",
"width": "238",
"height": "260",
"background": "1",
"dataColor": "FFFFFF",
"borderRadius": "5",
"key": "3180d3c43e524753ab8bcef69dba023a"
}
}
/script>
script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0">
/script>
/section>
效果展示：
6. 侧边栏添加小姐姐组件
将以下代码放置在 usr/themes/cuteen/include/header.php 文件中末尾位置
script src="https://www.whbblog.cn/js/jquery-latest.js">
/script>
将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置
section data-id="sidebar-meimei" class="mb-4">
style>
#player {
margin: 10px auto;
max-width: 100%;
border-radius: 10px;
display: block;
}
#xjjsp {
display: none;
}
#ckxjj,#gbxjj {
width: 100%;
height: 40px;
border: none;
background-color: #f95491;
color: #fff;
margin-top: 10px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: 0.2s;
}
#ckxjj:hover,#gbxjj:hover {
background-color: #eeb4bf;
}
.kzsp {
width: 100%;
display: flex;
justify-content: space-between;
}
.kzsp>
button {
border: none;
height: 40px;
padding: 0 30px;
font-size: 16px;
background-color: #f95491;
border-radius: 10px;
color: #fff;
transition: 0.3s;
cursor: pointer;
}
.kzsp>
button:active {
background-color: #e25a00;
}
/style>
button type="button" id="ckxjj">
点我看小姐姐视频/button>
div id="xjjsp">
video id="player" src="" controls alt="小姐姐视频">
/video>
div class="kzsp">
button id="switch">
连续: 开/button>
button id="next">
下一个/button>
/div>
button type="button" id="gbxjj">
关闭视频/button>
/div>
script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
/script>
/section>
效果展示：
7. 网站底部添加波浪
在 usr/themes/cuteen/include/footer.php合适位置添加如下代码
!--底部波浪开始-->
div class="wiiuii_layout">
svg class="editorial"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none">
defs>
path id="gentle-wave"
d="M-160 44c30 0
58-18 88-18s
58 18 88 18
58-18 88-18
58 18 88 18
v44h-352z" />
/defs>
g class="parallax">
use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
/g>
/svg>
/div>
style type='text/css'>
.parallax >
use{
animation: move-forever 12s linear infinite;
}
.parallax >
use:nth-child(1){
animation-delay: -2s;
}
.parallax >
use:nth-child(2){
animation-delay: -2s;
animation-duration: 5s;
}
.parallax >
use:nth-child(3){
animation-delay: -4s;
animation-duration: 3s;
}
@keyframes move-forever{
0%{
transform: translate(-90px, 0%);
}
100%{
transform: translate(85px, 0%);
}
}
.wiiuii_layout{
width: 100%;
height: 40px;
position: relative;
overflow: hidden;
z-index: 1;
background: var(--footer-bg);
}
.editorial{
display: block;
width: 100%;
height: 40px;
margin: 0;
}
/style>
效果展示：见本站底部
8. 侧边栏当前时间
将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置
section id="sidebar-current-time" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
div class="mx-4 py-2 my-2 flex items-center border-b border-gray-900/10">
svg class="w-5 h-5 mr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8937" width="200" height="200">
path d="M512 514m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1afa29" p-id="8938" data-spm-anchor-id="a313x.7781069.0.i0" class="">
/path>
path d="M512 512m-253.15 0a253.15 253.15 0 1 0 506.3 0 253.15 253.15 0 1 0-506.3 0Z" fill="#FFFFFF" p-id="8939">
/path>
path d="M512 512m-203.07 0a203.07 203.07 0 1 0 406.14 0 203.07 203.07 0 1 0-406.14 0Z" fill="#1296db" p-id="8940" data-spm-anchor-id="a313x.7781069.0.i3" class="selected">
/path>
path d="M622.12 497h-91.31a24.09 24.09 0 0 0-11.46-7.92V360.22a6 6 0 0 0-6-6h-2.81a6 6 0 0 0-6 6v128.93a24.06 24.06 0 1 0 26.19 38.08h91.49a6 6 0 0 0 6-6V503a6 6 0 0 0-6.1-6z" fill="#69B452" p-id="8941">
/path>
/svg>
span>
当前时间/span>
/div>
div class="my-3">
iframe src="https://www.whbblog.cn/currenttime/index.html" width="100%" height="110" frameborder="no">
/iframe>
/div>
/section>
效果展示：
9. 主题白色背景图片
在后台自定义CSS中添加如下代码
/*背景*/
body::before {
z-index: -1;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
position: fixed;
background: center/cover no-repeat;
background-image: url(背景图片链接或随机图片API链接);
}
效果展示：见本站
10. 在线人数统计
在usr/themes/cuteen/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";
}
在需要展示的地方添加如下代码，例如 usr/themes/cuteen/include/footer.php内
当前在线人数：?php echo online_users() ?>
效果展示：
 11. 网站顶部跑马灯特效
网站后台自定义头部/底部/ footer.php/ header.php中添加如下代码
!-- 顶部跑马灯特效 -->
style>
#top-grrk{
background:url(https://external-30160.picsz.qpic.cn/e94ff0137dfb6cc51925d4ccf61d2541);
height:2px;
position:fixed;
width:100%;
Z-index:10000;
}
/style>
div id="top-grrk">
/div>
!-- 顶部跑马灯特效 -->
效果展示：见本站顶部
12. 动态标题
网站后台自定义头部/底部/ footer.php/ header.php中添加如下代码
!--动态标题-->
script>
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
}
else {
document.title = "(ฅ>
ω*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}
, 2000);
}
}
);
/script>
效果展示：见本站标题
13. 网站下雪特效
网站后台自定义头部/底部/ footer.php/ header.php中添加如下代码
!--下雪特效-->
canvas id="Snow" style="position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(125,137,95,0.1);
pointer-events: none;
">
/canvas>
script>
if(true){
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
}
;
window.requestAnimationFrame = requestAnimationFrame;
}
)();
(function() {
var flakes = [],
canvas = document.getElementById("Snow"),
ctx = canvas.getContext("2d"),
flakeCount = 200,
mX = -100,
mY = -100;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function snow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0;
i flakeCount;
i++) {
var flake = flakes[i],
x = mX,
y = mY,
minDist = 150,
x2 = flake.x,
y2 = flake.y;
var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
dx = x2 - x,
dy = y2 - y;
if (dist minDist) {
var force = minDist / (dist * dist),
xcomp = (x - x2) / dist,
ycomp = (y - y2) / dist,
deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
}
else {
flake.velX *= .98;
if (flake.velY = flake.speed) {
flake.velY = flake.speed }
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
flake.y += flake.velY;
flake.x += flake.velX;
if (flake.y >
= canvas.height || flake.y = 0) {
reset(flake);
}
if (flake.x >
= canvas.width || flake.x = 0) {
reset(flake);
}
ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(snow);
}
;
function reset(flake) {
flake.x = Math.floor(Math.random() * canvas.width);
flake.y = 0;
flake.size = (Math.random() * 3) + 2;
flake.speed = (Math.random() * 1) + 0.5;
flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.3;
}
function init() {
for (var i = 0;
i flakeCount;
i++) {
var x = Math.floor(Math.random() * canvas.width),
y = Math.floor(Math.random() * canvas.height),
size = (Math.random() * 3) + 2,
speed = (Math.random() * 1) + 0.5,
opacity = (Math.random() * 0.5) + 0.3;
flakes.push({
speed: speed,
velY: speed,
velX: 0,
x: x,
y: y,
size: size,
stepSize: (Math.random()) / 30 * 1,
step: 0,
angle: 180,
opacity: opacity }
);
}
snow();
}
;
document.addEventListener("mousemove", function(e) {
mX = e.clientX,
mY = e.clientY }
);
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
);
init();
}
)();
}
/script>
14. 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;
}
}
/* logo 扫光结束 */效果展示：见本站左上角 氢云小屋字样
15. 禁止F12
在 usr/themes/cuteen/include/footer.php 合适位置添加如下代码
!--禁止f12-->
script type="text/javascript">
window.onload = function(){
document.onkeydown = function (){
var e = window.event || arguments[0];
//F12
if(e.keyCode == 123){
return false;
//Ctrl+Shift+I
}
else if((e.ctrlKey) &
&
(e.shiftKey) &
&
(e.keyCode == 73)){
return false;
//Shift+F10
}
else if((e.shiftKey) &
&
(e.keyCode == 121)){
return false;
//Ctrl+U
}
else if((e.ctrlKey) &
&
(e.keyCode == 85)){
return false;
}
}
;
document.oncontextmenu = function (){
return false;
}
}
/script>
!--禁止f12-->
16. 首页小标题添加打字机效果
在随意位置添加代码，我是在 usr/themes/cuteen/include/hero.php 添加的代码
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 = ["Walk between the black and white.", ].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>
在网站后台的首页设置-> 首页顶部小标题处添加如下代码
p id="chakhsu" class="mt-3 h5 text-white d-flex">
/p>
效果参考本站首页
17. 侧边栏标签云
后台自定义CSS添加如下代码
/*侧栏标签云*/
.flink-item{
width:63px;
height: 25px;
margin:3px;
background-color:#57b027;
border-radius:2px;
text-align: center;
}
.flink-title a{
font-size:10px;
color:#ffffff;
margin:3px;
}
.flink-title a:hover{
color:#cccccc;
}
.bg-1{
background-color:#b57dff!important}
.bg-2{
background-color:#465efb!important}
.bg-3{
background-color:#f9bb3c!important}
.bg-4{
background-color:#f55555!important}
.bg-5{
background-color:#f6969a!important}
.bg-6{
background-color:#e92b6f!important}
.bg-7{
background-color:#8c76f!important}
.bg-8{
background-color:#3fa5ff!important}
在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码
!-- 标签云 -->
section class="sidebar-comment-box card mt-4">
div class="px-3 py-2 my-2 d-flex align-items-center border-bottom">
svg t="1678186881052" class="icon icon-20 me-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13180" width="20" height="20">
path d="M511.744 514.7136m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#1296db" p-id="13181" data-spm-anchor-id="a313x.7781069.0.i20" class="selected">
/path>
path d="M405.0432 356.4544l154.9824-143.4624c24.9344-23.0912 65.3312-23.296 90.5728-0.4608l100.5056 91.0336c14.9504 13.5168 15.6672 35.584 1.6384 49.9712l-347.6992 2.9184zM293.376 356.1472l94.976-142.0288c16.7936-26.7264 52.3776-37.8368 83.2512-26.0096 23.2448 8.9088 45.0048 17.3056 44.3392 17.3056-1.4336 0-163.6352 150.016-163.6352 150.016l-58.9312 0.7168zM749.6192 402.176H280.1664c-44.9536 0-81.4592 36.4544-81.4592 81.4592v213.0944c0 44.9536 36.4544 81.4592 81.4592 81.4592h469.4528c44.9536 0 81.4592-36.4544 81.4592-81.4592V483.584c-0.0512-44.9536-36.5056-81.408-81.4592-81.408z m-430.7968 237.7216c-27.4944 0-49.7664-22.272-49.7664-49.7664s22.272-49.7664 49.7664-49.7664c27.4944 0 49.7664 22.272 49.7664 49.7664s-22.272 49.7664-49.7664 49.7664z" fill="#FFFFFF" p-id="13182">
/path>
/svg>
span>
标签云/span>
span class="ios">
/span>
/div>
div class="px-2 pb-3">
ul class="flinks">
li>
/li>
li>
/li>
li>
/li>
li>
/li>
/ul>
?php $this->
widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&
limit=28')->
to($tags);
?>
?php while($tags->
next()): ?>
script>
document.querySelectorAll('ul.flinks').forEach(function(e){
let a=e;
if(a){
let ns=a.querySelectorAll("li");
let str='div style="display:inline-block;
;
float:left">
';
let bgid=0;
const bgs=["bg-1","bg-2","bg-3","bg-4","bg-5","bg-6","bg-7","bg-8"];
for(let i=0;
ins.length;
i+=4){
str+=(`div class="flink-item ${
bgs[Math.floor(Math.random() * 8)]}
">
div class="flink-title">
a href="?php $tags->
permalink();
?>
">
?php $tags->
name();
?>
/a>
/div>
/div>
`)}
str+=`/div>
`;
let n1=document.createElement("div");
n1.innerHTML=str;
a.parentNode.insertBefore(n1,a);
a.style="display: none;
"}
else{
console.log('No such id "flinks"')}
}
);
/script>
?php endwhile;
?>
/div>
/section>
!-- 标签云 -->
效果展示：
18. PC端侧边栏仿IOS小点点
在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码
最新回复的下面添加
随便看看的下面添加
span class="ios">
/span>
后台自定义CSS添加如下代码
/*PC端侧栏仿ios小点点*/
.ios {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d !important;
width: 10px;
height: 10px;
z-index:999;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 19px 0 #fdbc40, 40px 0 #35cd4b;
float: right;
right: 58px;
top: 22px;
z-index:100;
}
效果展示：
19. 评论框图片
后台自定义CSS添加如下代码
/*评论框图片*/
textarea.form-control {
resize: vertical;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
margin-bottom: 2px;
background-image: url(https://xxi.icu/usr/themes/Cuteen/static/img/lin/pinglunbg.webp);
transition: all 0.25s ease-in-out 0s;
}
效果展示：
20. 文章顶部阅读进度条
在 usr/themes/cuteen/include/header.php 文件中合适位置添加如下代码
!-- 顶部阅读进度条 -->
progress id="content_progress" value="0">
/progress>
script>
document.addEventListener('DOMContentLoaded', function () {
var winHeight = window.innerHeight,
docHeight = document.documentElement.scrollHeight,
progressBar = document.querySelector('#content_progress');
progressBar.max = docHeight - winHeight;
progressBar.value = window.scrollY;
document.addEventListener('scroll', function () {
progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
progressBar.value = window.scrollY;
}
);
}
);
/script>
!-- 顶部阅读进度条 -->
后台自定义CSS添加如下代码
/* 阅读进度条 */
#content_progress {
/* Positioning */
position: fixed;
left: 0px;
top: 50px;
z-index: 188;
width: 100%;
height: 2px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
color: #BABABA;
}
#content_progress::-webkit-progress-bar {
background-color: transparent;
}
#content_progress::-webkit-progress-value {
background-color: #B8B8B8;
/* 修改颜色 */
}
#content_progress::-moz-progress-bar {
background-color: #BF3EFF;
}
/* 阅读进度条 */效果展示：见本站
21. 图片呼吸灯效果
后台自定义CSS添加如下代码
img{
-webkit-animation:ani 2s linear infinite;
}
@keyframes ani{
0%{
box-shadow:0 0 0px #00BCD4;
}
25%{
box-shadow:0 0 10px #00BCD4;
}
50%{
box-shadow:0 0 20px #00BCD4;
}
75%{
box-shadow:0 0 10px #00BCD4;
}
100%{
box-shadow:0 0 0px #00BCD4;
}
}
效果展示：见本站
22. 侧边栏百度优化
在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码
!-- 百度一下 -->
section class="sidebar-comment-box card mt-4">
div class="px-3 py-2 my-2 d-flex align-items-center border-bottom">
svg t="1676984611515" class="icon icon-20 me-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13091" width="200" height="200">
path d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185z m174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312z m276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z" p-id="13092" data-spm-anchor-id="a313x.7781069.0.i5" class="" fill="#1296db">
/path>
/svg>
span>
百度一下/span>
span class="ios">
/span>
/div>
div class="px-3 searchs">
mip-form method="get" url="https://www.baidu.com/s" class="mip-element mip-layout-container">
form action="https://www.baidu.com/s" method="GET" target="_blank">
input type="text" name="wd" validatetarget="q" validatetype="must" placeholder="关键词:氢云小屋" value="www.qybk.cc">
div target="q">
关键词:氢云小屋/div>
input type="submit" value="搜索">
/form>
font size=1.5>
🔎点击搜索，可帮助本站seo优化！/font>
/mip-form>
/div>
/section>
后台自定义CSS添加如下代码
/*侧栏百度一下*/
.searchs {
padding-top:8px;
padding-bottom:0px;
padding-right:10px;
padding-left:10px;
overflow: hidden;
transition: all 0.3s;
border-radius: 4px;
position: relative;
margin: 0px 0px 15px 0px;
}
.mip-layout-container, .mip-layout-fixed-height {
margin: 0px 0px 0px 0px;
display: block;
position: relative;
}
mip-form form {
position: relative;
}
.searchs input[type="text"] {
border: #45B6F7 1px solid;
border-radius: 4px;
width: calc( 100% - 2px );
}
mip-form input[type='text'], mip-form input[type='input'], mip-form input[type='datetime'], mip-form input[type='email'], mip-form input[type='number'], mip-form input[type='tel'], mip-form input[type='url'] {
padding-right: 30px;
}
.searchs input {
outline: none;
}
mip-form input, mip-form textarea, mip-form select {
border: 1px solid #f1f1f1;
padding: 6px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
resize: none;
font-size: 16px;
}
mip-form div {
display: none;
color: #ec1f5c;
font-size: 13px;
text-align: left;
padding: 0 10% 0 3%;
}
.searchs input[type="submit"] {
position: absolute;
right: 2px;
top: 2px;
background-color: #45B6F7;
color: #fff;
font-size: 13px;
margin: 2px;
height: 30px;
line-height: 30px;
padding: 0 10px;
}
mip-form input[type='submit'] {
border: 1px solid #f1f1f1;
border-radius: 5px;
color: #333;
background-color: #d8d7d7;
}
.searchs input {
outline: none;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
.tit strong {
font-weight: normal;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 13px;
}
效果展示：
23. 鼠标美化
后台自定义CSS添加如下代码
/*鼠标样式*/
body {
cursor:url('https://xxi.icu/usr/themes/Cuteen/static/img/lin/shubiao (5).cur'), auto;
}
select, input, textarea, a, button {
cursor:url('https://xxi.icu/usr/themes/Cuteen/static/img/lin/shubiao (6).cur'), auto;
}
24. 网格背景
后台自定义CSS添加如下代码
/*网格背景css*/
body {
z-index:1;
background-position: center top;
background-size: 28px 28px;
background-color: #f9f9f9;
background-image: linear-gradient(to right,rgba(37,82,110, 0.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,82,110, 0.1) 1px,transparent 1px);
}
效果展示：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Typecho Cuteen 主题美化
本文地址： https://pptw.com/jishu/804.html