0%

博客搭建和美化

以前写博客是一种潮流,现在写博客是一种坚持。专注于记录和分析某一细分领域的研究和深度的思考。

作为一个程序员,持续学习是必备技能。

博客搭建结构 Hexo & Next(Mist)

这是我目前博客的结构,我将在这里整理部分搭建心得(并非新手教程)

使用NexT主题的人比较多,说明这个主题确实很成熟了。
优化,配置,扩展很多都集成了,博文重质量,关注点放在太花哨确实没意义,但完全不做修改那很没有意思。

中文官网 https://hexo.io/zh-cn/docs/

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);
}
});