基本上参考和复制了官方教程和史上最全的handsome美化,没有之一!(持续更新)。
Typecho 插件添加
修改php文件
- handsome主题的文件夹中的
functions.php
的最底下添加:
/*加载时间 @return bool*/
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;
}
/*总访问量*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
-
handsome主题的文件夹中的
/component/sidebar.php
中找到博客信息的代码并添加(约为第99行):<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="eye"></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="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
修改其他文件
内含 阿鲁+滑稽+小电视+新表情 的集成包
修改表情大小:
.emotion-bs {
width: 30px;
}
.emotion-BZ {
width: 50px;
}
博客底部左侧信息
<a href="http://www.beian.miit.gov.cn/"> 粤ICP备20009732号</a>
自定义 CSS
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #22ACD6;
}
50% {
box-shadow: 0 0 16px #22ACD6;
}
100% {
box-shadow: 0 0 4px #22ACD6;
}
}
/*首页文章标题居中*/
.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;
}
/*文章阴影及头图放大特效,修正放大后头图的版权位置*/
.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);
}
/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整*/
.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);
}
/*bilibili视频挂载*/
.bilibili{
position: relative;
width: 100%;
height: 0; /*高度设置这里无效,设置为0,用padding撑开div*/
padding-bottom: 75%; /*68%到80%都可以*/
}
.bilibili iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*右侧栏的条条更改为蓝色*/
.navs-slider-bar{
background-color: #23B7E5;
}
/*文章一二三四级标题美化*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#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}
自定义 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;
});
<!--转载提醒-->
document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');};
<!--地址栏变化-->
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);}});
自定义输出head 头部的HTML代码
<!--转载提醒-->
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
<link rel="stylesheet" href="/usr/themes/handsome/assets/css/buttons.css">
css文件来自:https://www.bootcss.com/p/buttons/
自定义输出body 尾部的HTML代码
注:模型来自jad大佬的博客。
由于live2d-widget.js的官方文档404了……
以下代码和部分js文件扒取自jad大佬的博客。
live2d-widget.js核心及模型文件下载:点击此处
-
下载文件,将解压后的
usr文件夹
存放于网站根目录下。 -
自定义输出body 尾部的HTML代码
<script src = "/usr/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/usr/live2dw/assets/kesshouban.model.json"},"display":{"position":"right","width":325,"height":300,"hOffset":-110,"vOffset":0},"dialog":{"enable":true},"mobile":{"show":false},"react":{"opacity":1},"log":false}); </script>
全局右侧边栏广告位
<a href="http://s01.flagcounter.com/more/yq3"><img src="https://s01.flagcounter.com/count2/yq3/bg_F9F9F9/txt_222222/border_F9F9F9/columns_2/maxflags_20/viewers_0/labels_1/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
大佬你好,请问怎么让页脚底部的信息可以延长到这个右侧栏呢,我只能显示在中间
大佬,请问一下你的文章折叠模块怎么弄的( ๑´•ω•) "(ㆆᴗㆆ)
备案号地址打不开,可改成https://beian.miit.gov.cn/
博主为什么我的自定义css 头像旋转呼吸灯以及文章阴影及头图放大特效 设置了没作用
Hi,友链一个可以吗?
博客名称:乔戈路阔阔;
博客网址:https://chelgr.com;
博客头像:https://chelgr.com/share/chelgr-com-icon.png;
博客介绍:缅怀过去 | 记录现在 | 心存未来...
想问一下你这边一级-四级标题除了自定义css以外是不是还做了什么操作才有现在的显示效果?我看我加了以后和这位 https://www.creater.ltd/blog/37.html (十九)的一模一样……谢谢!