ZigZagK的博客
MDUI2333 - 基于MDUI的单栏typecho主题
2020年2月19日 13:32
Typecho
查看标签

MDUI2333

这是一款基于MDUItypecho主题。

它并不是为了纯粹的美观而设计出来的产物,它甚至有些随意,您可以从它的起名和logo看出作者并没有花费较多精力去给它进行最起码的装饰。

它诞生的最初目的是为了给作者提供一个学习前后端的平台,添加的各种功能都是源自于作者自身的需求。渐渐地,它成为了作者在网络中自留地的一部分。

作者倾注了很多的时间精力在该主题上,可以说,它在作者心目中的地位不仅仅只是一些代码构成的主题,而是跨入前后端的大门。

但是,如你所见,使用它并不需要任何的费用,只需要Powered by ❤。作者从一开始就打算将其开源,就当做是在众多大佬精美的主题前班门弄斧吧。

最后,希望你能喜欢这款简陋的主题。

PS:强烈建议去github下载最新版,备用下载地址可能会存在问题。

开发小记

最近完成了MDUI2333的重构,才惊讶地发现我在2018.10.24~2020.2.19竟然提交了108次commit(虽然有很多是假的)。想了想我也一个多月没水文章了,我觉得是时候写一下MDUI2333的开发历程了。

起源

因为Wordpress的markdown功能不完善(复杂公式无法解析等问题),某一天看到了typecho原生支持markdown,试了一下发现很符合我的要求,就换到了typecho。

然后就是找主题,发现了原来用的Hexo主题Material有黎明余光大佬的移植版,就魔改之后用上了。

之后出现了两个很奇怪的契机👀。由于切换页面时音乐会停止播放,我了解到了PJAX无刷新,但是同时发现我并没有能力给Material加上(那时候我啥都不懂,虽然现在也差不多)。然后同一时期我发现了MDUI(大爱Material Design)这个框架。

这两个契机使我产生了自己写主题的想法。我那时候想,就当是给自己写着玩的(顺便通过这个机会学习一下竞赛之外的东西),也不需要在意丑的一批被别人批判啥的——这个想法现在也没有变(当然有人喜欢是最好的嘛)

折腾

一个只会基础HTML,css,js、根本不会PHP的人总不能有太高的要求吧。所以MDUI2333从一开始就只打算实现一个信息竞赛博客该有的功能:公式,代码高亮,还有我的执念全站PJAX。

在开发期间,遇到什么我需要的功能,就到网上搜索一下,找到能用的,不考究原理就直接复制过来,导致主题代码风格千奇百怪,冗余代码肉眼可见。

于是这个主题就在我照着MDUI文档,一点点修改默认主题,功能东拼西凑的情况下诞生了第一个版本。


接下来就是对亲孩子动刀子,什么奇怪的东西都往上加(不过现在发现好像加的都挺有用的 我的滑稽会冒汗 )。结果后来的版本就处于这样的状态:加了新东西,修锅修半天,再加新东西,连原来的一起修锅修半天。

不过在写主题的过程中,我渐渐地了解到了更多相关的知识,恐怕这才是更重要的吧XD。

重构

在最近这段时间,我对主题里代码风格不一和冗余的代码逐渐无法忍受,感觉对不起自己的第一个项目,于是着手重构。重构过程比较顺利,并且自己写了更多的功能上去,虽然耗时较长,但是我对最终的结果还是非常满意的。

感想

个人感觉,自己写一个主题,不是说一定要多少华丽,满足别人的要求,毕竟写主题的动机一定是自己的需求。写主题的过程也是自己不断学习的过程,只要不随意弃坑,在网络的帮助下达成自己想要的效果迟早是能做到的(比如AJAX评论,只要弄懂原理就简单了嘛QAQ)。

而且对自己主题开刀的感觉真的很棒啊!对一个地方不断调整只为了自己看着爽,这不是最原始的快感嘛😉!

版权声明:本博客所有文章除特别声明外,均采用 CC BY 4.0 CN协议 许可协议。转载请注明出处!
请不要发毫无意义或内容不文明的评论。与本文无关评论请发留言板!
2023-10-28 11:48:27玄阳
2023-10-28 11:48:27

音乐播放器怎么搞

访客
2022-12-13 17:16:01EchoicManter
2022-12-13 17:16:01

我是白痴qwq
不知道怎么用友情链接模板qwq

访客
2022-12-10 01:34:43小忧忧
2022-12-10 01:34:43

