六十一:修复透明背景下文章目录bug
方法:将以下代码添加至后台-开发者设置-自定义CSS
。
#toc {
background-color:rgba(255, 255, 255, .15) !important;
}
六十二:修复透明背景下时光机右侧bug
方法:将以下代码添加至后台-开发者设置-自定义CSS
。
.bg-light .lter, .bg-light.lter {
text-align: justify;
}
六十三:更好看的友链样式
1:首先更换/usr/themes/handsome/links.php
中51-100行
的数据:
<div class="tab-pane fade in" id="tab_2">
<div class="link-box">
<?php
$mypattern = <<<eof
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}">
<div class="thumb">
<img width="200" height="200" src={image} alt="{title}" />
</div>
<div class="content">
<p class="title">{name}</p>
</div>
</a>
eof;
Handsome_Plugin::output($mypattern, 0, "one");
?>
</div>
</div>
<div class="tab-pane fade in" id="tab_3">
<div class="link-box">
<?php
$mypattern = <<<eof
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}">
<div class="thumb">
<img width="200" height="200" src={image} alt="{title}" />
</div>
<div class="content">
<p class="title">{name}</p>
</div>
</a>
eof;
Handsome_Plugin::output($mypattern, 0, "good");
?>
</div>
</div>
<div class="tab-pane fade in" id="tab_4">
<div class="link-box">
<?php
$mypattern = <<<eof
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}">
<div class="thumb">
<img width="200" height="200" src={image} alt="{title}" />
</div>
<div class="content">
<p class="title">{name}</p>
</div>
</a>
eof;
Handsome_Plugin::output($mypattern, 0, "ten");
2:将以下代码添加至后台-开发者设置-自定义CSS
。
.link-box a .thumb {
font-size: 0;
overflow: hidden;
background-color: #fff;
margin: 0;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
width: 100%;
}
.link-box {
overflow: hidden;
padding: 4.375rem 2.1875rem 2.1875rem;
margin: -3.125rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.link-box a{
width: 16%;
text-align: center;
margin: 14px;
border-radius: 1.3125rem;
}
.link-box a:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
六十四:Handsame主题添加微信公众号入口
1.打开handsame主题目录->component->sidebar.php
2.在上面截图的代码位置:
<?php if ($this->options->adContentSidebar != ""): ?>
<!--广告位置-->
3.添加以下代码:
<!--个人公众号位置-->
<section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md"><?php _me("欢迎关注微信公众号") ?></h5>
<img src="https://你的公众号图片地址" alt="个人微信公众号" title="个人微信公众号" class="block">
</section>
六十五:微信通知新评论
1.下载后解压,将解压后的目录名改为 Comment2Wechat
,然后上传到你的 Typecho 的/usr/plugins
,并在 Typecho 后台开启插件
2.到 Server酱里申请你的专属 SCKEY
,并根据提示绑定你的微信
3.将你申请到的 SCKEY
填到插件设置里,保存即可。链接:https://pan.baidu.com/s/11o3YktIwhD5E8Mc_fLxqiA
提取码:aamu
六十六:自建公众号对接handsome主题时光机
环境需求
PHP >= 7.1
PHP cURL 扩展
PHP OpenSSL 扩展
PHP SimpleXML 扩展
PHP fileinfo 扩展
PHP PDO_MYSQL 扩展
食用方法
1、拷贝项目到你的服务器
2、打开 网址/install.php 安装
3、在公众号后台服务器配置填写服务器地址为 项目所在网址/server.php 并启用服务器配置
4、公众号发送绑定,点击链接填写相关信息进行绑定
5、 配置完成,尽情使用吧!使用方法同handsome官方时光机发送公众号
github地址
https://github.com/iLay1678/wechat_for_handsome
2021.20.30打包链接:https://pan.baidu.com/s/1jCwAwdwU9U0_3DIHlmg1JQ
提取码:78ei
六十七:给背景添加粒子效果
1.下载js文件
链接:https://pan.baidu.com/s/1cd5nAbPii5bTlNhf37eNEw
提取码:3j8d
2.在网站引入js文件
<script src="source/Pranule.js"></script>
3.无需设置直接运行
<script>Pranule();</script>
4.如需要自定义,按照以下格式设置
<script>Pranule(['bg_effect','100',"0.0.0","0,0,0",'0','6000','20000','0','2','2','','0']);</script>
说明
六十八:防止复制
放在全局的js中
代码:
<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>
六十九:文章end标识
在模板文件 post.php内添加以下代码,建议在83行广告输出结束后添加。
<!--内容结束分割线-->
<div class="tt-fenge-end">
<span>End</span>
</div>
<!--/ 内容结束分割线-->
在后台 自定义css中添加如下代码
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}
七十:加载动画
以下代码放置 主题文件header.php内
<!--加载动画-->
<style>
#PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
#PageLoading-center{width:100%;height:100%;position:relative;}
#PageLoading-center-absolute{
position:absolute;left:50%;top:50%;
height:200px;width:200px;
margin-top:-100px;
margin-left:-100px;
}
.object2{
-moz-border-radius:50% 50% 50% 50%;
-webkit-border-radius:50% 50% 50% 50%;
border-radius:50% 50% 50% 50%;
position:absolute;
border-left:5px solid #FFB6C1;
border-right:5px solid #b6def7;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
-webkit-animation:animate 2s infinite;
animation:animate 2s infinite;
}
#object_one{left:75px;top:75px;width:50px;height:50px;}
#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
#object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
@-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
@keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
</style>
<!--加载动画-->
<body id="body" class="fix-padding skt-loading">
<body id="body" class="fix-padding" style="overflow:hidden">
<div id="PageLoading" style="z-index:99999999;">
<div id="PageLoading-center">
<div id="PageLoading-center-absolute">
<div class="object2" id="object_four"></div>
<div class="object2" id="object_three"></div>
<div class="object2" id="object_two"></div>
<div class="object2" id="object_one"></div>
</div>
</div>
</div>
</body>
</body>
以下代码放置 后台-开发者设置-自定义javascript 内
$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});
这里面还有三种样式的加载动画有需要可以看看
为typecho博客添加加载动画 - 友人C (ihewro.com)
七十一:网站背景添加海浪背景
- 添加至后台主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
- 添加至后台主题设置-开发者设置-自定义网站头部代码
<div id="wavesDIV" style="display: block;">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<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"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
<use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
</g>
</svg>
</div>
七十二:输出控制台
放入后台-外观设置-开发者设置-自定义body
<!--输出控制台-->
<script type="text/javascript">
console.clear(); //清空控制台
console.log("\n %c 凉心‘s Blog","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;"); //万能控制台,可写html代码
</script>
七十三:背景添加冒泡动画
放入后台-外观设置-开发者设置-自定义body
<!--背景添加冒泡动画-->
<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
说明
id: '', //容器ID num: 100, // 个数 start_probability: 0.1, // 如果数量小于num,有这些几率添加一个新的 radius_min: 1, // 初始半径最小值 radius_max: 2, // 初始半径最大值 radius_add_min: .3, // 半径增加最小值 radius_add_max: .5, // 半径增加最大值 opacity_min: 0.3, // 初始透明度最小值 opacity_max: 0.5, // 初始透明度最大值 opacity_prev_min: .003, // 透明度递减值最小值 opacity_prev_max: .005, // 透明度递减值最大值 light_min: 40, // 颜色亮度最小值 light_max: 70, // 颜色亮度最大值 is_same_color: false, //泡泡颜色是否相同 background:"#f1f3f4" //背景颜色
七十四:响应耗时和访客总数
- 首先将以下代码加到
/usr/themes/handsome/libs/Content.php
中,放在class Content{}之前
/*访问总量*/
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
文件内,找到博客信息下面添加以下代码
<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>
<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>
七十五:右侧边栏添加全站字数
- 在
component/sidebar.php
的开头加入下面的代码:
<?php
//字数统计
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000) { $chars /= 10000; $unit = '万'; }
else if($chars >= 1000) { $chars /= 1000; $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
?>
- 在
component/sidebar.php
处,选择合适位置加入以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
<span class="badge
pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
七十六:全站友链显示图片
- 在
aside.php
里面大约214行的地方修改代码,在a标签内加上:
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" />
- 或者复制下方全部代码替换
<!--使用links插件,输出全站友链-->
<?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\"
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><img style=\"width:18px;height:18px;border-radius:100%;margin-right:3px;\" src=\"{image}\" /><span>{name}</span></a></li>";
Handsome_Plugin::output($mypattern1, 0, "ten");?>
七十七:开启gzip压缩
在根目录
config.inc.php
文件中,加入以下PHP代码即可(建议加在最上面):/** 开启gzip压缩 */ ob_start('ob_gzhandler');
七十八:正文结束添加版权信息
在主题根目录下
post.php
文件中<?php echo Content::exportPayForAuthors(); ?>
(大概在87行左右)添加以下内容<!--版权声明开始--> <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> <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><br></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->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span> </div> </div> <!--版权声明结束-->
七十九:时光机使用DPplayer播放器
后台-设置-评论-允许使用的HTML标签和属性添加以下代码后保存
<div class="" data-config=''/>
Dplayer使用方法
<div class="dplayer" data-config='{"video":{"url":"视频地址","pic":"图片封面地址"}}'/>
**注意:请勿在评论设置中开启 Markdown
语法否则无法解析;
八十:在文章中嵌入网页
在文章中添加代码即可,将 链接地址
修改为你需要展示的网站地址;
<iframe align="center" width="100%" height="740px" src="链接地址" frameborder="no" border="0" scrolling="no" marginwidth="0" marginheight="0" ></iframe>
八十一:回复可见提示内容修改
编辑 /usr/themes/handsome/libs/Content.php
文件
在1700行左右,自行修改提示内容即可;
八十二:更换后台Gravatar国内镜像**
目前可用 Gravatar
国内镜像
- V2EX源: https://cdn.v2ex.com/gravatar/
- Loli源: https://gravatar.loli.net/avatar/
- 极客族: https://sdn.geekzu.org/avatar/**
img
打开 var/Typecho/Common.php
找到下面的代码,大概在932行
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';
if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}
$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;
return $url;
}
替换为:
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://cdn.v2ex.com/gravatar/' : 'http://gravatar.duoshuo.com/avatar/';
if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}
$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;
return $url;
}
2.另外一个修改方法
具体方式为在 config.inc.php 中加入
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
八十三:更换Gravatar默认头像
基于handsome
主题修改,其它的主题也许路径不同;
打开网站根目录,编辑 /usr/themes/handsome/libs/Utils.php
文件;
找到名为 getGravator
的 Function
修改 $default
代码的变量值,大概在86行左右;
在 $default = '';
的 ''
中填入可用的变量值即可;
可用的变量值:
mm
神秘人identicon
抽象图形(自动生成)wavatar Wavatar
(自动生成)monsterid
小怪物(自动生成)retro
复古(自动生成)
八十四:文章最后修改时间格式
文件位置:/usr/theme/handsome/libs/content.php
修改public static function exportPostFooter
中对应的内容
或者查找"最后修改"
八十五:右侧博客信息背景色
文件位置:/usr/theme/handsome/component/sidebar.php
博客信息:修改<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
中的
<span class="badge
pull-right">
添加 style="background: #428bca;"
<span class="badge
pull-right" style="background: #428bca;">
附:handsome文件
component/aside.php 左边导航栏
component/comments.php 评论区
component/footer.php 底部版权、音乐播放器之类
component/header.php 页面头,没啥要改的
component/headnav.php 顶部导航
component/say.php 时光机动态
component/sidebar.php 右侧栏目
component/third_party_comments.php 3.3.0新增,第三方评论
css/ 博客CSS,一般不要改
fonts/ 博客字体,一般不要改
img/ 图像,一般不要改
js/ js文件,一般不要改
lang/ 语言文件
libs/Content.php 文章内容
libs/... 一般不要改
usr/ 另一个语言文件?
404.php 404界面
archive.php 整合
booklist.php 书单
cross.php 时光机
files.php 归档
functions.php 配置界面的东西
guestbook.php 留言板
index.php 首页
links.php 友链
page.php 文章页面整合
post.php 文章输出
color: 选填,不填默认为success(绿色),可选值:
light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色
8 条评论
请问,博客信息数据气泡的颜色是在哪里设置的呢,我好像没有找到。谢谢!
看到了,不好意思Σ(っ °Д °;)っ
谢谢大佬,已经修改了一部分
你好,请问右侧最边上的设置怎么显示全部选项,我的只有一个深色模式
感谢,对我这个小白来说太使用了
我居然一条条看完了
好棒呀
牛牛牛