首页文章图片获取焦点放大
- 将以下代码添加至后台主题设置
自定义CSS
,放大的时间和大小自行修改数值,本站用的是1哦
/*首页文章图片获取焦点放大1*/
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.05);
}
/*首页文章图片获取焦点放大2*/
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
鼠标经过头像转动并放大
- 将以下代码添加至后台主题设置
自定义CSS
,转动快慢和头像大小自行修改数值
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
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 #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
Mac风格代码高亮
插件最新更新时间:2020/07/23
handsome.min.css更新时间:2020/08/13
插件下载:
- 下载本插件,解压到
usr/plugins/
目录中 - 进入网站后台-控制台-插件-激活插件(请勿与其它同类插件同时启用,以免互相影响)
- 设置:选择主题风格,是否显示行号等
- 修改(替换)
/usr/themes/handsome/assets/css/
下的handsome.min.css
文件 - 由于Handsome主题最新加入授权,旧版本必须更新至最新版,所以这里就不提供旧版
- 后台 --> 设置外观 --> 主题增强-->关闭
启用主题内置的代码高亮(支持19种常用语言)
handsome.min.css 7.X.X
版本:
- 如果你的网站有开启Pjax(Handsome主题默认开启),把以下代码添加到回调函数的地方,以Handsome为例,打开后台设置-->
Pjax
-->PJAX回调函数
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
- 若插件里设置不显示行号,pjax函数要改为
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
- 用法(删除下方代码中的
\
)
\```php(语言类型选填)
<?php echo 'Hello Alvin!'; ?>
\```
删除上边代码中的\
底部页脚标签样式
- 将以下代码添加至后台主题设置
自定义CSS
/*底部页脚*/
.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="./" title="©2019 Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Alvin</span>
</a>
</div>
|
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 18135867号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">18135867号</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>
- 添加完成后,需要去
handsome\component\footer.php
删除原有声明代码,以下为删除完后的效果(大概1~12行)
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
<footer id="footer" class="app-footer" role="footer">
<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo(); ?>
</span>
<span class="text-ellipsis"><?php
$this->options->BottomleftInfo(); ?></span>
</div>
<!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->
给网站添加crisp在线客服插件
- 注册crisp账户并添加网站:https://app.crisp.chat/initiate/signup/
- 注册完成后,点击
设置
-网站设置
-显示整合
-HTML
,复制代码添加至后台主题设置自定义输出head 头部的HTML代码
即可
贴吧滑稽表情包
- 复制owo.json到
handsome/usr/
- 复制paopao文件夹到
handsome/assets/img/emotion/
- 清除一下游览器缓存,然后刷新即可
XcnteOWO表情包:
炫彩鼠标插件
- 下载本插件,解压放到
usr/plugins/
目录中 - 登录管理后台,激活并设置插件
HoerMouse:
评论获取用户信息插件
- 下载本插件,解压到
usr/plugins/
目录中 - 进入网站后台-控制台-插件-激活插件
- 此插件只适用于Handsome主题,未对其它主题优化!!!
- 修改
component/comments.php
文件,大概第60~80行处添加代码
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
修改前
<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>
修改后
<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
Typecho开启CDN后,可能无法获取访客真实IP,只能取得CDN节点IP,为此可以在网站的根目录的 config.inc.php
插入下面的代码:
/** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}
UserAgent:
网站响应耗时(不支持6.0以上版本)
- 将以下代码放到
handsome/functions.php
中,可以放在最后面
/**
* 加载时间
*
*/
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;
}
- 然后在主题目录下打开
component
文件夹,编辑里面的sidebar.php
文件,找到博客信息相关的代码,在合适的位置添加以下代码即可
<li class="list-group-item"> <i class="glyphicon glyphicon-flash text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
顶部导航天气(不支持7.0以上版本)
- 将以下代码复制到
component/headnav.php
搜索提示下方即可,大概86
行左右
<!--天气开始-->
<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": "#ffffff",
"uid": "xxxxxxxx",
"hash": "xxxxxxxx"
});
tpwidget("show");</script>
<!--天气结束-->
魔性动态标题
- 复制下方代码添加至后台主题设置
自定义输出head 头部的HTML代码
即可
<!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)我藏好了哦 - Alvin Blog';}else{document.title=normal_title;}});</script>
文本框打字机特效
- 复制下方代码添加至后台主题设置
自定义输出body 尾部的HTML代码
即可
<!--文本框打字机特效-->
<script type="text/javascript" src="https://www.mgxfd.club/usr/themes/handsome/assets/js/commentTyping.js"></script>
博主介绍的闪字特效
- 复制下方代码添加至后台主题设置
博主的介绍
即可 - 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block"><div id="chakhsu"></div> <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 = ["Keep Fighting" ].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> </span> </span>
复制弹框版权提醒
- 首先将下方代码复制添加至后台主题设置
自定义输出head 头部的HTML代码
<!--复制弹框JS-->
<script src="https://www.mgxfd.club/layer/layer.js"></script>
- 最后复制下方代码添加至后台主题设置
自定义 JavaScript
即可
<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};
评论邮件提醒功能
- 下载本插件,解压到
usr/plugins/
目录中 - 进入网站后台-控制台-插件-激活插件
Smtp服务器地址:
smtp.qq.com
Smtp端口:465
Smtp用户:你的邮箱账户
Smtp密码:开启Smtp时获取的授权码
Comment2Mail:
文章底部赞赏图标跳动
- 将以下代码添加至后台主题设置
自定义CSS
/*赞赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
给文章顶部添加判断百度是否收录
- 将以下代码添加至
handsome/functions.php
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1)
{echo "百度已收录";
}
else
{echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录!\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}
- 将以下代码添加至
handsome/post.php
大约80行左右分类
下方即可
<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i> <?php echo baidu_record() ?></li>
大佬,你搜索栏旁边的统计窗格咋弄的啊?还有你用的是啥音乐播放器?
[...]以上内容转载自:https://www.mgxfd.club/20.html[...]
大佬!请教一下这个头像变大是怎么搞得
[...]以上内容转载自:https://www.mgxfd.club/20.html[...]
过于花里胡哨,符合我的口味!
冲啊!
做出了心知天气插件版,https://github.com/6get-xiaofan/SenWeather
烦博主更新一下~
代码高亮
要删除用法(删除下方代码中的\)
是在那个文件里删除
你用的时候删,在文章编辑的时候,复制这个代码框的内容进去,然后把\删了保存就能看到效果了
老哥,我解析了你的音乐地址,可是我的网站成功了后10分钟就无效了,不知道为什么,哪里有稳定的地址吗
建议下载存到一些cdn里面,每个链接都有有效期
您好 ,您这个贴代码的黑色框是代码高亮吗? 为什么我的和你的一点不一样
我的天气和mac代码高亮都没用
mac代码高亮你是估计有东西没修改到,导航天气是因为暂不支持7.0以上版本
果真花里胡哨,我喜欢
你好,请问那个crisp复制代码在哪里复制呢?
注册完成后,点击设置- - 网站设置- -显示整合,HTML代码复制至添加后台主题设置自定义输出head 头部的HTML代码即可
请问一下您这博客的logo是怎么做的啊
PS做的哦,如果不会,可以20元小红包联系我制作
这都是干货啊,请教一下红色字是怎么按的呢?
红色字是特殊标记
大佬的这篇博客集合了好多我想要的东西阿,膜拜膜拜,能转载吗,只贴链接,实在是写的太好了!
欢迎贴链接转载
哇,大佬秒回!我想把你的链接贴最前面,然后选两个我用了的写在文章里可以吗
刚刚好看到就回了,哈哈。可以欢迎欢迎,底下打上转载至https://www.mgxfd.club/20.html就可以了
好好好,大佬想和你换友链可以么OωO
到此处填写申请即可:https://www.mgxfd.club/23.html
填好了,但是有个多余的括号忘了删了
??????
这还不简单 去掉了
我也挺喜欢乱改的,只是每次主题一更新,改的全没了
哈哈 跟我一个样
嘤嘤嘤,膜拜大佬
你也可以哦
很不错的教程谢谢
博主你这个ColorHighlight代码高亮设置的是哪个啊
详见第3条,插件为CodePrettify
我安装了,但是不知道是哪个
CodePrettify
基于 prismjs 的代码语法高亮插件可显示语言类型、行号,有复制功能(请勿与其它同类插件同时启用,以免互相影响)详细说明:https://www.xcnte.com/archives/523/
2.1.4
Xcnte
嘿嘿 爱了,白嫖到了!!
欢迎白嫖
这个魔改教程就很棒,感谢
谢谢支持
感谢!!!
查题系统很棒!
感谢支持!
谢谢博主,拿走啦
老哥,你的搜狗图床不错哦 要是能分享下github链接一定万分感谢了!
https://www.lanzous.com/i7wp4kd

碰到个奇怪的问题,滑稽表情包在Safari浏览器上不能使用(我自己的网站),在你的网站上面显示正常,其他浏览器都没问题
清空下缓存试试呢~~
还真是缓存的问题
还有个问题,就是评论邮件提醒插件不生效,测试的时候总是卡死,换了QQ和163都不行,再就是评论的时候会卡死,不知道哪里配置不对
博主,你的ssl证书过期了貌似
由于域名更换,如果有使用上面代码的同学,请将blog.mgxfd.club修改为www.mgxfd.club,否则部分特效无法解析
建议你直接把文章里的相关内容都改了,因为chrome现在会直接用单独的页面显示你的网站不安全
www.mgxfd.club可以打开,www.mgxfd.club与mgxfd.club是同一个证书,blog.mgxfd.club准备停用的了
证书是www.mgxfd.club,但现在只能打开mgxfd.club
我傻了,我就说为啥我的网站明明ssl啥的都好好的,证书也是有效的,chrome就是要给我显示一个大红色的Not Secure,强迫症差点被搞自闭了,终于搞出问题是在你这呀
你的dns是不是有些问题啊,www.mgxfd.club打不开
顺着教程跟过来的,过来看看
7,炫彩鼠标插件 在第一次进入界面时候,有很多标签没有添加鼠标图片哎,都是原始的,f5刷新一遍后才会添加属性。知道怎么解决嘛。
这个得加个pjax回调函数,或者干脆直接用自定义css写
原谅我没看懂~
https://blog.chrxw.com/archives/2019/10/14/338.html
我写了篇教程,在最下面,完美解决插件的问题
调用插件多的确会卡,写成css会好很多~
不错 学习了 就是为什么代码高亮我的总是有两个行号 还会遮挡部分代码
截图:https://i.loli.net/2019/10/10/oncdzkIJ6aKACgp.png
更新handsome5.3.1版本之后,插件和css也要一起更新替换下哦,不然就会有你这样的情况
请问你的鼠标点击后圆圈爆炸的特效是怎么改的呀,觉得很不错
仔细看文章哦
好久没来看看了
感谢来访
博主你好,底部页脚标签样式的css 填入后还会显示原来的底部信息,请问如何屏蔽掉原来的底部信息
去主题目录handsome\component找到footer.php修改,删除原有的声明,一边删一边刷新可以看看有没有删错,在前几行的,有注释
非常感谢
不客气,具体怎么操作已在文中补上,实在不懂可以看看,看之前还是建议自己多多尝试哦
大佬麻烦你能帮我看下 我的网站底部为什么会成为那个样子
那就好OωO
已经弄好了
评论获取用户信息插件,这个有没有别的样式呢?
设置里面可以调不同的显示样式和颜色哦
嘀嘀嘀打卡
感谢~
能帮到你就好,本帖会继续更新
哇,拿走了,谢谢
不客气 喜欢的可以收藏,本帖随时更新,哈哈
你回复我,我怎么收不到消息呀
已添加评论邮件提醒
收到了?哈哈
我没开启邮件回复提醒
日常友情互访
互踩,哈哈,感觉回到了童年
拿走不谢~哈哈
如果有不懂的地方可以留言帮忙
非常感谢~