构建 Hexo Next 主题的源码

发表于 阅读次数： 评论数： 本文字数： 384 阅读时长 ≈ 1 分钟

核心源文件

核心布局模板文件

  • /themes/next/layout/_layout.njk
  • /themes/next/layout/_macro/post.njk

更改 Next 主题的源码

NJK 模版文件判断页面类型

  • 判断是否为首页
1
{%- if is_home() %} ... {%- endif %}
1
{%- if not is_home() %} ... {%- endif %}
1
{%- if is_index %} ... {%- endif %}
  • 判断是否为文章页
1
{%- if is_post() %} ... {%- endif %}
1
{%- if not is_post() %} ... {%- endif %}

引入自定义的 NJK 模版文件

默认以 /theme/next/layout 为根目录，不需要使用 ../ 符号来引用上级目录中的模版文件

1
{{ partial('_partials/_custom/adsense/post-footer-ads.njk') }}

下述这种引入方式只能引入当前目录下（包括子目录）的模版文件，无法使用 ../ 符号来引用上级目录中的模版文件

1
{%- include '_custom/adsense/post-footer-ads.njk' -%}

NJK 模版文件获取 Hexo 的配置信息

获取 Hexo 的配置文件 _config.yml 的内容：

1
{%- if config.excerpt_description %} ... {%- endif %}

或者

1
2
3
4
5
6
<div style="text-align:center">
  <ins class="ads"
       style="display:block"
       data-ad-client="{{ config.adsense.publisher_id }}"
       data-full-width-responsive="true"></ins>
</div>

NJK 模版文件获取 Next 的配置信息

获取 Next 主题的配置文件 /theme/next/_config.yml 的内容：

1
{%- if theme.excerpt_description %} ... {%- endif %}

或者

1
2
3
4
5
6
<div style="text-align:center">
  <ins class="ads"
       style="display:block"
       data-ad-client="{{ theme.adsense.publisher_id }}"
       data-full-width-responsive="true"></ins>
</div>

NJK 模版文件获取文章的 Meta 信息

1
{%- if post.description and theme.excerpt_description %} ... {%- endif %}

覆盖 Next 默认的 CSS 样式

1
2
3
.vpreview p {
  color: #444 !important;
}

取消 Next 默认的 CSS 样式

1
2
3
.comments {
  overflow: unset;
}