前言
接 搭建自己的Hexo博客(3)这篇文章,最近又对博客进行了一些简单优化,特地分享下。
正文
音乐问题
原来是直接使用的网易云音乐外链,考虑到音乐版权问题,可能以后外链失效影响到音乐播放。
故我将要使用的音乐文件迁移到了云服务器上,同时我们使用一款Hexo的音乐播放插件hexo-tag-aplayer
。
我们直接在package.json
文件里添加hexo-tag-aplayer
并使用npm install命令进行安装。
在 themes/next/layout/_custom/sidebar.swig
文件里,我们原来使用的网易云外链,注释掉。
1 | <!--网易云音乐外链,已废弃--> |
使用如下Aplayer相关加载代码。
1 | <!--基于hexo-tag-aplayer的音乐播放器--> |
这样我们部署后会看到音乐栏如下图所示,也是比较美观的。
我们使用hexo-tag-aplayer
还有一个好处,当我们想向一些文章里添加音乐时,只需在文章markdown文章中添加如下代码即可。
1 | {% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %} |
hexo-tag-aplayer
是基于APlayer而构建的,有兴趣的同学可以看下APlayer,一款非常漂亮的H5音乐播放器。
相册问题
上篇文章简单制作了一个相册,但是不是很满意,最近又对相册做了些优化。大致想法如下:
- 相册页应该支持Tab切换,可以按照不同类别进行区分
- 原来瀑布流下拉加载有些问题,需要修复下
- 照片处理时手动操作步骤应该尽量少且简单
根据以上问题,优化后的相册如下动图,可以看到更美观实用一些了。
我简单把自己改动的代码分享下。
photo 文件夹下的index.md
文件如下:
1 | <div id = "ImageGrid" class="photo-record"><div class="tab"><div class="tab-item active">动漫</div><div class="tab-item">风景</div><div class="tab-item">TODO</div></div><div class="photoContent"><ul class="img-box-ul1 mainCont selected"></ul><ul class="img-box-ul2 mainCont"></ul><ul class="img-box-ul3 mainCont"></ul></div></div><div style="height:100px"></div> |
样式如下,放在custom.styl
里。
1 | .photo-record{ |
photos.js
的改动较大,如下:
1 | var photo = function() { |
从上面的photos.js
我们可以看到photos.json
应该为下面这种格式。
1 | [ |
这就需要我们使用photosTools.js
来进行生成了,原来的这个文件是不满足要求的,我们改造如下:
1 | ; |
同时原来的photos图片文件夹里,应该使用1,2,3…等文件夹,并将图片放入到这些文件夹中,至于1,2,3…和图片类型的对应关系,就需要自己配置就行了。
以上就是新的图片标签页面的一些设计。
可以看到我们创建了3个Tab页切换(如需更多,可以继续进行配置),每个Tab页对应一个photo对象,该对象会加载并渲染图片信息,每次加载10个,使用向下滚动我们可以加载更多,并使用fancbox美化图片样式。
由于需要知道图片宽高来美化图片样式,因此我们使用了NodeJs的fs和imagesize模块,用来读取文件并生成photos.json文件。
PS:弄完相册后,突然想到了视频相关的一些展示,这个在后面我会考虑美观等特性,考虑是否为博客添加视频功能,及添加的位置等一些要素。
屏蔽相关
我们为博客添加一些屏蔽功能,先上代码。
1 | /** |
我们将上述代码引入到博客代码中,就会欣然发现:
在博客页面上:
- 鼠标右键审查元素失效
- F12失效,Chrome浏览器下
Ctrl+Shift+I
启动开发者模式快捷键失效 - 复制、粘贴、剪贴、鼠标选中元素失效
- 开发者模式和博客页面是无法共存的
当然这并不能阻止大家获取到网站运行的代码,因为js、html或者图片等资源,一旦被加载到客户端,客户端就已经拿到代码了。
然而这仍然是有趣的一件事情。
我们这里主要就是监听一些键盘事件来对某些按键行为进行阻止,对于屏蔽了开发者模式,主要和Object.defineProperty
这个属性相关,但这个属性一些低版本浏览器是不支持的。
总结
今天到这里就差不多了,我们对博客进行了一些优化操作,及简单介绍了如何进行这些操作,接下来我仍将去探寻博客一些可以优化的地方。
我的博客地址:https://www.sakuratears.top