配图


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


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
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
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更新

本地图片插入问题解决

  效果:

测试图片
测试图片

  之前本地服务器浏览可以看到图片,但部署上去就无法加载。
  这是因为\
测试图片](E:/hexo/source/images/test.jpg)是**绝对地址**。但有相关文章说绝对地址也是可以的,但我一直没有实现,这一点有待考察。上述成功用的是相对地址。![测试图片
测试图片](E:/hexo/source/images/test.jpg)是**绝对地址**。但有相关文章说绝对地址也是可以的,但我一直没有实现,这一点有待考察。上述成功用的是相对地址。![测试图片

后来准备用七牛作图床。~~用极简图床真是特别方便~~

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主题中添加相册功能