hexo优化·年轻就是折腾 | Promotion of the Blog & Young for Try


配图


  说明:本博客会长期优化,因此将之前所写相关文章合并到同一篇中,按倒序编排,以便查询。
  (记录繁杂,暂不英译。)


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/%E5%B0%86hexo-github%E5%8D%9A%E5%AE%A2%E5%90%8C%E6%AD%A5%E6%89%98%E7%AE%A1%E8%87%B3coding/

修改背景透明度

yelee/source/css/_variables.styl
Background Color相关的4个变量,颜色为 RGBA.
http://www.w3school.com.cn/cssref/css_colors_legal.asp

1
2
3
4
5
// Background Color
left-col-color = rgba(255,255,255,.85)
mid-col-color = rgba(255,255,255,.8)
article-color = rgba(255,255,255,.45)
archives-color = rgba(255,255,255,.4)

左侧背景更换

yelee/source/css/_partial/main.styl
原CSS:

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
.left-col {
background-image: url(http://lubiao.b0.upaiyun.com/c/2/2014/5/14/2/11/4d4059067181d8b7fbc9ac8920ff2764.jpg);
width: left-col-width;
position:fixed;
opacity:1;
transition:all .2s ease-in;
height:100%;
overflow-y: auto;
.overlay{
width: 100%;
height: 180px;
background-color: black;
position: absolute;
opacity: 0.7;
}
.intrude-less {
width: 76%;
text-align: center;
margin: 112px auto 0;
}
li:hover {
background: none;
font-weight: bold;
};
}

效果图:before

现CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.left-col {
background-image: url(/images/l1.jpg);
background-size: cover;
width: left-col-width;
position:fixed;
opacity:1;
transition:all .2s ease-in;
height:100%;
overflow-y: auto;

.intrude-less {
width: 76%;
text-align: center;
margin: 112px auto 0;
}
li:hover {
background: none;
font-weight: bold;
};
}

效果图:after
也许您认为之前的更好看,因为时间紧促,我没有花很多时间在图片选取和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
2
$ npm remove hexo-generator-baidu-sitemap
$ npm install hexo-generator-baidu-sitemap --save

Options

if your hexo version is 2.x.x, you can configure this plugin in _config.yml.

1
2
baidusitemap:
path: baidusitemap.xml

if version is 3.x.x, you should configure this plugin in _config.yml.

1
2
baidusitemap:
path: baidusitemap.xml

path - Sitemap path. (Default: baidusitemap.xml)

Errors

Maybe response is “hexo is not definded”,then you should:

1
2
cd node_modules/hexo-generator-baidu-sitemap/
npm install

  谷歌的提交方法是类似的。


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
2
$ cd themes/xxx
$ git pull

关于统计

  两种方法:
  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%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/

  以上。

参考资料

不蒜子
为hexo主题添加多种图片样式
hexo在github上构建免费的Web应用
极简图床
解决hexo置顶问题
hexo全部模板
比特虫
hexo你的博客
Sitemap generation
Hexo :(三)高级进阶
hexo主题中添加相册功能

本文已被阅读 次。感谢您的点击!
The article has been viewed times.Thank you for your visit!

文章目录
  1. 1. 同步托管至coding
  2. 2. 修改背景透明度
  3. 3. 左侧背景更换
  4. 4. 提交sitemap给google和百度
    1. 4.1. install
    2. 4.2. Update
    3. 4.3. Options
    4. 4.4. Errors
  5. 5. 公共/独立空间评论切换
  6. 6. 将“more”改为“阅读全文”
  7. 7. 主题更换
  8. 8. 图片插入
  9. 9. 本地图片插入问题解决
  10. 10. About Page 关于我页面
  11. 11. Tags Cloud Page 标签云页面
  12. 12. Comment 评论
  13. 13. 主页链接
  14. 14. 细节
  15. 15. 关于主题
  16. 16. 关于统计
  17. 17. 网站小图标
  18. 18. categories、tags
  19. 19. 更改相关字体、颜色等细节
  20. 20. 搭建问题的解决方案
  21. 21. 参考资料
|