说明:本博客会长期优化,因此将之前所写相关文章合并到同一篇中,按倒序编排,以便查询。
2016.10.22更新
失踪人口短暂现身…
这么久没有更博内心有愧。其实有不定期更新github。
今天我十分惊讶于博客项目的deploy最近一次记录竟是8月,这说明了我近两个月来的微调都没有部署上来……难怪我的github不绿了!
在仔细研读了我的config并确保没有问题后,我又一次hexo c,hexo g,hexo d三部曲,然后可怕的事情发生了:Cannot GET /
在搞垮博客几次后的我已经云淡风轻了,只有一个念头:我能修复好。废话不说了,进入正题:
解决方法:将npm重新安装一遍。这两个月一直想做成双语切换样式(目前中英文混编有些凌乱),可能意外删除了nodejs的部分文件,造成不能部署。但英文版各种bug,暂时放下,等考完再战。
npm -v
查看npm版本命令。
对博客进行了小的调整:
1.压缩背景图片,每张100KB以内,提高了访问速度。
2.替换了失效的图片链接,去掉了github里项目|collections|里的极简图床,以自身血的教训证明,还是七牛云本身最稳定,不要偷懒,否则失效时眼泪止不住的流(滑稽)。
3.部分文章更新、重新排版。(前期初学markdown写的确实凌乱,中英混排也一并修改)
4.拖欠的友链已添加,失效的友链已更改。
5.为部分没有封面图的文章增添了封面图。
6.降低了封面背景透明度。
7.修改了多说头像CSS。
8.修改了评论框背景图。(快去捕捉一只野生皮卡丘!)
今天算是懂了,要做好前端,一定要懂PS。(可我明明是一个想做后端的人……)
下次更新:提交sitemap给必应。
同步托管至coding
具体操作之前我已另写一篇详细教程:http://hubojing.github.io/2016/04/06/将hexo-github博客同步托管至coding/
修改背景透明度
yelee/source/css/_variables.styl
Background Color相关的4个变量,颜色为 RGBA.
http://www.w3school.com.cn/cssref/css_colors_legal.asp
1 | // Background Color |
左侧背景更换
yelee/source/css/_partial/main.styl
原CSS:
1 | .left-col { |
效果图:
现CSS:
1 | .left-col { |
效果图:
也许您认为之前的更好看,因为时间紧促,我没有花很多时间在图片选取和P图上,只是为了成功实现左边栏背景不同的效果。后期还会不断调试。
2016.4.23更新
提交sitemap给google和百度
目的:使谷歌和百度能够搜索到本博客
测试:可在浏览器中输入
谷歌:
site:hubojing.github.io
百度:
site:hubojing.coding.me
效果:
说明:百度蜘蛛爬不了github的网址,所以只好将博客同步部署到coding。详细步骤见:将hexo-github博客同步托管至coding
步骤
百度提交sitemap:
install
if your hexo version is 2.x.x, you should install as follow:
1 | npm install hexo-generator-baidu-sitemap@0.0.8 --save |
if version is 3.x.x, you should install as follow:
1 | npm install hexo-generator-baidu-sitemap@0.1.1 --save |
Update
1 | $ npm remove hexo-generator-baidu-sitemap |
Options
if your hexo version is 2.x.x, you can configure this plugin in _config.yml.
1 | baidusitemap: |
if version is 3.x.x, you should configure this plugin in _config.yml.
1 | baidusitemap: |
path - Sitemap path. (Default: baidusitemap.xml)
Errors
Maybe response is “hexo is not definded”,then you should:
1 | cd node_modules/hexo-generator-baidu-sitemap/ |
谷歌的提交方法是类似的。
2016.3.1更新
公共/独立空间评论切换
yelee/layout/_partial/article.ejs, 把 “key: post.path” 改为 “key: post.slug”,主题多说配置 domain: true
这样就恢复到 Yilia 的公共评论了。
将“more”改为“阅读全文”
主题配置_config.yml里更改:
1 | excerpt_link: 阅读全文 |
2016.2.28更新
这轮优化很多都挺成功,就是之前的评论都丢失了……桑心。欢迎大家留言安慰我_
主题更换
采取了更为美观的主题,并且有了文章内检索目录,我很喜欢。
记得修改 Hexo 根目录对应配置文件。
theme: yelee
图片插入
对于hexo,有两种方式:
1.使用本地路径:在hexo/source目录下新建一个img文件夹,将图片放入该文件夹下,插入图片时链接即为/img/图片名称。
2.使用微博图床,地址http://weibotuchuang.sinaapp.com ,将图片拖入区域中,会生成图片的URL,这就是链接地址。
以上是查找的资料。
2016.3.1更新
本地图片插入问题解决
效果:
之前本地服务器浏览可以看到图片,但部署上去就无法加载。
这是因为!测试图片是绝对地址。但有相关文章说绝对地址也是可以的,但我一直没有实现,这一点有待考察。上述成功用的是相对地址。!测试图片
后来准备用七牛作图床。~~用极简图床真是特别方便~~
About Page 关于我页面
使用以下代码添加一个新页面:
$ hexo new page about
Tags Cloud Page 标签云页面
$ hexo new page tags
Comment 评论
多说: http://duoshuo.com/create-site/ 登陆你的多说并创建站点,在 “domain” 中填入你设定的域名的前半部分。比如完整域名是: http://ABC.duoshuo.com ,只需填入 ABC 即可。
我之前就没设置站点……不知道还能不能找回来评论?(可以)
主页链接
我把我网易云音乐的主页链接放上来了,欢迎大家和我交流轻音乐。(移动端看不到我的主页,只有PC端可以看到。)
细节
一些细节改变挺多,不知道看过我之前博客样子的访客能找到多少改变之处?欢迎评论。
2015.11.10更新
关于主题
安装
1 | $ git clone git@github.com:XXX/xxx.git themes/xxx |
更新
1 | $ cd themes/xxx |
关于统计
两种方法:
1.google/baidu统计
google登不上去,就用百度吧。先去百度统计注册一个账号,把你的域名输入作为被统计的网页。
它会自动生成一段代码,复制下来。
在主题下的_config.yml添加:
1 | $ baidu_tongji: true |
接着,在主题目录下的layout\ _partial找到head.ejs
打开它,在 < head> 和 < /head> 中粘贴代码即可。
2.不蒜子
不蒜子
两行代码解决。只不过只能显示总人数或每篇文章浏览数。
网站小图标
把.ico图标放入themes主题里的source目录下!
推荐比特虫,在线制作图标。
同时加入代码。
categories、tags
在主题目录的_config.yml中修改成 XXX: /categories/XXX 或 XXX: /tags/XXX
注意空格和英文的冒号。
更改相关字体、颜色等细节
这个简单,找到hexo\themes\light\source\css_partial\main.styl,里面就是基本构架,就是代码有点长,耐心找找。这个级别代码一点都不长……
搭建问题的解决方案
具体操作之前我已另写一篇详细教程:http://hubojing.github.io/2015/11/06/hexo+github博客搭建中出现的问题及解决方法/
以上。
参考资料
不蒜子
为hexo主题添加多种图片样式
hexo在github上构建免费的Web应用
极简图床
解决hexo置顶问题
hexo全部模板
比特虫
hexo你的博客
Sitemap generation
Hexo :(三)高级进阶
hexo主题中添加相册功能