typechon美化（主题通用）

前言

奶糖一开始其实是想凭借自己的力量去独立写出属于自己的主题，但是嘛...
事与愿违嘛，因为学业以及奶糖的学习能力比较差之类的，自己写主题的目标显得有些遥远（之前所说的开始学习还在继续啦，只不过内容太多，如果写出来就太长了）。所以奶糖决定对于自己所用的主题进行魔改。（本主题取自季悠然大佬的G主题）
那么话不多说，开始吧~d=====(￣▽￣*)b

正文

因为奶糖只添加了自己喜欢的（原意也没要做太多做成教程啦，请见谅！！！）
操作前必看！！！！！！,请备份好所修改的文件！！！！（很重要）
当然，如果忘记备份的话也不是没办法，重新下载原版或主题文件，在文件中找到改错的文件即可
（温馨提示，更改文化时记得规划好格式，适当的文件注释，以及引用文件时的大小写！！！）

网站运行时间

将下方代码加入文件footer.php中的合适位置（推荐在页面底部）
注：1.为原版主题的话文件位置是根目录/wwwroot/admin/footer.php
2.如果是不同主题位置为根目录 /wwwroot/usr/ themes/（主题名）/（自行寻找footer.php文件）

<span id = "runtime_span"></span>
<script type = "text/javascript">
function show_runtime()
{window.setTimeout("show_runtime()",1000);X=new 
Date("1/01/1000 00:00:00"); //在这里填入建站的时间哦~（不然网站运行1000多天了！格式 月/日/年）
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>

具体位置视情况而定，奶糖则是放在了尾部的标签上（字体颜色等会随当前板块的css变化~）

'调皮'的标题

用于修改网站所显示的标题（不同状态下）
理论上加入文章的任意在使用的.php文件就行/wwwroot/admin（有主题则在是主题内的.php文件/wwwroot/usr/ themes/（主题名）/（自行寻找.php文件））

<!--动态标题-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "这里是内容哦~（不在网页时的标题）";
clearTimeout(titleTime);
} else {
document.title = "这里是内容哦~（在网页时的标题）" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>

鼠标美化

！！！温馨提示，由于大部分浏览器或电脑默认了鼠标类型，所以d大部分设备其实改不了
找到style.css（原版在/wwwroot/admin/css，有主题的在/wwwroot/usr/ themes/（主题名）/（自行寻找style.css文件））在其中加入以下代码

body {
cursor:url('填入鼠标样式地址通常为.cur'), auto;
}
select, input, textarea, a, button {
cursor:url('填入鼠标样式地址通常为.cur'), auto;/* 遇到要点击时的 */

雾蒙蒙的背景

类似于给背景加入白色的膜...?
同样是修改style.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(这里填入背景图片的链接~);
}

一言————随机名句

演示见文章顶部~
将以下代码放置在 header.php中内，
无主题位置/wwwroot/admin/header.php
有主题位置/wwwroot/usr/themes/（主题名)/(自行寻找header.php文件)

<link rel="stylesheet" type="text/css" href="https://www.whbblog.cn/css/yiyan.css">

这里是引入了外链，也可以复制进本地，就是..奶糖不知道为什么复制进本地css会丢失qwq
然后再将下方代码加入post.php文件中
无主题/wwwroot/admin/post.php
有主题/wwwroot/usr/themes/（主题名)/(自行寻找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>

一般可以加入在最上边（见奶糖的文章显示）

侧边栏天气

使得侧边栏有天气显示
将下方代码加入sidebar.php文件
无主题/wwwroot/admin/sidebar.php
有主题/wwwroot/usr/themes/（主题名)/(自行寻找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": "#jjjjj",/*字体颜色*/
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}</script>
  <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0">
  </script>
</section>

这里宽度高度不建议更改！

阅读进度条~

在header.php文件中加入下方代码
无主题/wwwroot/admin/header.php
有主题/wwwroot/usr/themes/（主题名)/(自行寻找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>

然后找到style.css（原版在/wwwroot/admin/css，有主题的在/wwwroot/usr/ themes/（主题名）/（自行寻找style.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;
}

演示见本文章页面顶部