【个人网站搭建】hexo框架+Next主题侧栏添加近期文章显示功能

淩亂°似流年 2022-10-27 13:51 184阅读 0赞

# 0x00 前言 #

文章中的文字可能存在语法错误以及标点错误，请谅解；

如果在文章中发现代码错误或其它问题请告知，感谢！

Hexo博客框架版本（hexo vesion）：5.3.0

Next主题版本：v5.1.4

# 0x01 实现方法 #

打开`themes/next/layout/_macro/sidebar.swig`文件，搜索`theme.social`代码模块，在该模块代码的`{% endif %}`增加如下代码：

{ # recent posts #}
    { % if theme.recent_posts %}
      <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', '5') %}
            <li class="recent_posts_li">
              <a href="{ { url_for(post.path) }}" title="{ { post.title }}" target="_blank">{ {  post.title }}</a>
            </li>
          { % endfor %}
        </ul>
      </div>
    { % endif %}

打开`themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl`文件，在文件末尾添加如下代码：

li.recent_posts_li { 
        text-align: cengter;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

打开`themes/next/_config.yml`文件，在文件末尾添加如下代码：

# 近期文章设置
    recent_posts_title: 近期文章
    recent_posts_layout: block
    recent_posts: true

效果显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center]  
以上。

参考文档：  
1.[https://blog.csdn.net/as480133937/article/details/100138838][https_blog.csdn.net_as480133937_article_details_100138838]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/45f36078b8064319bd9a3d924791c5cc.png
[https_blog.csdn.net_as480133937_article_details_100138838]: https://blog.csdn.net/as480133937/article/details/100138838