BlackHack 主题
不允许评论

在这个网站架设的开始,我就在制作自己的WordPress主题,从最开始的几个简单的线条到现在的样子。突然感觉到做了这么久的主题竟然还没有一个页面来专门说说,于是就有了这个页面。在这里我会详细介绍BlackHack主题。

下载

https://github.com/alucardwind/blackhack

使用许可

GNU General Public License v3.0

https://github.com/alucardwind/blackhack/blob/master/LICENSE

主题特性

分辨率

主题依据用户屏幕实际宽度进行自动调整,<meta name=”viewport” content=”width=device-width,initial-scale=1″>。如果不懂的话请自行百度,有很详细的解释。在此基础上,我将用户屏幕宽度划分为几个档次:803,1323,1871。无论是哪个档次,主页都会显示最新的六篇日志,但是会因为宽度不同有不同的排列方式。

<803

小于803宽度的屏幕,我默认为是手机浏览模式,在该模式下。网站的侧边栏和页面导航栏都会自动隐藏到屏幕左侧,点击后会弹出。最新的六篇日志会竖向排列,不会显示置顶日志,不会显示背景图片。

803< <1323

在803和1323之间宽度的屏幕,一般为老实窄屏显示器。网站会显示侧边栏和页面导航栏。最新的六篇日志会竖向排列,不会显示置顶日志。

1323< <1871

在1323和1871之间宽度的屏幕,一般为低分辨率宽屏显示器。网站会显示侧边栏和页面导航栏。最新的六篇日志会成两列竖向排列。

>1871

大于1871宽度的屏幕,一般为高分辨率屏幕显示器。网站会显示侧边栏和页面导航栏。最新的六篇日志会成三列竖向排列。

通过cookie方式实现上述宽度的自动调整。用户在第一次打开网站后,网站通过JS获取浏览器实际宽度、设置显示模式并记录进cookie。然后网页自动刷新,应用cookie中设置的显示模式。只要网站的cookie存在且用户不调整浏览器宽度,就会一直使用存储好的显示模式。当用户改变了浏览器宽度,网站会获取新浏览器宽度,重新计算显示方式,并刷新页面用以应用新显示模式。这个方法很蠢,但有效,而且整个过程很快。

页面分类

基于wordpress特性,整个网站的页面分为两类,一类是多日志显示页面,包括index.php,archive.php。另一类是单文章显示页面,包括single.php,page.php。这两类页面分别使用两种视觉设计。

在footer.php中,会自动检测用户所打开的网页属于哪一类,从而调用不同的JS。单文章调用s_content_function.js,多日志显示调用m_content_function.js。

JavaSript

wordpress是一个主要基于PHP的网站架构,但在实际使用中或多或少还是需要JavaScript辅助,主要是涉及到用户端的一些信息,比如浏览器的宽度等等。本网站在2.0版本开始,为了减少网站的体积和加载量,很多网页中的图片是利用canvas绘制。除此以外,日志中的各种媒体和格式效果,如code格式、图片样式等都会经过JS修饰。网站中的大部分JS功能都在blackHackFunction.js中,以function的形式存放。并在网页各处进行调用。

s_content_function.js和m_content_function.js的用处上面已经提到,其中大部分内容也是在调用blackHackFunction.js中的function。wp_admin_function.js是用于网站后台的内容改写。

展开页面

这是一个在网站建立之初就存在的功能,也是我为这个网站写的第一个JS功能。最初的想法是利用该方式加快网站的加载速度。在刚打开网站时,只显示日志标题,用户点击展开页面后才会显示所有日志内容。但现在看来这个目的没有达到,只是为了感觉很酷。

在多个日志的显示页面,比如首页,分类页面等。打开时用户只能看到日志的标题,侧边栏也只显示标题。在网页右上角都有一个“展开页面”的按钮,点击后日志内容、侧边栏内容会展示出来。随后这个按钮会替换成“关闭页面”按钮,再次点击后网页会恢复到原来的状态。

侧边栏

WordPress默认的侧边栏工具这里不介绍。我们重点介绍一些利用插件和其他方式实现的功能。

利用List category posts可以单独显示某一个分类日志列表,该设置位于wordpress后台小工具界面。这样做的目的是为了展示网站中那些制作精良的日志。同样是一个很蠢的方法,当用户需要特意展示某些日志链接在侧边栏的时候,本主题建议用户将这些日志标记某一个固定的自定义标签。然后利用插件在侧边栏统一展示。

利用ProfilePress显示侧边栏用户登录窗口,该设置位于wordpress后台小工具界面。这样做的目的是为了为用户提供一个方便的登录入口。我们对它进行了CSS修饰,位于css/LWA_plugin_style.css

利用Redonleft Player显示播放器内容,播放器位于屏幕左下角,该播放器利用MetingJS进行音频播放。我们对它进行了CSS修饰,位于css/aplayer.css 利用Redonleft_copyright显示网站的版权信息,同时兼容一些图标链接显示,图标利用Font-Awesome。 以上内容已代码形式写进sidebar.php 具体操作方法请参照: https://github.com/alucardwind/blackhack/wiki/%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8

利用libweibo显示某个用户的微博内容,该内容已代码形式写进weibo.php,并引入sidebar.php。微博外联展示功能通过微博API实现,而微博API需要用户自行前往https://open.weibo.com/ 申请权限,本主题并不提供相关权限。
如果不想使用此功能,请打开主目录下sidebar.php,查找24行并删除下方语句:
get_weibo();
如已经申请好相关权限,请参照下方链接安装并操作
https://github.com/xiaosier/libweibo
在weibo.php中修改34行,填入你的权限代码
$c = new SaeTClientV2( ”, ”, ” );
我们对它进行了CSS修饰,位于css/weibo.css

动画特效

网站所有特效全部基于jQuery和jQuery-ui。

在网站首页打开后,会出现全屏JS网站开启动画,时间较长。用户可以通过点击回车键、空格键和ESC键中断并关闭动画。此后所有网站内的首页链接都会添加form_site=1参数,带有该参数的链接不再会显示网站开启动画。

首页中的“展开页面”按钮功能上面有介绍,在展开和关闭页面的过程中均有动画展示。

多日志显示页面会出现日志随机位移的动画特效,我特意设置了该动画中移动的距离和速度防止造成用户眼花。

别找了,这篇文章不允许评论

弑神发表于2021.05.22nd