Typecho Joe主题 RSS方式呈现“新闻早报”(扩展篇)
标签搜索
侧边栏壁纸
  • 累计撰写 16 篇文章
  • 累计收到 2 条评论

Typecho Joe主题 RSS方式呈现“新闻早报”(扩展篇)

艾霂Mr.
2024-12-23 / 0 评论 / 14 阅读 / 正在检测是否收录...

前段时间写了一篇关于Typecho Joe 主题,怎么添加新闻早报页面的文章,详细文章请看:https://www.ailmu.cn/technique/11.html
今天 UP主 为大家带来了它的扩展功能,设置首页文章流,为了使新闻看起来更加自然方便,我们在首页添加新闻文章,使其看起来和文章浑然一体,此方法仅限Joe 7.x 主题。

效果展示

展示

学习姿势

修改Joe主题根目录 index.php 文件, Ctrl+F 查找如下代码:

<div class="joe_index__list" data-wow="<?php $this->options->JList_Animate() ?>">

在此代码上方位置粘贴如下代码:

    <li class="joe_list__item wow default" style="visibility: visible;">
    <div class="line">
    </div>
    <a href="/news.html" class="thumbnail" title="艾霂's Blog - 新闻导读" rel="noopener noreferrer">
        <img width="100%" height="100%" class=" lazyloaded" src="/usr/themes/Joe/assets/img/news.gif"
        data-src="/usr/themes/Joe/assets/img/news.gif"
        alt="艾霂's Blog - 新闻导读">
        <time>
            <?php echo date('Y-m-d'); ?>
        </time>
    </a>
    <div class="information">
        <a href="/news.html" class="title" title="艾霂's Blog - 新闻导读" rel="noopener noreferrer">
            <span class="badge" style="display: inline-block; background-image: -webkit-linear-gradient(0deg,#a9ff00 0%,#007b14 100%);">
                最新
            </span>
            艾霂's Blog - 新闻导读
        </a>
        <a class="abstract" href="/news.html" title="新闻摘要" rel="noopener noreferrer">
            艾霂's Blog - 新闻导读,为保证每位用户的阅读体验感,采用中国新闻网即时新闻RSS源,为广大用户带来最好的体验!
        </a>
        <div class="meta">
            <ul class="items">
                <li>
                    <?php echo date('Y年m月d日'); ?>
                </li>
                <li>
                    新闻导读
                </li>
            </ul>
            <div class="last" style="display: flex">
                <span class="link">
                    <svg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='15' height='15'><path d='M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z' fill='#444'></path><path d='M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z' fill='#ff6a18'></path></svg> 新闻导读
                </span>
            </div>
        </div>
    </div>
</li>

注意事项

  • 修改前,一定记得备份!
  • 图片链接最好更换成自己的图片链接!
  • 跳转错误记得修改成自己的内页链接,你可能需要将 /news.html 改成 /index.php/news.html (网站开启伪静态的可省略...)
2

评论 (0)

  取消