您好,想请教大佬个问题
我使用MDUI写了个个人主页,页面切换使用到了PJAX来更新#main的内容
其中一些文字段落我使用了Tab选项卡插件,通过PJAX加载出来之后就失效了(可扩展面板也失效)
我尝试在JS中添加了

document.addEventListener('pjax:complete', function () {mdui.mutation();mdui.Tab();});

但好像没什么用…我没有JS基础知识,大佬带带 向大佬低头

访客
2022-12-10 02:04:49ZigZagK
2022-12-10 02:04:49
@小忧忧 

PJAX的话就不能用“自定义属性调用”方法,而要使用“JavaScript 调用”(参照Tab 选项卡)。
每次PJAX跳转之后,都要重新new一个TAB对象出来,比如我主题里:

function QAQTABreload(){ //表情框监听重载
    QAQTab=new mdui.Tab('#QAQTab');
    $('#QAQ').on('open.mdui.dialog',function(){QAQTab.handleUpdate();});
}

#QAQTab是你的TAB对象,比如我主题里:

<div class="mdui-tab mdui-tab-full-width" id="QAQTab">

然后PJAX跳转之后调用QAQTABreload();
不知道有没有更简单的方法,反正我是这么做的。
无奈.jpg

博主
2022-12-10 02:11:38小忧忧
2022-12-10 02:11:38
@ZigZagK 

WC,突然醒悟了,谢谢大佬(刚发完评论准备睡,没想到大佬也没睡) 或许这就是大佬

访客
2022-12-10 02:13:30ZigZagK
2022-12-10 02:13:30
@小忧忧 

大学生周末是这样的 我的滑稽会冒汗

博主
2022-12-10 11:53:39小忧忧
2022-12-10 11:53:39
@ZigZagK 

佬那啥 我的滑稽会冒汗,我尝试了下,但好像还有哪里不对,没有作用
我参考MDUI文档,我写了这样的JS

   function tab() { //tab组件监听重载
    var $ = mdui.$;
    var inst = new mdui.Tab('#tab');
    $('#tab').on('change.mdui.tab', function (event) {
        console.log('event: change; tab: ' + event._detail.index);
    });
}

PJAX跳转后调用的代码

// 重载入
document.addEventListener('pjax:complete', function () {
    // 需要重载的 JS 函数
    tab();
});

然后这是我页面中tab选项卡组件的HTML

<div class="mdui-tab" mdui-tab id="tab">

但好像没起作用 无奈.jpg

访客
2022-12-10 15:10:11ZigZagK
2022-12-10 15:10:11
@小忧忧 

看起来好像没啥问题,新版的MDUI我也没用过,不太会

博主
2022-12-11 17:23:12小忧忧
2022-12-11 17:23:12
@ZigZagK 

解决了!我是这样写的

// 通过 JavaScript 调用tab组件
function pjax_reload() {
    var tab = new mdui.Tab('#tab');
}
pjax_reload();
// pjax后重载
$(document).on('pjax:complete', function () {
    pjax_reload();
});

生无可恋.jpg

访客
2022-12-10 22:53:47小忧忧
2022-12-10 22:53:47
@ZigZagK 

好像知道点原因,我的页面上的组件如果使用这个写法无法正常显示

function tab() {
var tab = new mdui.Tab('#tab');
}

但是如果这样写是可以成功调用,正常显示

var tab = new mdui.Tab('#tab');

但是由于我没有JS基础知识,不知道怎么在PJAX后重新调用这个用var写法的变量…… 生无可恋.jpg
大佬能再带带不…… 以头抢桌尔

访客
2022-12-10 15:13:41小忧忧
2022-12-10 15:13:41
@ZigZagK 

生无可恋.jpg 好吧,我再研究研究,麻烦大佬了 无奈.jpg

访客
2022-03-29 23:02:34琳琅天上
2022-03-29 23:02:34

亲爱的作者:1音乐插件在手机端体验很差。2搜索功能是否也能美化成MD风格。3貌似后台也能美化了,期待统一风格,那都能看做单独的系统了233。4隔壁DreamCat的反应速度好像快些,期待更新

访客
2022-03-30 11:51:46ZigZagK
2022-03-30 11:51:46
@琳琅天上 

感谢你对主题的支持 👍
1和2都不是我自己写的,不是很方便改
3有考虑过,但最近忙于学业(摸鱼),主题短期内停止更新
4可能是我优化做的不好,但我对前后端也只是一知半解,也不太会优化

