个人博客更新日志&也是使用hexo+github搭建个人博客遇到的一些问题及看法,同时在主题中添加了一些新东西。
开头
因为追求新鲜开始自己尝试了七八个主题,开始使用的是相对简洁 Jacman,另外两个是Yilia
点击链接 、 yumemor
点击链接 , 个人比较喜欢yumemor。我目前正在用的yilia,并添加了一些小插件。如果你崇尚简洁直观的话,推荐使用next或者是landscape-plus,使用的用户还有在github上star的都比较多。
我开始搭建博客很顺利,也是在选用主题是花费了不少功夫,起初按照Jacman 这一主题一步步更新内容,修改样式,在主题themes
文件中修改字体、文字及section的颜色、banner图片、微博秀等等。
怎么搭建网上有很多教程,我不再累赘介绍,大多是在 cmd
命令行(或者 git shell
命令下完成)。以下是我认为需要注意的一些问题,也是我遇到的好多坑,还有自己修改的一些东西。
正文:
更新主题命令及上传部署到github
1 | cd themes/yilia |
在更改博客themes
文件下的东西之后执行的命令,是主题的源文件更新,不是我们博客的更新。而hexo g
是更新博客命令。hexo new "文件名"
是新建文件名
hexo deploy
(或hexo d
)上传部署到github 。
搭建完成之后,这几个命令也是我经常使用的, 学习使用了很长时间git应用,有时间总结一下经常用的的git命令,以便使用。。。。
遇到的问题:
用git shell
命令hexo d
)上传到github出错,总是出现需要输入用户名和密码。
解决办法
在你博客根目录下的_config.yml
中repository:
修改为`git@github.com`形式 如:
1 | deploy: |
在branch:
中如果博客地址是yourname.github.io
,分支名就是master
使用另建的Repositorie
就使用gh-pages
。
博客中插入图片和音乐
(1)、放在七牛上,需要先注册,上传图片生成链接,直接在文章中使用链接即可。(推荐使用这种,还拥有10G的免费存储图片资源。)
(2)、放在本地文件
首先在yourname.github.io
目录下确认 _config.yml
中有post_asset_folder:true
。
在博客根目录下执行1
npm install https://github.com/CodeFalling/hexo-asset-image --save
然后再使用hexo new 'new'
创建新博客的时候,会在source/_posts
里面创建.md
文件的同时生成一个相同的名字的文件夹。把该文章中需要使用的图片放在该文件夹下即可。在博客中使用的时候用以下方式:1
2
3![图片描述](/文件夹名/你的图片名字.JPG)
例如:
![ ] (img/author.jpg)
(3)、插入音乐
可以使用网易云音乐,搜索你想要的歌曲,点击歌曲名字进入播放器页面,点击生成外链播放器;复制代码,直接粘贴到博文中即可,这样会显示一个网易的播放器。
(4)、引入左边栏的音乐播放器
我使用的是一款绚丽彩虹的音乐播放器插件——>绚丽彩虹播放器里面有相关使用教程。复制代码块添加到themes\yilia\layout\_partial\left-col.ejs
文件最下面即可。效果来源于demo。
引入天气
同样将以下代码块加入themes\yilia\layout\_partial\left-col.ejs
的第一个div中即可。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!--天气开始-->
<div id="tp-weather-widget"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.thinkpage.cn/widget/chameleon.js"))</script>
<script>tpwidget("init", {
"flavor": "slim",
"location": "WM6N2PM3WY2K",
"geolocation": "enabled",
"language": "zh-chs",
"unit": "c",
"theme": "chameleon",
"container": "tp-weather-widget",
"bubble": "enabled",
"alarmType": "badge",
"color": "#FFFFFF",
"uid": "U88B4B2797",
"hash": "c9d7cb43b80ffece52c9a1ebbfbca65f"
});
tpwidget("show");</script>
<!--天气结束-->
效果如图:
添加博客访问量
在themes\yilia\layout\_partial\after_footer.ejs
文件中第三个div之后(添加到什么地方好看自己决定)添加如下代码即可:1
2
3
4
5
6
7
8<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv" style="color: blue;"></span>次
</span>
<span id="busuanzi_container_site_uv">
访客数<span id="busuanzi_value_site_uv" style="color: blue;"></span>人次
</span>
css样式也可做修改,更多详细细节可以访问 不蒜子 不如。
Markdown文档编辑器
在这里推荐两款markdown
文档的编辑软件,一种是在本地的编辑器Haroopad,非常小众,左边编辑,右边实时预览效果,很轻便。(目前我使用的就是这种,之前打开编辑.md
类的文件使用的是Editplus
但很不方便,使用专门的markdown
编辑器更快速见效)。 另一种是在线的编辑器MaHua,打开链接可以在线编辑。
打赏页面
修改为不显示,常来看看就好,哈哈哈哈哈。。
随笔
也可自己构建一个博客主题,分享然后再github上建一个仓库,别人再git clone
下来使用你的主题。经常不知道如何写文章,因为害怕写开头。。哈哈哈。。搭建博客,也是为了总结学过的知识,一方面可以提供交流,也因为总会忘,顺便巩固看过的东西,管理仓库,梳理技术。
最后,遇到其他问题,欢迎提问交流~