Top

小吴原创-Martial X实现顶部通知


之前忙着改版博客,还要出去忙一堆事情,很久没更新博客了。今天就来最后一个小白教程吧。顶部通知,就是我博客上导航栏下方的那一行通知栏。
其实有人会问:有侧边栏的公告模块了还要顶部通知干嘛?对此,我的解答是:顶部通知主要是用于一些重大事件、活动等这一类的提醒,如果像这种类型的公告直接放在公告模块中,也许很少有人会主动去点开看,毕竟对于多数“懒癌”访客来说,还是开门见山直接一点。此外顶部通知中在后面加入“(详情请看公告)”这段内容时,也可起到一定的引导作用,指引访客去公告中查看详情内容。综上所述,有需求的话弄一个顶部通知还是很有必要的。

教程开始

添加布局

打开layout\_partial文件夹下的header.ejs文件,这里主要都是导航栏相关的布局,我们在代码最下方回车几下,粘贴以下代码:

1
2
3
4
5
6
7
8
9
10
11
<center>
<div class="notice-bar text-container">
<img class="notice-bar-img" src="公告、通知图标,建议64x64像素以下"/>
<!-- 如果是打字机效果,通知内容就不是写在这里而是js中 -->
<span class="text-static"></span>
<span class="text"></span>
<span class="cursor">|</span>
<!-- 不需要打字机效果的话直接用<span></span> -->
<!-- <span>我是通知内容(详情见公告)</span> -->
</div>
</center>

注意这个HTML中是带有打字机特效的,如果你不想要这个特效跟简单,把HTML中多余的span删了,就保留一个<span> </span>就可以了。然后后面的js也就不用添加了,直接在<span>标签中写就可以了。

添加CSS

再添加下样式,在source\less文件夹下,找到_base.less文件,用编辑器打开,在代码最下方回车几下,粘贴以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*整体样式*/
.notice-bar {
font-family:'微软雅黑','黑体';
width: 100%;
color: #333333;
text-align: center;
font-size: 16px;
margin-top: 15px;
margin-bottom: 15px;
line-height: 0px;
}

/*通知栏图标样式*/
.notice-bar-img {
vertical-align:middle;
width: 30px;
height: 30px;
display: inline-block;
}

添加打字机特效

打字机特效的话要用到js,还是以往的规则:
打开博客根文件夹下的source文件夹,进入js文件夹,没有就创建一个。,然后再创建一个名为typewriter.js的文件,打开后粘贴以下代码:

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
$(function() {
//添加你的文本
myPrint(["小白行动正在进行中!...(详情请看公告)"], 100);

function myPrint(arr, speed) {
var index = 0;
var str = arr[index];
var i = 0;
var add = true;
var mySetInterval = setInterval(function() {
// 延时4个字符的时间
if (i == str.length + 4) {
add = false;
// 如果是最后一个字符串则终止循环函数
if (index + 1 >= arr.length) {
clearInterval(mySetInterval);
}
} else if (i == -2) {
// 删除后延时2个字符的时间
add = true;
str = arr[++index];
}
setTimeout(function() {
if (add) {
i++;
$(".text").html(str.substring(0, i));
} else {
$(".text").html(str.substring(0, i - 1));
i--;
}
})

}, speed)
}

})

通知的内容就写在myPrint中就可以了。在Martial X主题文件夹的layout\_partial文件夹下,找到scripts.ejs文件,用编辑器打开,添加如下代码:

1
<script src="/js/typewriter.js"></script>

这样我们的顶部通知效果就完美实现了。

另外小吴博客官方出品的小白行动也正式圆满结束!感谢大家一直以来的关注和支持!在此衷心的感谢你们!



未经允许不得转载: 小吴博客 » 小吴原创-Martial X实现顶部通知