月心

基于 Handsome 主题的修改
本站基于Typecho程序,采用友人C的 Handsome 主题,某些修改只在Handsome主题生效或只在PC端...
扫描右侧二维码阅读全文
08
2018/10

基于 Handsome 主题的修改

本站基于Typecho程序,采用友人C的 Handsome 主题,某些修改只在Handsome主题生效或只在PC端生效,请自行体验。
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.文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

4.去除盒子模型阴影

/*盒子模型阴影*/
.app.app-aside-fixed.container.app-header-fixed {
    box-shadow: none!important;
}

5.首页左侧边栏导航按钮默认、点击后的颜色

/*首页左侧边栏导航按钮默认、点击后颜色*/
.nav.nav-sub.dk>li>a:focus, .nav.nav-sub.dk>li>a, .auto:focus, .auto, .active
{
    color: #869fb1!important;
    background-color: #ffffff!important;
}

6.上下左右边框线条

/*上下左右边框线条*/
.b-t, .b-b, .b-l, .b-r
{
    border: none;
}  

7.底部内边距

/*底部内边距*/
.app-content-body
{
    padding-bottom: 100px;
}

8.首页头像转动并放大

/*首页头像自动旋转*/
.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
}

9.首页头像放大并自动旋转

/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

10.首页文章版式阴影化

#阴影颜色修改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);
}

11.自定义滚动条滑块

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;

12.鼠标点击特效
将以下代码放在主题的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>

13.评论框特效
下载特效JS文件:commentTyping.js,将其放在网站目录任意地方,然后编辑主题文件handsome/component/footer.php,在</body>后面添加以下代码或主题自定义JS调用。

<script type="text/javascript" src="(JS文件路径)"></script>

14.文章尾部加入版权信息
编辑handsome/post.php文件的61行
已投放广告的添加至 <!--文章页脚的广告位-->上面,未投放广告添加至<!--文章页脚的广告位-->下面,否则不输出内容!

<!--文章版权声明代码-->
<div class="entry-content l-h-2x"> 
    <div class="tip inlineBlock warning">
        <li><?php _e('文章名:'); ?><sapn>《<?php $this->title() ?>》</sapn></li>
        <li>文章链接:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a></li>
        <li>除特别注明外,文章均为<a href="#输入你的链接" target="_blank">输入你的称呼</a>原创,转载时请注明本文出处及文章链接</li>
    </div>
</div>

15.复制后弹窗提示注明原文链接
下载layer-v3.1.1.zip将其放在网站目录任意地方,然后在主题目录下 headre.php 中插入下面的代码到 </head> 之前。

<script src="//xxx.com/layer.js"></script>

在主题后台设置 - 开发者设置 - 自定义js 里填入下面的代码

document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){
    });};

暂时就写到这里了。

:本文部分内容来源于网络,未统计出处,如有侵犯权益,请联系删除。



版权属于:若无特殊注明,本文皆为《 月心 》原创。
本文链接:https://adrastus.cn/tech/14.html
特别声明:转载请务必保留原文链接,版权归作者所有!
如果觉得我的文章对你有用,请随意赞赏。

发表评论

3 条评论

  1. 游侠

    去掉盒子阴影,谢谢

  2. 逝雪蓝冰

    还是觉得 handsome 有些卡顿,昨天我的博客网站重建了,使用 Hexo 生成静态页面,一键部署到自己的网站。平时写文章直接在电脑上编辑 .md 的 Markdown 文件。

    1. 月心
      @逝雪蓝冰

      没怎么觉得卡啦。一点点没事了