Hexo打造可以自由配置的网站通知和页面通知

· 大约 400 个字 · 预计 2 分钟 读完
Hexo · 优化
Nodejs · Hexo · Next · 网站通知 · 网站广播

最近本站要更换域名，所以我就想做一个首页和文章内通知，于是就有了这篇文章。

首先打开 theme/next/layout/_layout.swig 文件找到如下代码中的 content-wrap 节点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

 <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            {% block content %}{% endblock %}
          </div>
          {% include '_third-party/duoshuo-hot-articles.swig' %}
          {% include '_partials/comments.swig' %}
        </div>
        {% if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {% endif %}
      </div>
    </main>

在 content-wrap 节点中添加下面代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{% if theme.main_notify.enable%}
      {% if theme.main_notify.pageshow %}
         {% if page.notify === '' %}
           <p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
         {% else %}
          <p class="content-notify marquee">{{ page.notify }}</p> 
         {% endif %}
       {% elseif page.notify !== '' %}
         <p class="content-notify marquee">{{ page.notify }}</p>
       {% elseif page.title === ''%}
         <p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
       {% endif %}
{% endif %}

上面这段代码的逻辑是判断是否要显示通知，我们实际的通知布局只就是 <p> 标签。

1

<p class="content-notify marquee">通知的内容</p>

接下来我们打开 theme/next/source/css/_custome/custome.style 文件来修饰p标签的样式。并且添加滚动动画。

 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
37
38
39
40
41
42
43

.content-notify a{
    color:#fff;
    border:0px;
}

.content-notify a:hover{
    color:#D0CFEC;
    border:0px;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

.marquee:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 80em }
    100% { text-indent: -100em }
}

/* ::before was :before before ::before was ::before - kthx */
.content-notify:before, .content-notify::before {
    z-index: 2;
    content: '';
    position: absolute;
    top: -1em; left: -1em;
    width: .5em; height: .5em;
}

.content-notify:after, .content-notify::after {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;
}

再下来我们需要去配置一下要显示的内容了，全局的显示内容和通知的开关在 theme/next/_config.yml 中。

1
2
3
4
5
6

#是否显示重要通知
main_notify: 
  enable: true
  #是否在文章页面显示如果显示可以  notify: 自定义内容
  pageshow: false
  notify: 重要通知：本站即将更改域名为dp2px.com，原域名sunhome.org.cn可继续使用

如果要在页面内显示自定义内容，可以添加 notify 来添加自定义内容。

1
2
3
4
5
6
7

---
title: Hexo打造可以自由配置的网站通知和页面通知
date: 2018-10-14 09:59:18
categories: [Hexo, 优化]
tags: [Nodejs, Hexo, Next, 网站通知, 网站广播]
notify: 本页面的自定义通知，每个页面都可以自定义
---