最近本站要更换域名，所以我就想做一个首页和文章内通知，于是就有了这篇文章。
首先打开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
}
@keyframes marquee {
0% { text-indent: 80em }
100% { text-indent: -100em }
}
.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: 本页面的自定义通知，每个页面都可以自定义
---
|
