前段时间写了一篇关于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
(网站开启伪静态的可省略...)
评论 (0)