menu
hjthjthjt
hjthjthjt
永远的菜鸡

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

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

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

主题介绍

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

特性

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

它继承了 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. 其他小的修改

v1.0.3 尚未发布

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


共有 19 条评论

Loading...
  1. 我是笨蛋小扁担 public UNKNOWN

    啊啊啊啊啊啊啊啊

  2. Chrome 76.0.3809.85

    回首页和上/下一篇文章,也太麻烦了吧

    1. hjthjthjt WordPress Android 13.3

      我觉得上下篇的意义不大……回首页我暂时没想到放哪里好……

  3. Edge 17.17134

    淦,cookie没了,还想在上一条回复的
    评论页代码显示不全
    然后评论能不能按时间倒序显示
    然后文章目录能不能随着页面位置浮动(

    1. hjthjthjt Chrome 78.0.3904.70

      文章目录做到fab里了,样式暂时瞎写(
      评论的话倒序什么的在后台改就行了吧

  4. cocomax Chrome 78.0.3904.87

    在哪里下载

    1. hjthjthjt WordPress Android 13.4

      emmm还有好多东西没弄完,没那么快(

  5. 测试 Chrome 50.0.2661.102

    特色图像不显示
    还有不换行
    图片和文字显示在一行里面了
    话说,现在都在用经典编辑器,能兼容经典编辑器吗

    1. hjthjthjt WordPress Android 14.0-rc-2

      特色图片我这边测试没问题……能给个地址我看看嘛?
      图片和文字显示在一行没问题,都需要手动换行的(不然有些句子想接个表情就没办法接了)
      没有打算兼容经典编辑器,总要向未来看,而且「可扩展面板」之前用短代码太麻烦了,现在我正在用古登堡的区块弄,基本差不多了

发表评论

回复给 我是笨蛋小扁担 点击这里取消回复。

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