Hexo Next主题主页自设定文章显示字符数并添加“阅读全文”链接

发表于 更新于 分类于 阅读次数：

Hexo可以在 NexT 主题主页自设定文章显示字符数并添加“阅读全文”链接，以便用户点击后查看完整文章。以下是如何实现这一功能的步骤：

  1. 打开主题配置文件：
    进入你的 Hexo 博客根目录，找到 themes/next 文件夹，打开 next 主题的配置文件 _config.yml。

  2. 设置自动摘要：
    确保 auto_excerpt 被启用，并设置 auto_excerpt_length 来控制摘要的长度。

    1
    2
    3
    4
    # Automatically Excerpt
    auto_excerpt:
      enable: true
      length: 150  # 这里的 150 表示显示的字符数，可以根据需要调整

  3. 修改模板文件：
    打开 themes/next/layout/_macro/post.njk 文件，找到显示文章内容的代码部分，并进行修改。

    例如，找到显示摘要的代码：

    1
    2
    3
    4
    njk
    <p class="post-excerpt">
      {{ post.content | striptags | truncate(150) }}  <!-- 150表示字符数，可以调整 -->
    </p>

    在这段代码之后，添加“阅读全文”链接：

    1
    2
    3
    4
    5
    njk
    <p class="post-excerpt">
      {{ post.content | striptags | truncate(150) }}  <!-- 150表示字符数，可以调整 -->
    </p>
    <a href="{{ post.url }}" class="read-more">阅读全文 &raquo;</a>

  4. 添加 CSS 样式（可选）：
    为了让“阅读全文”链接看起来更美观，可以在 themes/next/source/css/_custom/custom.styl 文件中添加一些自定义 CSS 样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    styl
    .read-more {
      display: inline-block;
      margin-top: 10px;
      color: #1e90ff;  /* 链接颜色，可以根据需要调整 */
      text-decoration: none;
    }

    .read-more:hover {
      text-decoration: underline;
    }

  5. 清除缓存并重新生成：
    修改完成后，清除缓存并重新生成静态文件：

    1
    2
    3
    bash
    hexo clean
    hexo generate

通过这些步骤，你可以在NexT主题的主页文章摘要下添加一个“阅读全文”链接，用户点击该链接后可以查看完整文章。这样可以使主页更加简洁，并引导用户阅读完整内容。