前言
黑猴打了过半,便停了下来。想着赶紧记录下这篇文章,不然过一段时间肯定会忘得七七八八,于是便有了这篇关于主题美化文章哈!
黑猴打的太上头了,等我游戏打完二周目了,在更新一篇关于黑神话:悟空相关的文章哈。
自定义CSS
头像呼吸光环和鼠标悬停旋转
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/*头像呼吸光环和鼠标悬停旋转 开始 */
.img-full {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: rotate(666turn);
transition-duration: 59s;
transition-timing-function: cubic-bezier(.34, 0, .84, 1);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #22ACD6;
}
50% {
box-shadow: 0 0 16px #22ACD6;
}
100% {
box-shadow: 0 0 4px #22ACD6;
}
}
/*头像呼吸光环和鼠标悬停旋转 结束 */
首页文章标题居中
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/*首页文章标题居中 开始*/
.panel:not(article) h2{
text-align: center;
}
.panel-small:not(article) h2{
text-align: center;
}
.panel-picture:not(article) h3{
text-align: center;
}
.post-item-foot-icon:not(article){
text-align: center;
}
/*首页文章标题居中 结束*/
文章一二三四级标题美化
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
/*文章一二三四级标题美化 结束*/
文章阴影及头图放大特效
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/*文章阴影及头图放大特效,修正放大后头图的版权位置 开始*/
.blog-post .panel {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img {
overflow: hidden;
}
.index-post-img-small {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb-small:hover {
transform: scale(1.1)
}
.item-thumb .img_copyright{
transition: all 0.3s;
}
.item-thumb:hover .img_copyright{
transform: translateX(-24px);
}
.entry-thumbnail {
overflow: hidden;
}
.post-content img {
border-radius: 10px;
transition: 0.5s;
}
.post-content img:hover {
transform: scale(1.1);
}
/*文章阴影及头图放大特效,修正放大后头图的版权位置 结束*/
博客盒子、卡片阴影调整
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 开始*/
.app.container {
box-shadow: 0 0 30px rgba(73, 90, 47, 0.47);
}
.navbar{
box-shadow: 0 1px 10px rgba(73, 90, 47, 0.47);
}
.breadcrumb{
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
.breadcrumb:hover {
transform: translateY(-6px);
box-shadow: 0 6px 8px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img {
transition: all 0.3s;
box-shadow: 0 3px 5px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img:hover {
transform: translateY(-8px);
box-shadow: 0 6px 10px rgba(73, 90, 47, 0.47);
}
.preview{
box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
#blog_info .list-group{
transition: all 0.3s;
}
#blog_info .list-group:hover {
transform: translateY(-4px);
box-shadow: 0 4px 6px rgba(73, 90, 47, 0.47);
}
/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 结束*/
两侧框架留白间距
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/*两侧框架留白间距 开始*/
@media (min-width:1700px) {
.app.container {
width: 95%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 95%
}
}
@media (min-width:2048px) {
.app.container {
width: 93%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 93%
}
}
@media (min-width:1200px) {
.app.container {
width: 90%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 90%
}
.app.container .app-footer-fixed {
max-width: 970px
}
.app.container.app-aside-folded .app-footer-fixed {
max-width: 1110px
}
.app.container.app-aside-dock .app-footer-fixed {
max-width: 90%
}
}
/*两侧框架留白间距 结束*/
logo扫光
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
即可
/* logo扫光 开始 */
.navbar-brand {
position: relative;
overflow: hidden;
margin: 0px 0 0 0px;
}
.navbar-brand:before {
content: "";
position: absolute;
left: -685px;
top: -460px;
width: 240px;
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 {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0px;
}
}
@-webkit-keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0px;
}
}
@-o-keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0px;
}
}
@keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0px;
}
}
/* logo扫光 结束 */
评论区背景图(手机和电脑显示不一样的背景图)
赞赏按钮跳动
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 CSS
/*赞赏按钮跳动开始*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
/*赞赏按钮跳动结束*/
自定义 JavaScript
彩色标签云
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 JavaScript
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
转载提醒
打开后台-
更改外观
-设置外观
-开发者设置
-复制代码粘贴至自定义 JavaScript
document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');};
打开后台-
更改外观
-设置外观
-开发者设置
-复制代码粘贴至自定义输出head 头部的HTML代码
<!--转载提醒--> <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
地址栏变化
打开后台-更改外观
-设置外观
-开发者设置
-复制代码粘贴至 自定义 JavaScript
<!--地址栏变化-->
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);}});
时间流逝
将以下代码加到
/usr/themes/handsome/component/sidebar.php
,在122行左右,放在<?php endif; ?>
之后<!-- 时间倒计时代码开始 --> <section id="blog_info" class="widget widget_categories wrapper-md clear"> <h5 class="widget-title m-t-none text-md"><?php _me("时间流逝") ?></h5> <div class="sidebar sidebar-count"> <div class="content"> <div class="item" id="dayProgress"> <div class="title">今日已经过去<span></span>小时</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-1"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="weekProgress"> <div class="title">这周已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-2"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="monthProgress"> <div class="title">本月已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-3"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="yearProgress"> <div class="title">今年已经过去<span></span>个月</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-4"></div> </div> <div class="progress-percentage"></div> </div> </div> </div> </div> </section> <!-- 时间倒计时代码结束 -->
打开后台-
更改外观
-设置外观
-开发者设置
-复制代码粘贴至自定义 CSS
/* 时间流逝 开始 */ .sidebar-count .content { padding: 15px } .sidebar-count .content .item { margin-bottom: 15px } .sidebar-count .content .item:last-child { margin-bottom: 0 } .sidebar-count .content .item .title { font-size: 12px; color: var(--minor); margin-bottom: 5px; display: flex; align-items: center } .sidebar-count .content .item .title span { color: var(--theme); font-weight: 500; font-size: 14px; margin: 0 5px } .sidebar-count .content .item .progress { display: flex; align-items: center } .sidebar-count .content .item .progress .progress-bar { height: 10px; border-radius: 5px; overflow: hidden; background: var(--classC); width: 0; min-width: 0; flex: 1; margin-right: 5px } @keyframes progress { 0% { background-position: 0 0 } 100% { background-position: 30px 0 } } .sidebar-count .content .item .progress .progress-bar .progress-inner { width: 0; height: 100%; border-radius: 5px; transition: width 0.35s; -webkit-animation: progress 750ms linear infinite; animation: progress 750ms linear infinite } .sidebar-count .content .item .progress .progress-bar .progress-inner-1 { background: #bde6ff; background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-2 { background: #ffd980; background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-3 { background: #ffa9a9; background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-4 { background: #67c23a; background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-percentage { color: var(--info) } /* 时间流逝 结束 */
- 打开站点根目录 - 跳转到 -
/usr/themes/handsome/assets/js
(打开主题handsome
-assets
-assets
-js
) - 新建一个文件 命名为:
timeinfo.js
复制代码到
timeinfo.js
function init_life_time() { function getAsideLifeTime() { /* 当前时间戳 */ let nowDate = +new Date(); /* 今天开始时间戳 */ let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); /* 今天已经过去的时间 */ let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; /* 今天已经过去的时间比 */ let todayPassHoursPercent = (todayPassHours / 24) * 100; $('#dayProgress .title span').html(parseInt(todayPassHours)); $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%'); $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%'); /* 当前周几 */ let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }; let weekDay = weeks[new Date().getDay()]; let weekDayPassPercent = (weekDay / 7) * 100; $('#weekProgress .title span').html(weekDay); $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%'); $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%'); let year = new Date().getFullYear(); let date = new Date().getDate(); let month = new Date().getMonth() + 1; let monthAll = new Date(year, month, 0).getDate(); let monthPassPercent = (date / monthAll) * 100; $('#monthProgress .title span').html(date); $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%'); $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%'); let yearPass = (month / 12) * 100; $('#yearProgress .title span').html(month); $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%'); $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%'); } getAsideLifeTime(); setInterval(() => { getAsideLifeTime(); }, 1000); } init_life_time()
打开后台-
更改外观
-设置外观
-开发者设置
-复制代码粘贴至自定义输出body 尾部的HTML代码
即可<!-- 时间流逝 --> <script src="https://自己的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
自定义代码
自定义作者评论头像
方法一
修改显示在时光机、评论、右上角顶部的头像方法:gravatar(全球通用头像),打开后台
——控制台
——个人设置
,点击左侧的头像
,去该网站使用你在个人设置里填写的电子邮箱地址注册账号,并上传头像,typecho的头像会自动更新。
文末END
在主题文件
post.php
内<?php if ($this->options->adContentPost != ""): ?>
前面加上下面的代码<div class="entry-content l-h-2x"> <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;"> <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span> </div>
版权提示
在主题文件
post.php
内<?php if ($this->options->adContentPost != ""): ?>
前面加上下面的代码,在文末END
之后即可<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;"> <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span> <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span> <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span> <span>版权说明:若无注明,本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span> </div>
响应时间和访客总数
将以下代码放到
控制台
-外观
-编辑当前外观
-functions.php
- 文件最底部添加下方代码。/*访问总量代码开始*/ function theAllViews(){ $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`'); echo number_format($row[0]['SUM(VIEWS)']); } /*访问总量代码结束*/ /*响应时间代码开始*/ function timer_start() { global $timestart; $mtime = explode( ' ', microtime() ); $timestart = $mtime[1] + $mtime[0]; return true; } timer_start(); function timer_stop( $display = 0, $precision = 3 ) { global $timestart, $timeend; $mtime = explode( ' ', microtime() ); $timeend = $mtime[1] + $mtime[0]; $timetotal = number_format( $timeend - $timestart, $precision ); $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s"; if ( $display ) { echo $r; } return $r; } /*响应时间代码结束*/
然后将以下代码放到
/usr/themes/handsome/component/sidebar.php
内,打开sidebar.php
搜索最后活动
,在后面添加下方代码即可。<!--访客总数代码开始--> <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span> <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li> <!--访客总数代码结束--> <!--响应耗时代码开始--> <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li> <!--响应耗时代码结束-->
如过此方法的
访客总数
显示不正常或者为0
,那可以参考一下插件篇的 PageViews
访客总数为 0 时候,需要检测 theAllViews 代码中是数据库前缀是否跟自己数据库前缀一直,不一致需要修复成自己的,
下方数据库前缀为xxx_
需要修改成自己的数据库前缀。/* 总访问量 */ function theAllViews() { /* 获取数据库连接 */ $db = Typecho_Db::get(); /* 查询所有文章的访问量总和 数据库前缀需要替换成自己的 */ $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `xxx_contents`'); /* 输出格式化后的访问量 */ echo number_format($row[0]['SUM(VIEWS)']); };
添加心知天气
- 知心天气官网知心天气注册申请免费API 密钥。
- 然后将以下代码放到
/usr/themes/handsome/component/aside.php
内,在<ul class="dropdown-menu animated fadeInRight w hidden-folded no-padder">
前面添加下方代码并更换自己的公钥秘钥。(目前再用的) - 然后将以下代码放到
/usr/themes/handsome/component/headnav.php
第117行左右,并更换自己的公钥秘钥。(PC端宽度小于1250px会出现不兼容现象) - 使用官方代码也是可以的,就是样式有点丑(使用自定义地区)。
下方代码是
会展开天气详情
的。<!-- 知心天气--> <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div> <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script> <script>tpwidget("init", { "flavor": "slim", "location": "WX4FBXXFKE4F", "geolocation": "enabled", "language": "auto", "unit": "c", "theme": "chameleon", "container": "tp-weather-widget", "bubble": "enabled", "alarmType": "badge", "color": "#C6C6C6", "uid": "公钥", "hash": "密钥" }); tpwidget("show");</script> <!-- 知心结束-->
下方代码
不会展开天气详情
。<!-- 心知天气插件 开始 --> <div id="tp-weather-widget2"></div> <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script> <script>tpwidget("init", { "flavor": "slim", "location": "WX4FBXXFKE4F", "geolocation": "enabled", "language": "auto", "unit": "c", "theme": "chameleon", "container": "tp-weather-widget2", "bubble": "disabled", "alarmType": "badge", "color": "#C6C6C6", "uid": "公钥", "hash": "密钥" }); tpwidget("show");</script> <!-- 心知天气插件 结束 -->
底部页脚美化
打开后台-
更改外观
-设置外观
-开发者设置
- 复制代码粘贴至自定义 CSS
。/*底部页脚 开始*/ #footer .footer_wrapper { padding-bottom: 4px; } .github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; background-color: #abbac3; margin-bottom: 5px } .github-badge .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px } .github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px } .github-badge .bg-blue { background-color: #007ec6 } .github-badge .bg-orange { background-color: #ffa500 } .github-badge .bg-red { background-color: #f00 } .github-badge .bg-green { background-color: #3bca6e } .github-badge .bg-purple { background-color: #ab34e9 } /*底部页脚 结束 */
打开后台-
更改外观
-设置外观
-开发者设置
- 复制代码粘贴至博客底部左侧信息
。<div class="github-badge"> <a href="https://onemuggle.com/" target="_blank" title="©2023 OneMuggle"> <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2023 OneMuggle</span> </a> </div> | <div class="github-badge"> <a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 xxx号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">xxx号</span> </a> </div>
打开后台-
更改外观
-设置外观
-开发者设置
- 复制代码粘贴至博客底部右侧信息
。<div class="github-badge"> <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span> </a> </div> | <div class="github-badge"> <a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span> </a> </div>
删除
/usr/themes/handsome/component/footer.php
文件内部分代码,删除以下代码(大概第八行左右)。Powered by <a target="blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a>
继续删除以下代码。
© <?php echo date("Y");?> Copyright
- 保存后刷新博客即可。
404页面自动返回首页
在主题文件
404.php
内<div class="list-group bg-info auto m-b-sm m-b-lg">
前面加上下面的代码,返回OneMuggle首页
替换成自己的站点名。<div class="juzhong404"> <p>页面将在 0<span id="countdown">5</span> 秒后返回OneMuggle首页</p> <p> <span class="xiaoshou404" onclick="immediateReturn()">立即返回上一页</span></p> </div>
在
</body>
前面加上下面的代码,https://onemuggle.com
替换成自己的站点地址。<script> let countdown = 5; // 倒计时初始值 let countdownElement; function updateCountdown() { countdownElement.innerText = countdown; if (countdown > 0) { countdown--; setTimeout(updateCountdown, 1000); } else { // 5秒后返回上一页 // window.history.back(); // 5秒后返回首页 window.location.href = 'https://onemuggle.com'; } } function immediateReturn() { // 点击立即返回按钮,直接返回上一页 window.history.back(); // 点击 OneMuggle首页,直接返回首页 // window.location.href = 'https://onemuggle.com'; } window.onload = function() { countdownElement = document.getElementById('countdown'); updateCountdown(); // 开始倒计时 }; </script> <style> .xiaoshou404 { cursor: pointer; color: #666666; } .juzhong404{ display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; color: #888888; } </style>
- 保存后刷新博客即可。
评论时间修改
将以下代码放到 /usr/themes/handsome/component/comments.php
内,找到 <a href="#<?php $comments->theId()?>">
这一行,把这 整行
替换掉。(目前再用的)
<a href="#<?php $comments->theId()?>"><time class="format_time text-muted text-xs block m-t-xs" pubdate="pubdate" datetime="<?php $comments->date('c'); ?>"><?php echo Utils::formatDate($comments, $comments->created, 'Y-m-d H:i:s'); ?></time></a>
6 条评论
好看耶~
学习|´・ω・)ノ
好看~~~
感谢支持~~~
66666,支持OωO