handsome首页修改为图文瀑布流

当然如果你的网站性质很适合图文瀑布流，那么就顺带写一下东哥笔记改为图文瀑布流的改造路径。

博客用的handsome主题，通过增加自定义css样式可以达到展示内容

/*首页布局*/
.blog-post.post-list {
  align-items: stretch;
  gap: 0 14px;
}
.panel {
margin-bottom: 14px;
}
.single-post.panel-large.panel {
  flex-basis: 20%;
  min-width: 320px;
}
.summary {
    word-break: break-all;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
line-height: 1.5;

}
.item-thumb {
  min-height: 165px !important;
}
.wrapper-lg {
    padding: 20px;
}
.post-item-foot {
    display: flex;
    justify-content: space-between;
}

如果还想显示截图中的浏览量和分类，则需要修改主题内的文件lib/Content.php

function echoPostList($obj)函数增加分类和浏览量，在$parameterArray['commentNum'] = $obj->commentsNum;下增加

// 分类
 $categoryLinks = '';
if (!empty($obj->categories)) {
     $categories = $obj->categories;
     $categoryArray = array();
     foreach ($categories as $category) {
         // 为每个分类生成链接，并添加到数组中
         $categoryArray[] = '<a href="' . $category['permalink'] . '">' . $category['name'] . '</a>';
     }
     // 将分类链接用逗号或其他符号分隔开
     $categoryLinks = implode(', ', $categoryArray);
 }
 $parameterArray['category'] = $categoryLinks;
 $parameterArray['viewNum'] = get_post_view($obj);

在709行左右，returnPostItem函数增加内容

//格式化浏览次数
$viewNum = $parameterArray['viewNum'];
$viewNumString = $viewNum . " " . _mt("次浏览");
$category = $parameterArray['category'];

在对应头图样式，716行左右，修改大版图样式，增加分类和浏览量，可以根据浏览量高于1000时显示红字和火标。其他版式根据需要看是否修改。

$backgroundImageHtml = Utils::returnDivLazyLoadHtml($parameterArray['imgSrc'], 1200, 0);
if ($parameterArray['isFixedImg']) { //裁剪头图
$html .= <<<EOF <div class="single-post panel panel-large box-shadow-wrap-normal">
    <div class="index-post-img" style="position: relative;">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb lazy" {$backgroundImageHtml}></div>
        </a>
        <span style="
        display: flex; 
        position: absolute;
        left: 0px;
        top: 0px;
        color: #fff;
        font-size: 12px;
        padding: 2px 14px;
        background-color: #7166ba;
        border-radius: 0 50px 50px 0;">{$category}</span>
    </div>
    EOF;
    if ($viewNum <= 1000) { $html .=<<<EOF <span style="display: flex; 
                                position: absolute;
                                left: 0px;
                                top: 27px;
                                color: #fff;
                                font-size: 12px;
                                padding: 2px 10px;
                                background-color: #3a3f51;
                                border-radius: 0 50px 50px 0;">
        <span class="right-small-icons"><i data-feather="eye"></i></span><a href="{$parameterArray['linkUrl']}#comments">{$viewNumString}</a>
        </span>
        EOF;
        } else {
        $html .= <<<EOF <span style="display: flex; 
                                position: absolute;
                                left: 0px;
                                top: 27px;
                                color: #fff;
                                font-size: 12px;
                                padding: 2px 10px;
                                background-color: #f61f31;
                                border-radius: 0 50px 50px 0;">
            <span class="right-small-icons"><i data-feather="eye"></i></span><a href="{$parameterArray['linkUrl']}#comments">{$viewNumString}<span style="font-size: 30px;position: absolute;bottom: 0;right: -15px;">🔥</span></a>
            </span>
            EOF;
            }

版权属于：胡东东博客 - hudd.cn

本文链接：https://blog.hudd.cn/1408.html

本文采用知识共享署名4.0 国际许可协议进行许可。转载或大段使用必须添加本文链接，否则您将构成侵权！

---

微信公众号: 东哥探索笔记