空梦博客

使用material-x主题如何自定义添加侧边栏小部件? 究竟如何添加?我们来一起看看吧!

描述

先上Material X主题官网 戳我进官网 ^_^# 
官方文档 戳我进官方文档
官方主题开源网站 戳我赢大奖啊ヽ(≧Д≦)ノ


注:我在这里就不多说了,对于如何搭建的想必你也知道怎么搭建。对于不知道如何搭建的朋友请看我前面的文章希望可以帮到你!好了,我也就不废话了。我们开始吧!


开始教程

第一步

首先我们需要在主题的这个[\themes\material-x\layout_widget]目录下创建你需要的新添加的侧边栏小部件的的名字xx.ejs  例如:tq.ejs   如下图

相应的目录下新建了一个tq.ejs 的文件



第二步

在新建的tq.ejs写入你的自己需要添加的小部件配置代码了,我这里就拿我的侧边栏天气的插件做案例吧!

以下是代码

1
2
3
4
5
6
7

<section class='widget <%- item.widget?item.widget:'tq' %>'>
<%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
<div class='content <%= theme.style %>'>
<%- markdown(item.body) %>
</div>
</section>

如下图



第三步

写入代码完成后我们就要去主题文件下的_config.yml文件下配置啦! 目录[\themes\material-x_config.yml] 这里呢,也是一样的我们需要新建一个widget 这个字段在官网也有教程,我们在这里也就不多说了哈~ (๑乛◡乛๑)

以下是代码

1
2
3
4
5

- widget: tq
icon: fas fa-cloud
title: 天气预报
body: '<iframe name="weather_inc" src="https://i.tianqi.com/index.php?c=code&amp;id=7" width="100%" height="100" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="padding-left: 10px;"></iframe>'

如下图



这里介绍一下widget以下所用到的字段:

  • icon 小部件的左上角的图标
  • title小部件的名称
  • body小部件所需要的配置文件代码

闲言碎语
这里都配置完成后我们就去使用。如何使用呢?这时就要看配置文件里面的说明了!或者看官方文档也是可以的,但是呢有很多人看不懂官方文档主要写的太官方化,这让我们这些小白何以理解啊!嘿嘿!(๑乛◡乛๑) (小声bb)m(-_-m)~你特喵的还废话~ 还不赶紧继续写教程。。。。 咳咳,话不多说开干!命苦啊!(ㄒoㄒ)

第四步

这一步呢其实挺简单的,也就像是java对象进行调用就行了   (等会,说什么java啊!写的是hexo博客教程还跑去java了。。.(→_→)一脸嫌弃) 好好,我们言归正传哈! 这么也就是调用一下刚刚写的那个widget字段配置就行了!这里说一下啊!官方给了我们自由选择的模式添加,例如在主页面的侧边栏添加啊、或者文章页面啊!等等。。这个看自己好吧,看自己需求自由发挥添加,毕竟谁都不想一直跟着别人走啊,总要玩点自己的新花样吧!Σ(TωT)努力–

如下图

这里是主题目录下的_config.yml配置



可以看到,这里我添加的两处位置,一个是主页,一个是文章的侧边栏 仔细看图中有红色圈圈的就可以明白了!已经注明很清楚了!

问答
问:有盆友问我,这就完了?这么简单???
答:别着急嘛!最开始我也是这样认为但是呢?其实不是的,这样的话你是无法展示出来的,代码是也不会生效。其实一开始我也是这样认为的,但是在我测试的时候却不是我想的那样。。。咋办捏,这时我们就要去考虑一个问题了,既然是新添加的小部件那我们肯定要去配置哪些小部件是生效的哪些不是,那么问题来了。这个主题配置究竟是不是这样子的呢?谁也说不准那就让我们继续往下看吧!

第五步

闲言碎语
看到这里我们就要执行最后一步的配置啦!(是不是很开心!我也要成功啦!其实是废话真tm多,感觉自己像一个 S*  一样m(-_-m)~)咳咳,让我们言归正传 ,(其实归正几次了,都被我跑遍了! 好了,不说这些了!)

首先呢这第五步啊!就是要在主题目录的[\themes\material-x\layout_partial] 路径下找到side.ejs side:意思就是侧面、旁边然后进行添加我们自己新建的小部件,这里通俗点说,也就是需要在这里激活你所新建的小部件。
如下图

图中所示:找到主题目录文件夹下的side.ejs



图中所示:添加的新键的tq小部件的调用



好了,这呢。也算是完成了!我们快去试试吧!

(此时此刻都已经按耐不住我那迫不及待的小心脏了!O(∩_∩)O 想要赶紧去一探究竟啦!)

我们在git 执行以下命令

1
2
3
hexo clean
hexo generate
hexo deploy

好,执行完去看页面看效果!

最后的效果



快看,我们成功了~ 问题是不是解决了? 哈哈哈!所有的努力没白费!

总结

闲言碎语
好啦,本次教程到此处就已经结束了,此教程呢也是为小白打基础所发布的,再说连小编我也是小白啊!
( ^∀^) 本是同根生,相煎何太急。(释义:煮豆来做豆羹,过滤的豆子做成汁。豆杆在锅下燃烧,豆子在锅里哭泣。豆杆和豆子本是从同一条根上生长出来的,为什么要相互煎熬逼迫得那么狠呢?) 虽说油炸起来比较香一些。。。但是…(你tm 又跑偏了!你在总结,总结。回来) 哈哈!真S* 我们言归正传 (呃,这个 好像归了好几次了… 算了,三分归元气嘛~ )好,话题结束


本次总结
我们在做新建小部件或者插件的时候,需要考虑的问题也就是这个配置到底是不是会自动配置为我们所调用呢?经过我们一番测试来看,我们上面的猜测是对的。这个主题呢~ 官方写的是死的,也就是说必须指定那些已经配置过的小部件然后才能调用和使用,所有呢我们在新建部件的话就要按照这个方法进行配置自行添加自己新建的部件啦! 好啦,本期文章到此结束啦!(哎哟,可算结束了,累死我了!又是上传图片、又是打字总结的,嘘!这话不要讲,这么多朋友肯定会给你动力啊!加油!)
如果您觉得有什么问题可以在下方留言哦!本帖留言已开! 好了,今天就说这么多,我们下期再见!拜拜!

Y(・∀・)Y 蟹,请我喝瓶可乐吧!
  • QQ
  • AliPay
  • WeChat


本文作者: Mr. 空梦
发布时间: 2020-01-11
最后更新: 2020-01-16
本文标题: 使用material-x主题如何自定义添加侧边栏小部件?
本文链接: https://kmbk0.top/2020/01/11/使用material-x主题如何自定义添加侧边栏小部件?/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!

 评论