一. 主题简介 MiHo 是一款单栏响应式的Hexo 主题;基于 Hexo 3.0+ 制作,兼容移动端浏览;主题的代码托管在GitHub 上, 欢迎Star和Fork;如遇到问题或发表建议,可以提Issues ,也可以在博客中留言给我。
二. 安装 2.1 安装主题 1 $ git clone https://github.com/WongMinHo/hexo-theme-miho.git themes/miho
MiHo 主题需要Hexo 3.0或以上版本,请先升级。
2.2 更新
2.3 依赖安装 如下依赖如果已经安装,请看配置介绍。
Json-content 生成站点文章静态数据,用于站内搜索。
1 npm install hexo-generator-json-content --save
三. 站点配置 站点配置文件_config.yml
在hexo根目录下。
3.1 启用主题
3.2 网站基本配置 以下配置是站点的全局配置,更多配置,请查看
1 2 3 4 5 6 title: MinHow's Blog subtitle: 网站副标题 description: 专注 WEB 开发的技术博客 author: MinHow language: 网站使用的语言 timezone: 网站时区
3.3 jsonContent配置 详细的配置请查看hexo-generator-json-content
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 jsonContent: meta: false pages: false posts: title: true date: true path: true text: true raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: false
四. 主题配置 编辑主题配置文件,themes/miho/_config.yml
。
4.1 属性 下面将介绍几个比较重要的配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 favicon: /favicon.ico keywords: MinHow,MinHow's Blog # Head headline | 头部标题 header_title: MinHow' s Blogheader_description: 一个专注 WEB 开发的技术博客 logo: images/logo.png banner_img: images/banner.jpg menu: home: title: Home url: / target: false archive: title: Archives url: /archives target: false user: title: About url: /about target: false social: home: title: MinHow url: //minhow.com target: true github: title: Github url: //github.com/wongminho target: true weibo: title: Weibo url: //weibo.com/WongMinHo target: true twitter: title: Twitter url: //twitter.com/huangminhow target: true excerpt_length: 190 excerpt_link: more>> open_new_link: false cover_picture: images/banner.jpg open_bg_particle: true open_animation: true toc: true share: true style: main_color: '#0cc' reward: status: 1 title: 请我吃糖~ wechat: images/wechat_code.jpg alipay: images/alipay_code.jpg changyan_appid: false changyan_appkey: false youyan_id: false disqus: false cnzz_analytics: false baidu_analytics: false google_analytics: false access_counter: on: true site_uv: 总访客数: site_pv: 总访问量: copyright: 2017 MinHow
4.2 文章封面图 文章默认封面图,尺寸:350*150,当文章基本配置没有cover_picture
时才显示。
1 cover_picture: images/banner.jpg
4.3 开启背景粒子 是否开启背景粒子。
4.4 开启主页及头部动画 是否开启主页及头部动画。
4.5 评论 支持畅言、友言、disqus。
1 2 3 4 5 6 7 8 9 10 11 12 13 changyan_appid: false changyan_appkey: false youyan_id: false disqus: false gitment: owner: false repo: '' client_id: '' client_secret: ''
4.6 数据统计 支持站长、百度、google三种数据统计,正确填写配置信息即可。
1 2 3 4 5 6 cnzz_analytics: false baidu_analytics: false google_analytics: false
4.7 文章基本配置 1 2 3 4 5 6 7 8 9 10 11 12 --- title: Hello World date: 2017-06-18 categories: First author: MinHow tags: - First - Second cover_picture: /images/banner.jpg --- MinHow-This is a summary <!-- more -->
可以参考[blog ]的写法。
说明:
需要注意tags
和摘要的写法,不然首页不能正确显示标签和摘要;
cover_picture
文章封面图,不填默认显示_config.yml
配置的图片。
4.8 创建 about 页面 在 Hexo 目录执行如下命令:
然后编辑source/about/index.md
文件即可,可以参考我写好的[about ]页面。
4.9 打赏 支持微信和支付宝打赏,修改wechat
和alipay
两个图片路径配置即可,支持全局开启打赏或指定文章开启打赏功能,详情查看配置文件。