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

发表于 | 更新于 | 分类于 ，

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

首先打开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: [Nodejs, Hexo]
tags: [Nodejs, Hexo, Next, 网站通知, 网站广播]
notify: 本页面的自定义通知，每个页面都可以自定义
---