handsome主题修改记录

说明

最近把站点迁移到了香港，然后顺便把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，如下图：

修改后效果：

站点名称：Sword's Blog 杂货屋

本文链接：http://sword.studio/165.html

本博客所有文章除特别声明外，均采用知识共享署名-非商业性使用 4.0 国际许可协议 进行许可

您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的