静态博客搭建和美化

Posted on Edited on

专注于记录和分析及总结出有深度的思考.
off the limits and learn something new.

我想持续学习一定是必备技能。

据观察, 使用 NexT 主题的人比较多，说明这个主题确实很成熟了。

我选用的是 Hexo 和 Next 主题, 优化，配置，扩展很多都集成了.

按理来讲博客文章更应该看重质量, 博客实现细节也应该是展现技术实力的空间。

一些脚本

1
2
3
4
5
6
7
# npm install hexo-cli -g
yarn global add hexo-cli
hexo init blog
cd blog
# npm install
yarn
hexo server

issue

Mac 推荐使用 POW

Pow 是一个 Mac 系统上的零配置 Rack 服务器，它也可以作为一个简单易用的静态文件服务器来使用。

PS：生成后本机刷新页面就可以看到生成效果，比较方便。

https://hexo.io/zh-cn/docs/server.html
http://pow.cx/

Next 主题 5.* 升级到 6.* 的时候换了仓库(换成 Next 官方库了)

官方文档 https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md

  • 从 v6.0.3版本起，zh-Hans改名为zh-CN：需要显式修改_config.xml里的language配置，否则语言显示会退回到默认的英文

官方推荐使用 数据文件

https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/DATA-FILES.md

主页文章加阴影

在 themes/next/source/css/_custom/custom.styl 添加以下 CSS 代码

1
2
3
4
5
6
7
// 主页添加阴影效果
#content > #posts .post {
  margin: 0 10px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

文章底部标签文字#改成图标

修改模板 themes/next/layout/_macro/post.swig
搜索 rel="tag">#，将 #换成 

1
<i class="fa fa-tag"></i>

点击出桃心

1
2
cd themes/next/source/js/src
wget http://7u2ss1.com1.z0.glb.clouddn.com/love.js

修改文件 themes/next/layout_layout.swig

1
<script type="text/javascript" src="/js/src/love.js"></script>

调皮的博客标题

修改文件 themes/next/layout_layout.swig

1
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

修改文件 themes/next/source/js/src/crash_cheat.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
 if (document.hidden) {
     $('[rel="icon"]').attr('href', "/img/TEP.ico");
     document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
     clearTimeout(titleTime);
 }
 else {
     $('[rel="icon"]').attr('href', "/favicon.ico");
     document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitile;
     titleTime = setTimeout(function () {
         document.title = OriginTitile;
     }, 2000);
 }
});