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. 于文 Chrome 80.0.3987.132

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

    1. hjthjthjt WordPress Android 14.4-rc-1

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

  2. yinghuo Chrome 78.0.3904.108

    您好,非常喜欢您的主题,主题中的备案号链接错误,应该加上www,请问修改目录文件在哪

    1. hjthjthjt Edge Chromium 83.0.478.5

      www我会在下次更新加上。「修改目录文件」是指……?

      1. yinghuo Chrome 78.0.3904.108

        我的意思是在哪可以自己修改,没找到这个超链接具体位置

        1. hjthjthjt Edge Chromium 83.0.478.5

          在footer.php的22行,顺便建议你关闭主题设置中的「统计代码文字开关」

        2. yinghuo Chrome 78.0.3904.108

          非常感谢,持续关注,支持作者!!

  3. yinghuo Chrome 78.0.3904.108

    您好,请问公安网备案链接放在哪里合适,我现在不能很好的在电脑版和wap进行展示,不能很好的居中,还请指点具体放到那一行合适

  4. Leon Chrome 81.0.4044.138

    cool man~

  5. 独孤伶俜 Edge Chromium 83.0.478.37

    回访友链,不错的UI,支持。

发表评论

回复给 点击这里取消回复。

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