menu
hjthjthjt
hjthjthjt
永远的菜鸡

「TigerMaterial」—— Material Design 与 WordPress 的巧妙碰撞

TigerMaterial 是 RnMaterial 的重制版,使用 MDUI 进行重新编写

其实当初 RnMaterial 是 Ctrl+S 保存后强行魔改成 WordPress 主题的……

主题介绍

TigerMaterial 是一款基于 MDUI 框架的 Material Design 风格的 WordPress 主题。

特性

  • 基于 MDUI 框架的 Material Design 设计,将在未来支持暗色模式和主题切换
  • 支持 WordPress 的主题更新功能
  • 支持文章目录,平滑跳转
  • 支持 Ajax 无限加载文章, Ajax 评论提交/翻页
  • 全局 Font Awesome 图标字体,可根据需要自行使用
  • 支持 Rich Preview,在 Telegram 中也能直接预览文章摘要
  • 内置友情链接页面,归档页面
  • 支持多种 Gutenberg 编辑器区块

它继承了 MDUI 所有的样式,你可以在 MDUI 开发文档 中阅览并使用。

这里提供博客内的样式显示效果: TigerMaterial 区块 & 样式预览

演示

插件

TigerMaterial 并没有必须安装的插件(前提是使用古登堡编辑器),但我推荐你安装下面的插件来实现最佳效果。

主题的整个开发都是基于下列插件进行的。

  • Gutenberg – 古登堡编辑器,WordPress 新版的默认编辑器
  • Code Syntax Block – 用于代码高亮
  • Block Lab – 主题捆绑的区块必须依赖此插件才可显示,例如可扩展面板,按钮等。当然,安装此插件并不是必须的,你也可以通过阅读 MDUI 文档后直接粘贴 HTML 代码来使用。 如果你安装了 Block Lab,请阅读下方主题须知-区块

更新日志

2020/03/19

1. 从此版本开始,TigerMaterial 主题的升级将支持 WordPress 的检测更新
2. 为文章和页面添加了快捷「编辑文章/页面」入口
3. 全局引入 Font Awesome 图标字体
4. 优化了评论 UA 匹配及其图标
5. 为置顶文章添加标识
6. 其他小的修改

2020/02/02 v1.0.2版

新增 Gravatar 头像镜像,需要自己设置加速域名

2020/01/28 v1.0.1版

果然短代码还是太累了……所以这个版本开始,借助 Block Lab 插件,可扩展面板等全部转化为区块!

1. jQuery 等 JS 移动至页面底部加载,一定程度上加快了页面的打开速度。
2. 评论支持 Ajax 提交(但是目前只支持直接评论,即如果是回复的话页面还是会重载一次)。
3. 评论 Ajax 翻页,请阅读主题须知
4. 移除了 UA 中的操作系统显示,因为 Chrome 将在未来统一所有设备的操作系统字段,显示系统将没有意义,因此现在开始只显示浏览器。详见 Google 网上论坛
5. 短代码全部转化为区块,请阅读主题须知

2020/01/21

短代码支持 Font Awesome,使用 [fontawesome],详情见 TigerMaterial 区块 & 样式预览

2019/11/25

新增短代码(主要是懒得去复制大段代码)

2019/11/24

1. 现在会根据文章是否存在目录而选择文章内页 Fab 的展示方式了
2. 文章列表 Ajax 加载时的样式优化,不会乱跳了(应该)
3. 搜索框现在在首页以外的地方也能搜索了
4. 修复了手机端顶部的高度

2019/11/19

文章头图垂直居中辣!

2019/10/30

这次改的还蛮多的自己还蛮快乐的hhh
1. 改了一些样式,比如说文章的各种标题现在加粗了
2. 莫名其妙的 Edge 上的显示好了
3. Yoast SEO 会导致评论回复出问题,所以最后自己实现了 Rich Preview (没想到这么简单……)
4. 文章/页面右上角多了一个回到首页的按钮,不过顶部条这几个的高度有点迷……
5. 然后现在发现在手机上的时候顶部高度又有问题了我的妈……
6. 忘了啥时候加的评论 User-Agent 了(有些浏览器不显示,可能是用了 Opera 之类的……我没加进去,再说吧再说吧咕咕咕咕咕咕咕咕)
7. 然后就是文章右下角 Fab 大改了一下,顺便加了文章目录,现在不再需要安装 Table of Contents Plus 插件了,自己手动实现了一下……好累(

不过刚刚才发现如果文章没有目录的话……那个按钮里点开就是只有目录俩字
忘了做检测,淦,再说吧,先加 TODO 里

2019/10/11

1. 移除了顶部状态栏的上色,现在在任何情况下都是透明的
2. 评论邮件样式改好了
3. Rich Preview(借助 Yoast SEO 插件)
4. 归档,友链的样式改好了
5. 头部图片大幅度缩小高度
6. 代码高亮的背景样式改了改,应该好看点了

2019/10/11之前

1. 使用 MDUI 完全重写主题
2. 支持侧边菜单的二级菜单(抄了 MDX 的代码,感谢一下 )
3. 首页 Ajax 无限加载

不知道,忘了

主题须知

区块

必须安装 Block Lab 插件后才可以使用,请在博客「仪表盘」→「工具」→「导入」→「Block Lab」→「运行导入器」中进行导入。(图文

分享密码:TigerMaterial

有关主题区块的使用方法,请阅读 TigerMaterial 区块 & 样式预览

Ajax 评论翻页

需要自己设置每页的评论数,若没有设置将全部展示。

WordPress 仪表盘→设置→讨论→其他评论设置。

我选择的是每页显示5条评论,你可以自己选择。

文章小标题

请从 H2 开始使用标题。

其他

已知 BUG

  • 应该有,评论告诉我嗷

TODO






源码 & 下载

分享密码:TigerMaterial

请注意,代码库中的主题通常不能直接使用,请使用网盘下载或在 Github 的 release 中下载

许可证

GPL v3

博客当前运行在 HostKVM 上(推介链接)

本文采用 CC BY-NC-SA 3.0 协议进行许可,在您遵循此协议的情况下,可以自由共享与演绎本文章。

本文链接:https://jakting.com/archives/tigermaterial.html


共有 11 条评论

Loading...
  1. 于文 Chrome 80.0.3987.132

    MD设计确实好看,提个建议,把主页放到顶栏左侧可能更加合适,我一开始找了一圈才看到主页键。

    1. hjthjthjt WordPress Android 14.4-rc-1

      我知道放在那里不太好认……但是放在左边显得很突兀

发表评论

昵称不能为空
邮箱不能为空