博主
lo
2021-10-17 11:18:34lo
2021-10-17 11:18:34

文章短代码是用插件还是怎么实现的,教教我好吗 😗

访客
2021-10-17 12:09:47ZigZagK
2021-10-17 12:09:47
@lo 

大概就是在主题代码里用正则替换,把短代码替换成HTML

博主
lo
2021-10-17 14:29:50lo
2021-10-17 14:29:50
@ZigZagK 

我去研究一下🙆‍♂️🙆‍♂️

访客
2021-08-12 20:06:54
2021-08-12 20:06:54

问一下评论邮件发送那个没有发行版需要一个一个复制很麻烦,有码云的吗?或者可以上传github的发行版

访客
2021-08-12 21:04:12ZigZagK
2021-08-12 21:04:12
@咯 

有发行版啊,请查看MDUI2333的github页面,有各种插件的链接

博主
Nose Sans
2021-01-15 17:59:32Nose Sans
2021-01-15 17:59:32

这个前端竟是该死的强 我的滑稽会冒汗

访客
2020-11-11 23:07:05zizdog
2020-11-11 23:07:05

后生可畏,这模板真不错,好的地方真好。
我最近刚好写了一个,但是移动端样式还没定,觉得你这个挺好。

访客
2020-11-11 23:19:39ZigZagK
2020-11-11 23:19:39
@zizdog 

谢谢夸奖QwQ

博主
2020-08-08 08:18:02草方块
2020-08-08 08:18:02

从别人的博客看到,真的不错

访客
2020-08-09 11:22:54ZigZagK
2020-08-09 11:22:54
@草方块 

感谢关注QwQ

博主
倾寒
2020-06-01 20:20:24倾寒
2020-06-01 20:20:24

主题超级棒 😀

访客
2020-06-01 22:40:44ZigZagK
2020-06-01 22:40:44
@倾寒 

谢谢 😆

博主
2020-04-26 23:02:13油油
2020-04-26 23:02:13

今天上半年估计能更新mdui了

访客
2020-04-27 22:10:15ZigZagK
2020-04-27 22:10:15
@油油 

吼啊,超期待新功能! 🤩

博主
2020-04-26 21:24:28艾尔
2020-04-26 21:24:28

好看 递茶

访客
2020-04-26 11:15:41模板迷
2020-04-26 11:15:41

向大佬低头 老大,这模板好看,转载了,不谢了

访客
2020-04-27 21:59:16ZigZagK
2020-04-27 21:59:16
@模板迷 

转载没有问题,注明出处即可 😀

博主
2020-04-21 14:47:41魔法樱
2020-04-21 14:47:41

您好 请问一下为什么我站的播放器和您的显示不一样呢 求解 递茶

访客
2020-04-21 15:47:21魔法樱
2020-04-21 15:47:21
@魔法樱 

折腾好力((

访客
2020-04-08 11:32:13WhiteNX
2020-04-08 11:32:13

MDUI赛高! 滑天下之大稽

访客
2020-03-20 14:35:14魔法樱
2020-03-20 14:35:14

评论区都是dalao (/w\) 蔡鸡先膜拜一波 (ฅ´w`ฅ)

访客
2020-03-19 17:13:51Bhao
2020-03-19 17:13:51

ohhhhh!也是mdui!爱了爱了!qwq

访客
2020-03-19 19:10:05ZigZagK
2020-03-19 19:10:05
@Bhao 

MDUI大赞 👍 👍 👍 我的滑稽会冒汗

博主
2020-04-07 09:27:58233333
2020-04-07 09:27:58
@ZigZagK 

大爱MDUI

访客
2020-02-23 12:21:59初夏阳光
2020-02-23 12:21:59

ZigZagK:切换页面时音乐会停止播放→需要Pjax→自写主题
我:切换页面时音乐会停止播放→需要Pjax→砍掉功能

(要什么音乐,对,我不需要...不需要 生无可恋.jpg

访客
2020-02-23 14:08:05ZigZagK
2020-02-23 14:08:05
@初夏阳光 

其实我博客根本没有访问量,所以这个音乐摆了个寂寞

博主
2020-02-19 14:26:48ohmyga
2020-02-19 14:26:48

有一说一 现在主题贞德好康(

访客
2020-02-19 16:50:27ZigZagK
2020-02-19 16:50:27
@ohmyga 

感谢捧场啊QAQ,说实话我觉得您的Castle更好看 倍感压力

博主