Typecho和Handsome的设置

说明:这篇文章主要是汇总记录,对于我刚入手Typecho和Handsome所碰到的问题以及解决方法,方便寄几查阅。

如果对你有帮助的话,那就更好啦,老白带小白 ~

Typecho问题

1.
开启是否使用地址重写功能后,除了首页访问正常之外(尾巴还有很丑的index.php),其他页面文章均是404错误

解决方法:
在服务器上面设置伪静态!
地址重写问题.png

后话:
我刚开始新建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美化

原文: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>
Last modification:August 8th, 2019 at 04:35 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment