说明
这篇文章主要是汇总记录,对于我刚入手Typecho和Handsome所碰到的问题以及解决方法,方便寄几查阅。
如果对你有帮助的话,那就更好啦,老白带小白 ~
Typecho
问题:开启 是否使用地址重写功能
后,除了首页访问正常之外(尾巴还有很丑的 index.php
),其他页面文章均是 404
错误。
解决方法:在服务器上面设置伪静态!
导致错误的原因
我刚开始新建 lnmp虚拟机
的时候,没有设置伪静态类别为 typecho
(以前一直都是输入 wordpress
) ;被 404
和 index.php尾巴
困扰后才选择重装程序,才发现原来lnmp有自带typecho配置文件... 这次正确安装好,网站的conf文件里就有了这一行配置:
include rewrite/typecho.conf;
typecho.conf
里边内容如下:
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php$1 last;
}
Handsome美化
2020-07-12更新:安装大神该插件即可实现很多你想要的功能!
旧文
原文:https://www.moerats.com/archives/628/
我已挑选以下修改,并放到了主题的自定义CSS,具体效果就是博客现在的样子 。
1.首页文章版式圆角化:
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
2.首页文章图片获取焦点放大
/*首页文章图片获取焦点放大*/
.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);
}
3.首页头像自动旋转
/*首页头像自动旋转*/
.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
}
4.鼠标点击特效(富强,文明...)
将以下代码放在主题的 handsome/component/footer.php
中的 </body>
之前即可。
<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>