为 Next 主题增加「Hosted by Coding Pages」

发表于

本文参与 Coding 征文计划

之前博客一直在 Github Pages 中，但是遇到速度、百度 SEO、不支持 HTTPS 等等问题，因此准备迁移至 Coding Pages 中，由于不想有三秒的跳转，因此给博客添加「Hosted by Coding Pages」文本。

目标：通过 Next 主题配置文件开关「Hosted by Coding Pages」文本的显示。

最终效果：

Step1. 添加配置项

在 Next 的主题配置文件（themes/next/_config.yml）中增加配置项

打开配置文件，在文件的任意位置（推荐放置于 copyright 配置下面）添加以下行

1
2
# Footer `Hosted by Coding Pages`
coding: true

Step2. 添加文本项

在 Next 的页脚配置文件（themes/next/layout/_partials/footer.swig）中，找到 theme-info 块，在其后添加以下内容

1
2
3
4
5
{% if theme.coding %}
<div class="coding-pages">
  <p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>
</div>
{% endif %}

Step3. 设置样式

在 themes/next/source/css/_common/components/footer/footer.styl 文件中

将以下部分

修改为