Skip to content
/ mdm Public

一款Hexo端优美的MaterialDesign风格主题,简洁,轻巧,麻麻再也不用担心打开博客速度慢了

Notifications You must be signed in to change notification settings

TonyChenn/mdm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

一款Hexo端优美的MaterialDesign风格主题 MDM

简洁,轻巧,麻麻再也不用担心打开博客速度慢了



推荐

  1. Hexo 博文管理工具,麻麻再也不用担心忘记管理hexo博文的命令啦
  2. CSDN博文导出工具

更新介绍:

  • 2022.11.17
  1. 升级HexoBlogWhriteTool
    • 优化原来的难看的展示页面。
    • 未开启本地服务则不再拦截关闭事件。
  2. 修复jquery cdn失效
  • 2022.4.4
  1. HexoWriteTool 支持win11
  2. 优化博文置顶,显示置顶标识
  3. 支持代码折叠,显示博文中代码语言
  4. header优化
  5. 博文排版优化
  • 2021.3.25
  1. 更新mdui到1.0.1并修复 日/夜间模式,一键置顶
  2. 美化 headerbar,文章详情部分
  3. 支持图片LazyLoad
  4. 界面布局优化
  5. 美化代码框
  • 2021.1.1

  • 升级hexo4.2.0后pwa无法使用, 解决方法看下面。

  • 2020.11.12

  1. 解决在IOS设备Safari浏览器上布局错乱问题
  • 2020.10.31
  1. 本地化支持
  2. 取消缓存head.ejs,解决浏览器顶部Tab卡片中名称错误
  3. 优化分享功能
  • 2020-6-20
  1. 文章置顶
  2. 显示更新日期
  • 2020-5-27:
  1. PWA支持
  2. 点击特效
  3. 分享
  4. 打赏
  • 2020-4-10 :
  1. 添加站点地图
  2. 添加灰色(哀悼)模式
  3. 添加谷歌广告开关
  4. 支持Emoji表情
  5. 添加Gitalk 评论方式
  • 2020-1-14 :
  1. 添加图片预览
  2. 优化夜间模式
  3. 文章代码排版。

🎨演示

tonychenn.cn 觉得不错,点个Star

📌介绍

  1. 响应式布局,适配移动端和PC端
  2. 优美MaterialDesign设计
  3. 轻巧极速加载

实现的功能

  1. 基本的博客展示,首页,标签页,归档页,关于页
  2. 一言随机内容展示
  3. 使用Valine文章评论,新增Gitalk
  4. 开启访问人数,次数统计
  5. 视频博文的展示播放
  6. 全局灰色模式,白天/夜晚模式

💻PC端

📱移动端

案例

本博客使用mdm主题,更多细节,自行查看TonyChenn.cn

💿安装

下载

$ git clone https://github.com/TonyChenn/hexo-theme-mdm

更新

$ cd themes/mdm
$ git pull

开启站点地图模块

  1. 安装sitemap
//google
$ npm install hexo-generator-sitemap --save

//baidu
$ npm install hexo-generator-baidu-sitemap --save
  1. 配置sitemap 主题根目录下_config.yml文件中启用下面
# 站点地图
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
  1. 重新生成部署
$ hexo clean && hexo g && hexo s

开启Emoji表情支持

  1. 需要卸载旧的渲染器 & 安装新的渲染器
$ npm un hexo-renderer-marked --save 
$ npm i hexo-renderer-markdown-it --save
$ npm install markdown-it-emoji --save
  1. heox配置文件中添加
# Markdown-it config
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

文章置顶及自定义排序

请到Hexo项目下的\node_modules\hexo-generator-index\lib\generator.js找到该文件并打开。(js代码简单,不过多介绍,有需要修改的自行修改) 替换为如下内容:

'use strict';

var pagination = require('hexo-pagination');
module.exports = function(locals) {

  var config = this.config;
  var posts = locals.posts;
  var paginationDir = config.pagination_dir || 'page';

  posts.data = posts.data.sort(function(a, b) {
      var a_time = (a.update_time && a.update_time>a.date) ? a.update_time : a.date;
      var b_time = (b.update_time && b.update_time>b.date) ? b.update_time : b.date;
      
      if(a.top && b.top)  return a.top == b.top ? b_time-a_time: b.top-a.top;

      else if(a.top)  return -1;
      else if(b.top)  return 1;

      else return b_time - a_time;
  });


  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

开启PWA

待补充

hexo升级4.2.0后PWA失效

参考hexojs/hexo#4044 在hexo-pwa插件没修复之前解决方案:打开\node_modules\hexo-pwa\lib\serviceWorker.js 修改下面内容:

- let posts = this.locals.cache.posts.data;
+ let posts = locals.posts.sort('-date').toArray();

下载

Github: https://github.com/TonyChenn/hexo-theme-mdm 觉得不错?点个小星星给我个鼓励吧 (_)

About

一款Hexo端优美的MaterialDesign风格主题,简洁,轻巧,麻麻再也不用担心打开博客速度慢了

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published