Loading... ## 对于handsome到目前为止所做的优化 > 说明: 使用这个主题有几个月了,之前使用的一直都是别人的博客,虽然早就买了域名和服务器但是一直没玩。想搭博客的时候朋友介绍了 **typecho** ,然后就在朋友的帮助下买了主题~搭了博客。下面是在各个大佬的博客上学到的一些改动的方法。 --- ## 1. 2233娘插件 唔, 第一个感觉好玩的就是 2233 了,当时在 SimpleZero 的博客上看见了觉得超好玩,于是就下载过来了。 [2233娘插件传送门](https://github.com/NicoNicooooo/Z2233) 附上大佬传送门 。[SimpleZero](https://lolicm.com/archives/357/) --- ## 2. 悬挂猫咪置顶插件 右边的那个猫咪置顶插件也是在 SimpleZero 大佬的博客上发现的,点击一下就可以返回最顶端啦~ [悬挂猫咪插件传送门](https://github.com/NicoNicooooo/GoTop) 附上大佬传送门 。[SimpleZero](https://lolicm.com/archives/357/) --- ## 3. 下雪特效插件 这个插件是在 Rat`s Blog 的博客上找到的,安装插件后可以实现有飘落雪花的效果,觉得挺好看就下载过来了~具体的操作在插件安装后可以看到~ [下雪特效插件传送门](https://github.com/journey-ad/Snow-Typecho-Plugin/) [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/468/) --- ## 4. 点击头像后放大并旋转 这个是在 Rat`s Blog 大佬的博客上找到的,具体代码如下,将代码加到后台的自定义 CSS 中即可。 ```css #转动快慢和头像大小自行修改数值 /*首页头像自动旋转*/ .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover{ transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #aside-user span.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid } #aside-user span.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s } ``` [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/) --- ## 5. 首页文章版式圆角化 这个也是在 Rat`s Blog 大佬的博客上找到的,这个修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS 即可启用~ ```css #圆角大小可修改15px数值 /*首页文章版式圆角化*/ .panel{ border: none; border-radius: 16px; } .panel-small{ border: none; border-radius: 16px; } .item-thumb{ border-radius: 16px; } ``` [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/) --- ## 6. 首页文章图片获取焦点放大 这个也是在 Rat`s Blog 大佬的博客上找到的,这一个修改的是首页文章图片,将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义CSS 即可启用 ```css #放大的时间和大小自行修改以下数值 /*首页文章图片获取焦点放大*/ .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); } ``` [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/) --- ## 7. 文章标题居中 这一个修改的是文章标题,使其居中。将以下代码添加至后台主题设置 自定义CSS 即可启用 , 仍然是在 Rat`s Blog 博客上找到的 ~ ```css /*文章标题居中*/ .panel h2{ text-align: center; } .post-item-foot-icon{ text-align: center; } ``` [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/) --- ## 8. 首页文章版式阴影化 这一个修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS 即可启用 , 也是在 Rat`s Blog 大佬的博客上找到的~ ```css #阴影颜色修改rgba后面的值 /*panel阴影*/ .panel{ 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); } .panel: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); } .panel-small{ 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); } .panel-small: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); } #如果也想使盒子四周也有阴影,加上以下代码 .app.container { box-shadow: 0 0 30px rgba(255, 112, 173, 0.35); } ``` [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/) --- ## 9. 自定义滚动条滑块 这个修改针对浏览器最右边的滚动条滑块,使其改变样式。将以下代码添加至后台主题设置 自定义CSS 就可以使用了,也是在 Rat`s Blog 大佬的博客上找到的~ 参数可以自行修改,比如滑块、滑轨颜色大小宽度什么的~ 附上代码 ```css /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{ width: 3px; height: 16px; background-color: rgba(255,255,255,0); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: rgba(255,255,255,0); } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; ``` [附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/) --- ## 10. 鼠标点击特效 鼠标点击的特效有很多,我用的是点击出现爱心~ 下面附上4种点击特效,将喜欢的特效代码复制到后台的自定义 JavaScript 即可启用,还有一种方式是 将以下代码放在主题的**handsome/component/footer.php**中的**</body>**之前即可 同是从 Rat`s Blog 大佬的博客上看到的~ ##### 1. 鼠标点击出现文字 ```css #字体自行修改 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> ``` ##### 2. 点击出现跳动的心 ```css $("html,body").click(function(e) { var gcd = new Array("♥", "♥", "♥"); var n = Math.floor(Math.random() * gcd.length); var $i = $("<b/>").text(gcd[n]); var x = e.pageX, y = e.pageY; $i.css({ "z-index": 99999, "top": y - 20, "left": x - 8, "position": "absolute", "color": "#FF706C", "animation": 'heartbeat .25s infinite .15s' }); $("body").append($i); $i.animate({ "opacity": 0 }, 1500, function() { $i.remove() }); e.stopPropagation() }); ``` ##### 3. 点击出现向上飘动的心 ```css (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; }})(window,document); ``` ##### 4. 给博客网站添加鼠标点击水波动画效果 下载特效JS文件:[ripple.js](https://www.moerats.com/usr/down/ripple.js),将其放在网站目录某个地方,然后编辑主题文件footer.php: ```css #在</body>后面添加如下一句代码 <script type="text/javascript" src="(这个脚本的路径)"></script> ``` ps: typecho博客可以使用,其它博客暂未测试,感谢 Rat`s Blog大佬~ 附上大佬传送门 [Rat`s Blog](https://www.moerats.com/archives/384/) --- ## 11. 修改首页标题栏及自定义文字 此处位于首页站点公告下方,文章上方,修改方法如下: 1. 后台“设置外观” → “主题增强功能” → “增强功能开关” → 勾选“首页的标题栏下启用一言接口”。 2. 接着去除此处的标题显示,修改方法为将下框中的代码在主题的**handsome/index.php**中删除。 3. 代码如下 <h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1> 附上大佬传送门 [许建华](https://www.xujianhua.com/1.html) --- ## 12. 评论框特效 下载特效 JS 文件:[commentTyping.js](https://www.moerats.com/usr/down/commentTyping.js),将其放在网站目录某个地方,然后编辑主题文件 **handsome/component/footer.php ** ,在<**/body>**后面添加以下代码就可以啦~ <script type="text/javascript" src="(JS文件路径)"></script> 附上大佬传送门 [Rat``s Blog](https://www.moerats.com/archives/372/) --- ## 13. Typecho博客首页显示文章摘要的方法 ps:Typecho 博客默认没有自动摘要的功能,博客首页和分类归档页面显示的文章都是全文输出的,对于内容文字很多的文章,会把页面拉伸得很长,显示得也不怎么美观。但博主可以在发表文章的时候手动摘要。 方法: 在发表文章的时候,在文章内容中添加**<!–more–>**标签即可。 比如内容一共有五段,要显示前三段,就在第三段结束处添加**<!–more–>**标签代码 同样来自 Rat`s Blog 大佬的博客~ ,附上大佬传送门 [ Rat`s Blog ](https://www.moerats.com/archives/91/) --- ## 14. Typecho中去除URL中的index.php 在默认情况下,Typecho能够正常工作后,所有文章的URL都会是类似 https://www.murongmengjie.cn/index.php/archives/37.xxx 这里的 **index.php**对于强迫症患者影响还是挺大的,其实这里只需要进入Typecho后台控制面板 点击 设置->永久链接 将 是否使用地址重写功能 改为 启用 ,这里可能系统提示不支持地址重写,选择强制开启之类的就行了。 再在 自定义文章路径 中选择自己喜欢的URL格式,保存设置后马上就生效了。 ps: 如果修改之后发现点击文章出现 404 ,那就是 nginx 或者 Apache 的伪静态的原因了,因为个人用的是 nginx ,所以下面附上修改 nginx 配置文件的代码: 首先打开服务器上的 **/usr/local/nginx/conf/vhost** 路径下的 www.yourdomain.com.conf 文件 ,在其中添加如下代码 ```css if (!-e $request_filename) { rewrite ^(.*)$ /index.php$1 last; } location ~ .*\.php(\/.*)*$ { include fastcgi.conf; fastcgi_pass 127.0.0.1:9000; } ``` 改完后重启下 nginx 服务器 , 就可以开启伪静态啦~ 之后再按照前面说的重新设置地址重写功能,然后再刷新下页面就可以看到效果了。 --- ## 彩色标签云 彩色标签云是在曦语大佬的博客中学到的。 对于typecho下的彩色标签云实现方式,handsome主题适用 改动不大 修改的有3个文件: 1. component/sidebar.php 2. 新增CSS文件 3. component/header.php ##### 1. 用以下这段代码替换原有的 sidebar.php 文件下的标签云 ```php <?php if (!($this->is('post'))) : ?> <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <span id="tag-clould-color" style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>, <?php echo(rand(0,255)); ?>)"> <a href="<?php $tags->permalink();?>"> <?php $tags->name(); ?></a> </span> <?php endwhile; ?> <?php endif; ?> </section> <?php else: ?> </section> ``` 这里简单解释一下: 实现方式主要是加一个span标签,让它的背景颜色采用RGB方式随机,从而达到不同颜色的标签效果 此处放一张实现的效果图 ![彩色标签云.png][1] ##### 2. 增加CSS文件 新增一个CSS文件 起什么名字都可以,我起的名字是 tag-clould-color.css ,刚好和文价内容相同 文件放置位置在 **/assets/css** 目录下 用 **CDN ** 的小伙伴也可以同步上传 然后添加如下内容 以后如果是对主题做什么样式上的修改也可以直接写在此文件中 ```css #tag-clould-color { padding: 5px 10px 5px 10px; border-radius: 10px; color: #FFFFFF; margin: 3px 3px 3px 0; display: inline-block; } ``` ##### 3. 在头文件中引用该CSS文件 在header.php中增加这行代码(表示在页面引用你新添加的CSS式文件) filename.css为你自己的文件名 注意要加载在主题样式文件后(因为在html页面中是按顺序加载的,避免你以后写的样式不生效) ```php <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css"> ``` 下面是具体位置: ```php <!--引入英文字体文件--> <?php if (!empty($this->options->featuresetup) && in_array('laodthefont', $this->options->featuresetup)): ?> <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/font.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" /> <?php endif; ?> <!-- 修改部分主体样式,添加css文件,主要是彩色标签云 --> <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css"> <style type="text/css"> <?php echo Content::exportCss($this) ?> </style> ``` 然后就可以看到效果了 个别用户可能需要清除一下浏览器缓存才有效果~~ 附上曦语大佬传送门 [彩色标签云](https://ixiyu.me/archives/typecho-colorful-tag.html) --- ps: 暂时就想到这些了,日后有新的会在添加上去~~ [1]: https://upyun.murongmengjie.cn/usr/uploads/2018/06/3257794214.png 最后修改:2020 年 08 月 28 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 1 哇卡哇卡
8 条评论
呦呵 你也在网上冲浪鸭
呦呵 同道中人啊
你好,请问你版娘的这个插件文件还有吗?大佬的网站我打不开了,还有这猫猫的
你也可以直接去下载这个大佬的插件,各种美化都有,地址 https://racns.com/374.html
https://github.com/mrmjrc/Z2233
您好,请问您是通过什么做到让博客的速度如此给力?我的blog一到晚上卡成拖拉机
很6 就是这个版娘 有点不老实 老实抓着我ヾ(≧∇≦*)ゝ 改了一部分
哈哈、也是从大佬的博客上看到的呀~