博客添加侧边栏近期文章

心已赠人 2021-09-04 08:16 372阅读 0赞

## 1.更改sidebar.swig文件 ##

前几天看到别人的博客有个近期文章版块，感觉挺好，于是就想给自己的博客也加这么个功能。由于使用的是next主题，而next默认是没有这个版块的，那就自己搞一个吧。废话不多说，直接上代码，挺简单的。

将此代码贴在`next/layout/_macro/sidebar.swig`中的`if theme.links`对应的`endif`后面，就ok了，是不是很简单。。。。

{% 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>
     <a href="{ { url_for(post.path) }}" title="{ { post.title }}" target="_blank">{ { post.title }}</a>
     </li>
     {% endfor %}
     </ul>
     </div>
    {% endif %}

## 2.修改主题配置文件 ##

为了配置方便，在主题的`_config.yml`中添加了几个变量，如下：

recent_posts_title: 近期文章
    recent_posts_layout: block
    recent_posts: true

## 3.注意事项 ##

同时运行之后发现有冲突如下

`Unhandled rejection TypeError: (((intermediate value)(intermediate value)(intermediate value) || _fn).call(...) || _fn) is not a function`

在主题的`_config.yml`中更改

在`links_layout`下方的links属性为false

如此： `links: false`(注意空格)

发表评论取消回复

表情：

评论列表（有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 136 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 337 阅读

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

0x00 前言文章中的文字可能存在语法错误以及标点错误，请谅解；如果在文章中发现代码错误或其它问题请告知，感谢！ Hexo博客框架版本（hexo vesion）：

淩亂°似流年/ 2022年10月27日 13:51/ 0 赞/ 213 阅读

相关 Ubuntu侧边栏添加Smartgit图标

smartgit提供的ubuntu客户端中使用smart.sh脚本进行启动，每次使用脚本有些不太方便，如果将其添加到侧边栏中可以方便使用。 ubuntu系统中侧边栏的程序一般

分手后的思念是犯贱/ 2022年07月05日 15:06/ 0 赞/ 246 阅读

相关 CSDN博客如何在侧边栏增加栏目内容为图片

csdn头像点击进入创作中心，进去栏目设置。可以新增栏目，然后点击写入标题，下面内容可是实现html,这就非常好办了，用一个img标签，再写一个草稿把你的图片的url复制贴到i

短命女/ 2022年05月08日 08:52/ 0 赞/ 202 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 394 阅读

相关博客JS生成侧边小标题导航

我们终究会走上个人博客这条道路，毕竟可以自己去书写自己博客页面，让自己的页面可自由变换更加美观，今天和朋友一起做了一个叫做侧边导航的东西，在这里做一个小小的记录。具体内容就

╰半夏微凉°/ 2021年12月01日 10:27/ 0 赞/ 316 阅读

相关右侧边栏实现（博客）

1.html 可以加一个遮罩层mask，nav如下： <nav> <div class="logo"><a haref="">生如夏花</a></di

快来打我*/ 2021年10月09日 03:52/ 0 赞/ 357 阅读

相关博客添加侧边栏近期文章

1.更改sidebar.swig文件前几天看到别人的博客有个近期文章版块，感觉挺好，于是就想给自己的博客也加这么个功能。由于使用的是next主题，而next默认是没有这

心已赠人/ 2021年09月04日 08:16/ 0 赞/ 373 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 699 阅读