Top

小吴原创-Martial X添加公告模块


接下来这几天我会专门写几篇文章给大家公布Martial X主题的几种修改、增添功能的教程,内容都是我原创的,希望极少数朋友在转载教程时不要过分篡改文章内容,尤其是作者信息,当然你非这么做的话我也没啥办法,公道自在人心喽。

本篇教程的主题是在Martial X主题中实现公告模块。效果就如我博客上的那样,我就不放图了。

创建公告侧边栏模块

一、创建notice.ejs整体布局

这个文件很重要,它不仅控制着公告侧边栏的整体布局,还负责读取yml文件中设置的公告标题和内容,并最终显示在公告列表和弹出的窗口中。打开Martial X主题文件夹,进入layout\_widget下,创建一个名为notice.ejs的文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<section class='m_widget notice'>
<header class='header'>
<div><i class="fa fa-bullhorn fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;公告</div>
</header>
<div class='content'>
<ul class="entry" id="notice">
<% (config.widgets.notice||[]).forEach(function(item){ %>
<li><a class="flat-box">
<div onclick="mizhu.alert('<%= item.name %>', '<%= item.content %>');" class='name alert' title="<%= item.name %>">
<i class="fas fa-list-ul" aria-hidden="true"></i>
&nbsp;&nbsp;<%= item.name %>
</div>
</a></li>
<% }) %>

</ul>
</div>
</section>

二、增添侧边栏布局样式

这里的布局样式很少,它作用就是调节一下内容边距之类的,完全是参考侧边栏“分类”模块。在Martial X主题文件夹的source\less文件夹下,找到_widget.less文件,用编辑器打开,搜索.m_widget.categories这段代码,这是侧边栏“分类”的布局代码,把这一段的样式复制一份到上面,把复制好的这份样式改下样式名称,也就是把.m_widget.categories改成.m_widget.notice

三、显示和控制公告侧边栏

在Martial X主题文件夹的layout\_partial文件夹下,找到side.ejs文件,用编辑器打开后可以看到六段代码,这六段代码分别从上到下代表侧边栏的为每一个模块。在第一段代码,也就是:

1
2
3
<% if (config.widgets.author){ %>
<%- partial('../_widget/author') %>
<% } %>

的下面,添加如下代码:

1
2
3
<% if (config.widgets.notice){ %>
<%- partial('../_widget/notice') %>
<% } %>

这样我们的公告模块就可以在侧边栏正常显示了,如果你不想让公告显示在头像模块的下方,也可以自定义位置,把上面那段代码插在你想显示的侧边栏模块的上面或者是下面就OK了。大家可别急着预览哦,否则git可能会报错。

为公告模块添加弹窗的样式和所需的js代码

一、添加弹窗样式

在Martial X主题文件夹的source\less文件夹下,找到_base.less文件,用编辑器打开,你可以看到非常多的CSS代码,因为这里面包含了大部分Martial X中所用到的各种控件之类的样式,他们的值有一部分是通过调用_defines.less文件中设置的值进行计算后使用,或者直接进行使用的。
好了,介绍完了后在_base.less文件中代码的最下方回车几下,添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*弹窗样式*/

.win { display: none; }
.btns { text-align: right;margin-top: 30px;margin-bottom: 20px;margin-right: 20px;}
.mask-layer { position: fixed; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); background-color: black; z-index: 99998; top: 0px; left: 0px; }
.window-panel { position: fixed; z-index: 99999; top: 50%; left: 50%; background-color: white; border-radius: 4px; }
.window-panel .title-panel { position: absolute; height: 36px; width: 100%; border-radius: 4px 4px 0 0; }
.window-panel .title { position: absolute; height: 36px; width: 100%; text-align: center; border-radius: 4px 4px 0 0; line-height: 36px; vertical-align: middle; background-color: whitesmoke; /*标题背景色*/ border-bottom: 1px solid rgb(233, 233, 233); z-index: 1; }
.window-panel h3 {}
.window-panel .close-btn { display: block; text-align: center; vertical-align: middle; position: absolute; width: 36px; height: 36px; line-height: 36px; right: 0px; text-decoration: none; font-size: 24px; color: black; background-color: #DBDBDB; border-radius: 2px; z-index: 1; }
.window-panel .close-btn:hover { background-color: #ccc; }
.window-panel .body-panel { width: 100%; top: 36px; border-radius: 0 0 4px 4px; z-index: 1;background: #fff;}
.window-panel .body-panel.toast-panel{ position: absolute;color:#fff;background:rgba(0,0,0,0.3); }
.window-panel .content, .window-panel{ margin-top: 30px;margin-bottom: 10px; }
.window-panel .content { padding: 10px 10px 0px 10px; font-size: 16px; min-height: 40px;}
.window-panel .content.toast-content{padding:0;min-height:0;}
.window-panel .w-btn { display: inline-block; width: 70px; height: 36px; line-height: 26px; background-color: #00B09F; color: white; cursor: pointer; text-align: center; border-radius: 20px; text-decoration: none; margin: 0 10px 0px 10px; border: none; }
.window-panel .w-btn:hover { background-color: #00A695; }
.window-panel .w-btn:focus { outline: 0 none; }

.alert {
width: 90%;
}

有点多哈,不过没关系,也就是几个键的事情,别忘了保存哦。

二、添加js代码

再是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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var mizhu = new function() {


var ww = window.innerWidth
if (ww < 768) {
this.width = $(window).width() * 0.8;
this.height = 172;
} else {
this.width = $(window).width() * 0.5;
this.height = 172;
}
this.close = function() {
$('.win iframe').fadeOut();
$('.win').fadeOut("fast");
setTimeout(function() {
$('.win iframe').remove();
$('.win').remove();
}, 200);
};

this.open = function(width, height, title, url, closed) {
this._close = function() {
this.close();
if($.isFunction(closed)) closed();
};
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="mizhu._close();" class="close-btn" title="关闭">×</a><iframe class="body-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src=""></iframe></div></div>';
var jq = $(html);
jq.find(".window-panel").height(mizhu.height).width(mizhu.width).css("margin-left", -mizhu.width / 2).css("margin-top", -mizhu.height);
jq.find(".title").find(":header").html(title);
jq.find(".body-panel").height(height - 36).attr("src", url);
jq.appendTo('body').fadeIn("fast");
$(".win .window-panel").focus();
};

function messageBox(html, title, message, type) {
var jq = $(html);
if(type == "toast") {
jq.find(".window-panel").width(message.length * 20).css("margin-left", -message.length * 20 / 2).css("margin-top", -mizhu.height / 2);
} else {
jq.find(".window-panel").width(mizhu.width).css("margin-left", -mizhu.width / 2).css("margin-top", -mizhu.height / 2 - 36);
}
if(valempty(title)) {
jq.find(".title").remove();
jq.find(".window-panel .body-panel").css("border-radius", "4px");
} else {
jq.find(".title").find(":header").html(title);
}
jq.find(".content").html(message.replace('\r\n', '<br/>'));
jq.appendTo('body').fadeIn("fast");
$(".win .w-btn:first").focus();
}

this.confirm = function(title, message, selected) {
this._close = function(flag) {
if(flag) {
$(".win").remove();
selected(flag);
} else {
this.close();
};
};

var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="mizhu._close(false);">取消</button><button class="w-btn" onclick="mizhu._close(true);">确定</button></p></div></div></div>';
messageBox(html, title, message);
};

this.alert = function(title, message, ico) {
var icon = "";
if(!valempty(ico)) {
icon = '<p class="btns" style="margin-bottom:-15px;"><img width="70px" height="70px" src="images/' + ico + '.png"></p>';
}
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><div class="body-panel">' + icon + '<p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="mizhu.close();">确定</button></p></div></div></div>';
messageBox(html, title, message);
}

this.toast = function(message, time) {
var html = '<div class="win"><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="body-panel toast-panel"><p class="content toast-content"></p></div></div></div>';
messageBox(html, "", message, "toast");
setTimeout(function() {
mizhu.close();
}, time || 3000);
}
};

function valempty(str) {
if(str == "null" || str == null || str == "" || str == "undefined" || str == undefined || str == 0) {
return true;
} else {
return false;
}
}

一条龙啊~ 这段js代码中也包含了窗口的布局,有需求的可以自行修改,但得悠着点,稍一改错可能布局就不对了,到时候又来这抠代码,嘿嘿。

三、部署js代码(两种方式)

js代码部署的话有两种方式,一种是把代码直接复制粘贴到主题文件夹的layout文件夹下的layout.ejs文件的</body>前就可以了。
但在这里我并不推荐这种方式,因为我自从上次写了“网站动态背景(动态图)和静态背景(背景图)的主题美化”这篇文章后就开始发现,直接在layout中粘贴js代码一段两段还没有什么大问题,但是代码一多起来,博客打开速度会受到一定影响。
所以我推荐的部署方式是引入,就是把代码以文件的形式放到对应的文件夹中,并通过html文件引入使用,这样一来不会影响网站的打开速度,二来也方便后期对代码的维护。那咱们就来看看部署过程吧:

  1. 打开你博客根文件夹下的source文件夹,新建一个名为js的文件夹,它用来存放各种js文件并通过html代码引入,然后再创建一个名为ui.js的文件,打开后把上面的js代码粘贴进去保存即可。
  2. 在Martial X主题文件夹的layout\_partial文件夹下,找到scripts.ejs文件,用编辑器打开,这里面是主管js的,在代码中的最上面可以看到这一段代码:
1
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

千万记住,这段代码必须是在最上面的,因为它引入的的jquery库是许多js控件、动画这些都要用到的,如果在它被没有引入的或者引入顺序出错的情况下,一些通过js实现的东西有可能会出现异常甚至是失效。
那我们就在它的下面添加如下代码:

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

这样,弹窗的js代码就这样被进入啦。还是怕大家搞错,再放张图吧!

配置yml文件

终于到了最后一步了,打开博客主题的_config.yml文件,配置内容为:

1
2
3
4
5
6
7
8
9
10
# 公告
notice:
- name: 公告标题,字数不建议太多
content: 在弹出窗口中显示的公告标题</br></br>
公告内容。内容不能太多,否则窗口的在没有滚动条的情况下会超出屏幕往下显示,不仅不能滑动查看下面的内容,还会遮挡住关闭窗口的按钮。</br>
content中可以使用一些简单的html标签,比如修饰文本的<b>、<u>、<i>,还有<a>链接标签、也支持style属性等等,这些大家可以自行去尝试。
- name: xxxxxxx
content: (xxxx.xx.xx 发布)</br></br>
1. xxxxxxx</br>
2. xxxxxxx

除了在示例中我说了一些需要注意的地方,我还要另外强调一点,那就是对齐格式,对齐格式如果不对,git直接给你一个报错让你头疼,我来举一个错误的例子
错误的例子

1
2
3
4
5
- name: TEST
content: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</br>

像这样git肯定会报错的。正确的是content内容必须要缩进到“:”后。



未经允许不得转载: 小吴博客 » 小吴原创-Martial X添加公告模块