0%

《Hexo博客搭建维护》 — 5、更改首页以及添加置顶功能

>>> 更改首页

默认首页是通过 hexo-generator-index 插件生成的,页面显示是通过 themes/next/layout/index.swig 文件展现的

themes/next/layout/index.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template with context %}

{% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}

{% block content %}

<div class="posts-expand">
{%- for post in page.posts.toArray() %}
{{ partial('_macro/post.swig', {post: post, is_index: true}) }}
{%- endfor %}
</div>

{% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}

觉得不满意,发现归档页面挺适合做首页的。于是将 index.swig 改成了一下内容

themes/next/layout/index.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template with context %}
{% import '_macro/top.swig' as top with context %}
{% import '_macro/sidebar.swig' as sidebar_template with context %}

{% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}

{% block content %}

{#####################}
{### ARCHIVE BLOCK ###}
{#####################}
<div class="post-block">
<div class="posts-collapse">

{{ post_template.render(page.posts) }}

</div>
</div>
{#########################}
{### END ARCHIVE BLOCK ###}
{#########################}

{% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}

>>> 首页添加置顶功能

效果如下:

置顶

首先新建文件 themes/next/layout/_macro/top.swig, 内容如下

themes/next/layout/_macro/top.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% macro render(posts) %}
{%- set current_year = '1970' %}
<div class="collection-year">
<{%- if theme.seo %}h2{% else %}h1{%- endif %} class="collection-header">置顶</{%- if theme.seo %}h2{% else %}h1{%- endif %}>
</div>
{%- for post in posts.toArray() %}
{%- if post.top %}
<article itemscope itemtype="http://schema.org/Article">
<header class="post-header" style="color: red">

<div class="post-meta">
<time itemprop="dateCreated"
datetime="{{ moment(post.date).format() }}"
content="{{ date(post.date, config.date_format) }}">
{{ date(post.date, 'MM-DD') }}
</time>
</div>

<{%- if theme.seo %}h3{% else %}h2{%- endif %} class="post-title">
{%- if post.link %}{# Link posts #}
{%- set postTitleIcon = '<i class="fa fa-external-link"></i>' %}
{%- set postText = post.title or post.link %}
{{ next_url(post.link, postText + postTitleIcon, {class: 'post-title-link post-title-link-external', itemprop: 'url'}) }}
{% else %}
<a style="color: red" class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
<span itemprop="name">{{ post.title or __('post.untitled') }}</span>
</a>
{%- endif %}
</{%- if theme.seo %}h3{% else %}h2{%- endif %}>

</header>
</article>
{% else %}
{%- endif %}
{%- endfor %}
{% endmacro %}

然后修改 index.swig,如下(其实就加了一行)

themes/next/layout/index.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template with context %}
{% import '_macro/top.swig' as top with context %}
{% import '_macro/sidebar.swig' as sidebar_template with context %}

{% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}

{% block content %}

{#####################}
{### ARCHIVE BLOCK ###}
{#####################}
<div class="post-block">
<div class="posts-collapse">

{{ top.render(page.posts) }}
{{ post_template.render(page.posts) }}

</div>
</div>
{#########################}
{### END ARCHIVE BLOCK ###}
{#########################}

{% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}

最后在你想置顶的文章的头部加一个top值(值可以是任意值),如下

1
2
3
4
5
6
7
8
9
10
---
title: 4、收到评论自动发送邮件通知
date: 2020-02-02 15:32:11
categories:
- hexo博客搭建
tags:
- K8s
- hexo部署
top: 1
---

>>> 结束语

其实你还可以通过top的值来实现置顶文章的排序等等

改改 themes/next/layout/_macro/top.swig 文件的代码即可




微信关注我,及时接收最新技术文章