Hexo MIP 模板, 在线预览
# 安装依赖
npm install --save \
hexo-browsersync \
hexo-renderer-jade \
hexo-generator-feed \
hexo-generator-sitemap \
hexo-generator-archive \
hexo-generator-mip
# 克隆主题
git clone https://github.com/xuexb/hexo-theme-mip.git themes/mip
修改 _config.yml
的 theme
配置项为 mip
:
# 站点信息
title: '网站首页标题'
subtitle: '网站二级页面标题后缀'
description: '网站描述'
author: '网站作者, 导航和版权使用'
url: '网站绝对 http 链接'
language: zh-cn
# 启用 mip 主题
theme: mip
# 在归档页面显示所有文章
# 需要上面安装的 hexo-generator-archive 插件支持
archive_generator:
per_page: 0
yearly: false
monthly: false
daily: false
由于 MIP img标签规范 , 在使用图片时必须设置宽高, 如:
<img src="https://dummyimage.com/100x100" width="100" height="100" alt="desc">
注意:如果你的图片是绝对定位的,请给
img
标签添加layout="fill"
属性。
在文单合适位置插入 <!-- more -->
将提取为主页的摘要文本
- 首页使用
config.description
- 文章页使用
post.desc
, 如果不存在则使用post.title + config.author
思路来自 @pinggod/hexo-theme-apollo , 颜色来自 layui
<div class="tip">
预处理器很强大,但它只是编写 CSS 的辅助工具。出于对扩展和维护等方面的考虑,在大型项目中有必要使用预处理器构建 CSS;但是对于小型项目,原生的 CSS 可能是一种更好的选择。不要肆意使用预处理器!
</div>
<div class="tip-info">
预处理器很强大,但它只是编写 CSS 的辅助工具。出于对扩展和维护等方面的考虑,在大型项目中有必要使用预处理器构建 CSS;但是对于小型项目,原生的 CSS 可能是一种更好的选择。不要肆意使用预处理器!
</div>
<div class="tip-error">
预处理器很强大,但它只是编写 CSS 的辅助工具。出于对扩展和维护等方面的考虑,在大型项目中有必要使用预处理器构建 CSS;但是对于小型项目,原生的 CSS 可能是一种更好的选择。不要肆意使用预处理器!
</div>
- 标签页
- 搜索页