handsome主题修改记录

2019-03-30T21:11:00

说明

最近把站点迁移到了香港,然后顺便把handsome从4.1升级到了5.0,快一年多没升级了。升级后发现部分细节还是没符合自己的要求,于是改了一下,就当记录

增加显示浏览量和评论量

1、每篇文章显示浏览量

默认是不显示浏览量的,只有评论数,于是修改一下。

打开/usr/themes/handsome/libs/Content.php文件
在884行左右增加以下代码

<i class="fontello fontello-eye text-muted"></i>&nbsp;{$viewNumString}

修改后效果如下

2、右边热门文章同时显示评论数和浏览量
就版本是同时显示的,但是新版本5.0版本开始不显示了。可以修改一下同时显示
如下图,打开/usr/themes/handsome/libs/Content.php文件,在2160行末尾增加如下代码

&nbsp;&nbsp;<i class="fontello fontello-eye" aria-hidden="true"></i> <span class="sr-only">浏览次数:</span> <span class="meta-value">'.$val['views'].'</span>

在2163行末尾增加如下代码

&nbsp;&nbsp;<i class="iconfont icon-comments-o" aria-hidden="true"></i><span class="sr-only">评论数:</span> <span class="meta-value">'.$val['commentsNum'].'</span>

修改后效果如图

3、右边随机文章同时显示评论数和浏览量
方法同上

如下图,打开/usr/themes/handsome/libs/Content.php文件,在2207行末尾增加如下代码

&nbsp;&nbsp;<i class="fontello fontello-eye" aria-hidden="true"></i> <span class="sr-only">浏览次数:</span> <span class="meta-value">'.$val['views'].'</span>

在2210行末尾增加如下代码

&nbsp;&nbsp;<i class="iconfont icon-comments-o" aria-hidden="true"></i><span class="sr-only">评论数:</span> <span class="meta-value">'.$val['commentsNum'].'</span>


修改后效果如下

4、自定义CSS
设置css,使文章版式圆角化,文章图片获取焦点放大,在外观设置,自定义CSS里填入以下代码

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 16px;
}

.panel-small{
    border: none;
    border-radius: 16px;
}

.item-thumb{
    border-radius: 16px;  
}
/*首页文章图片获取焦点放大*/
.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);
}

5、修改为代码显示不换行
旧版本显示是不换行的,新版本代码显示换行了,看代码看起来变扭,不方便

修改为不换行,打开/usr/themes/handsome/assets/css/handsome.min.css文件
搜索pre code,把white-space后的pre-wrap改为pre,如下图:

修改后效果:

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »