Top

小吴原创-Martial X实现文章分享


一些个人博客上的文章都会具有分享功能的,而且可以分享的平台有QQ、微信、新浪、QQ空间等等,那么使用hexo搭建的博客是否也具有文章分享功能呢?答案是肯定的,next主题就集成了分享功能,那Martial X主题也能有分享功能吗?答案是肯定的。

常见的社会化分享平台有Bshare分享、百度分享、Mob分享等等,按照一般原理来讲,都是傻瓜式的在模板合适的的位置中添加几行代码就能一步实现。

本篇教程将会讲解如何利用Mob平台的Web社会化分享功能来定制适用于Martial X主题的分享功能

大家可以去Mob注册个账号,按照官方的文档了解一下Mob的基本使用,我这边就直接全部放出我的代码了,大家直接用我的也可以。

引入js

1
<script type="text/javascript" id="-mob-share" src="https://f1.webshare.mob.com/code/mob-share.js?appkey=2050c5c7ce8f3"></script>

将如上代码复制粘贴到layout\_partial文件夹下的scripts.ejs文件中,注意别放到最上面,要放到jquery.min.js的引入代码的下面。
千万注意,如果你是从mob官方文档中复制来的js链接,前面是没有https的,必须要把http改成https,否则分享功能无法使用!

在文章模板中初始化分享功能

找到Martial X的文章模板,路径:layout\_partial\article.ejs,打开后找到如下代码:

1
2
3
<div class="article-entry" itemprop="articleBody">
<%- post.content %>
</div>

这段代码的意思是在这个位置显示文章内容,那么我们就需要在文章内容的下方添加分享功能,在这行代码后面我们回车几下,把如下代码复制粘贴上去:

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
<center><hr width="50%" style="margin-bottom: 10px"></center>
<center>· 分享也是一种美德 ·</center>
<center>
<div class="button button-main -mob-share-open"><b>分 享</b></div>
</center>

<div class="-mob-share-ui -mob-share-ui-theme -mob-share-ui-theme-slide-bottom" style="display: none">
<ul class="-mob-share-list" style="text-align: center;">

<li class="-mob-share-weixin" style="margin-right: 20px;"><p>微信</p></li>
<li class="-mob-share-qq" style="margin-right: 20px;"><p>QQ好友</p></li>
<li class="-mob-share-qzone" style="margin-right: 20px;"><p>QQ空间</p></li>
<li class="-mob-share-weibo" style="margin-right: 20px;"><p>新浪微博</p></li>
<li class="-mob-share-tencentweibo" style="margin-right: 20px;"><p>腾讯微博</p></li>
<li class="-mob-share-renren" style="margin-right: 20px;"><p>人人网</p></li>
<li class="-mob-share-kaixin" style="margin-right: 20px;"><p>开心网</p></li>
<li class="-mob-share-douban" style="margin-right: 20px;"><p>豆瓣</p></li>
<li class="-mob-share-youdao" style="margin-right: 20px;"><p>有道云笔记</p></li>
<li class="-mob-share-mingdao" style="margin-right: 20px;"><p>明道</p></li>
<li class="-mob-share-pengyou" style="margin-right: 20px;"><p>朋友网</p></li>
<li class="-mob-share-facebook" style="margin-right: 20px;"><p>Facebook</p></li>
<li class="-mob-share-twitter" style="margin-right: 20px;"><p>Twitter</p></li>
<li class="-mob-share-google" style="margin-right: 20px;"><p>Google+</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>

上面的代码中可以按需求删掉需不要的分享平台。

定义分享按钮的样式

当然,我们还需要一个自定义的按钮样式,在source\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
24
25
26
27
28
29
30
31
32
33
34
35
36
/*按钮基础样式*/

.button {
width: 80%;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
border-radius: 50px;
}

/*主题颜色按钮*/

.button-main {
/* 正常状态下按钮显示的背景色 */
background-color: white;
/* 正常状态下按钮中文字的颜色 */
color: #00B09F;
/* 正常状态下按钮边框的粗细及其颜色 */
border: 2px solid #00B09F;
}

.button-main:hover {
/* 鼠标经过按钮时显示的背景色 */
background-color: #00B09F;
/* 鼠标经过按钮中文字的颜色 */
color: white;
}

按钮中的颜色和其他样式可以自行修改。最后可以预览下效果。按下分享按钮后是从底部弹出一个盒子的形式,如果你想换成别的这种形式可以自行去参考Mob的官方文档
文档链接:http://wiki.mob.com/%E5%88%86%E4%BA%AB%E8%AE%BE%E5%AE%9A/

设置某一篇文章可隐藏分享功能

此外,有的朋友可能会问了,这样所有的文章包括一些特殊的独立页面(比如声明、协议这种页面)都具备了分享功能,那我想让某一篇文章不显示分享功能应该怎么做?

实现原理

这就要涉及到了Front-matter了,这个实现方法也是我从其他样式上参考过来的,“根据页面mathjax变量决定是否加载MathJax数学公式js”,这个位于footer.ejs文件中的一个注释启发了我。
也就是先在Front-matter中定义一个分享功能的逻辑型变量。再在文章要显示的分享按钮的位置中使用一个模板代码来判断页面的Front-matter中是否有一个分享功能变量且值为false,如果有这个变量分享按钮就不会显示了。来看看具体的实现步骤:

创建share.ejs文件

layout\_partial\文件夹下创建share.ejs文件,把刚才layout\_partial\article.ejs文件中的分享按钮的代码剪切到share.ejs文件中,代码如下:

1
2
3
4
5
<center><hr width="50%" style="margin-bottom: 10px"></center>
<center>· 分享也是一种美德 ·</center>
<center>
<div class="button button-main -mob-share-open"><b>分 享</b></div>
</center>

创建模板代码

回到layout\_partial\article.ejs文件中,在刚才剪切分享按钮代码的位置处粘贴以下代码:

1
2
3
<% if(page.share!==false){ %>
<%- partial('share') %>
<% } %>

测试

到博客目录下的source/_posts文件夹下随便找一篇你写的文章,在文章的最上方以 — 分隔的区域就是Front-matter,在里面输入: share: false
保存并预览下效果,你会发现这篇文章的分享功能就消失了。示例代码:

1
2
3
4
5
---
title: share设置某一篇文章可隐藏分享功能
date: 2018-11-19 22:03:40
share: false
---

另外再说个事,昨天下午不知道从什么时候开始我的博客就打不开了。因为之前我的博客主要是部署在Coding上的,我就开始检查Coding上的博客项目,弄了许久也不行。于是我也尝试和我一样博客也是部署在Coding上的几个友链,也是打不开,后来发现要挂VPN才能打开。。真是无语了。
我也和群里的朋友们交流了下,得出的结论是:Coding可能被DDOS攻击了
于是我赶紧把主站迁到Github(GitHub之前是备用站点),然后备用站点又部署到了Netlify平台上。
到今天上午,也不敢相信Coding真的攻击了,后来我特地装了360使用网络修复工具,修复了后也没用,卸载了360,开始尝试:Interent选项重置、hosts文件恢复默认、改DNS…
一番折腾下来,打开浏览器,访问部署在coding上的博客,至少不会出现打不开的错误页面了,但速度那叫一个慢呐!有时Chrome给你弹出个窗口:页面无响应。


我用站长工具测了下coding博客在国内的访问速度,地图上几乎一片红。。。直接Ping下域名:平均 = 3091ms。

这个事实真的让我不得不接受。同时我今天上午也ping了下刚迁回Github的博客域名( www.wushile.top ),40ms ——多么感人的数字啊,由此可见,Github和微软的合作还是很成功的。



未经允许不得转载: 小吴博客 » 小吴原创-Martial X实现文章分享