前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在搜索。文章底部。侧栏添加最近文章模块

在搜索。文章底部。侧栏添加最近文章模块

作者头像
Cell
发布2022-02-25 16:00:19
4360
发布2022-02-25 16:00:19
举报
文章被收录于专栏:Cell的前端专栏

首先在主题配置文件添加以下关键字

1 2 3 4 5 6 7 8

recent_posts: enable: true search: true post: false sidebar: false icon: history title: 近期文章 layout: block

侧栏

next/layout/_macro/sidebar.swig 中的 if theme.links 对应的 endif 后面。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{% if theme.recent_posts.enable and theme.recent_posts.sidebar %} <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts.layout }}"> <div class="links-of-blogroll-title"> <i class="fa fa-history fa-{{ theme.recent_posts.icon | lower }}" aria-hidden="true"></i> {{ theme.recent_posts.title }} </div> <ul class="links-of-blogroll-list"> {% set posts = site.posts.sort('-date') %} {% for post in posts.slice('0', '3') %} <li> <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a> </li> {% endfor %} </ul> </div> {% endif %}

搜索结果处添加

找到路径H:\hexo\themes\hexo-theme-next\layout\_partials\searchlocalsearch.swig文件 把<div id="local-search-result"></div>修改成以下内容(这里显示 15 篇)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="local-search-result"> {% if theme.recent_posts.enable and theme.recent_posts.search %} <div style="text-align: center;padding: 3px 0 0;"> <div style="margin-top: 20px;font-size: 18px;font-weight: 600;border-bottom: 1px solid #ccc;"> <i class="fa fa-{{ theme.recent_posts.icon }}" aria-hidden="true"></i> {{ theme.recent_posts.title }} </div> <ul style="margin: 0;padding: 0;list-style: none;"> {% set posts = site.posts.sort('-date') %} {% for post in posts.slice('0', '15') %} <li> <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a> </li> {% endfor %} </ul> </div> {% endif %} </div>

文章尾部添加

把代码加在H:\hexo\themes\hexo-theme-next\layout\_macro\post.swig里的相应位置(我加在 tags 后)

1 2 3 4 5 6 7 8 9 10 11 12 13 14

{% if not is_index and theme.recent_posts.enable and theme.recent_posts.post %} <div style="text-align: center;padding: 10px 0 0;"> <div style="margin: 60px 0px 10px;font-size: 18px;border-bottom: 1px solid #eee;"> <i class="fa fa-{{ theme.recent_posts.icon }}" aria-hidden="true"></i> {{ theme.recent_posts.title }} </div> <ul style="margin: 0;padding: 0;list-style: none;font-size: 11px;"> {% set posts = site.posts.sort('-date') %} {% for post in posts.slice('0', '5') %} <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>&emsp; {% endfor %} </ul> </div> {% endif %}

其他

可尝试将-date改为-update

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-01-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 侧栏
  • 搜索结果处添加
  • 文章尾部添加
  • 其他
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档