关于写一个typecho主题的想法,也不知道是什么时候冒出来的,可能是因为handsome审美疲劳,抑或是handsome的功能太强大,导致很臃肿的感觉。

目前为止,winds的主要雏形已经出现,但到目前为止并不完善,看着很简单,但是实际开发过程中会发现又有很多的细节问题,关于这个主题,我只想做的简单完善一些,动画不那么的生硬,以展示文章为主。

介绍

WINDS - 如风吹拂!

一款以模糊透明以及卡片化图片展示为主要元素的typecho主题。

部分的样式灵感来源于以下项目以及网站:

Material

https://nekohome.moenya.cat/

https://github.com/DIYgod/hexo-theme-sagiri

首页

首页采用两栏式结构,左侧为文章了列表,右侧为个人信息卡片和文章目录位置。我将所有的圆角元素移除,使得首页看起来方方正正。背景以模糊为主要的基调,不会存在背景影响阅读体验的情况。

侧栏

如你所见,截至2020.04.22,右侧栏并未完善,因为暂时还没有想好令我满意的侧栏样式,这让我一度想放弃加入侧栏,但是最终还是保留了下来,等待以后的样式修改。

文章页面

有换字体的想法,字体大小还需要调整,太小影响阅读,太大的话看着太过于突兀。目前基本的markdown渲染样式已经调整完毕,但并不完美,将再后续继续优化。

文章导读

暂时性的先这样,已经有了新的想法来修改。

评论

评论的样式说不上好看,但确实是清晰可见,哈哈!

搜索

关于搜索,我并没有使用typecho原生的搜索系统,而是采用了插件的形式来完成,一是我懒,二是ExSearch真的很香,采用了缓存的设计不与服务器交互而在前台实现搜索,即减轻了服务器的负担,又很美观好看。关于插件具体内容查看:https://blog.imalan.cn/archives/261/

返回顶部

可能是因为我实在是太懒,也许我技术太差,所以返回顶部的方式还是采用了插件的方式。有个萌萌哒的妹纸在旁边默默的看这你,你忍心返回顶部让她消失嘛?

MoeTop

唠叨

当然,这些并不是最终的样式,因为我也是第一次写typecho的主题,而且技术也不是有多厉害的样子,我只是尽我最大的可能将这个主题完善起来。目前这个主题只能说是距离能用还是有一段距离的。

环境

以下是感谢名单:

开发环境

  • phpstudy集成环境
  • VSCode
  • windows 1909

前端框架以及部分开源项目

  • bootstrap
  • jQuery
  • font-awsome
  • highlight.js
  • highlightjs-line-numbers.js
  • fancybox
  • jquery_lazyload
  • jquery_pjax(试验中)

插件

返回顶部:MoeTop

ExSearch搜索:ExSearch

预览地址

访问记得CTRL + F5强制刷新一下哦,因为样式会有所更改!

[button color=”success” icon=”” url=”https://winds.eas1.cn" type=””]https://winds.eas1.cn[/button]

我会将最新的开发进度放在这个地址,希望大家有什么好多想法或者意见直接在反馈页面评论,感谢!

由于每个人的审美情况不同,所以大家理智反馈哦!

下载安装

目前还未完成,所有并没有开放下载地址,放心,这个主题我是已经打算开源的,等待我把主要的布局完善起来,还有细节优化一下,大家就可以在我的GitHub仓库看到源码了。

不管最后有没有人用,我都不会在意,我只是希望我在博客圈的这些日子能留下一点东西。

近期发现deeping更新到了20beta,作为国内linux的希望,当然要下载下来尝试一下喽!据官方的介绍,内核分别升级到Debian 10和Kernel 5.3,加上重新的界面设计,带来了更好的稳定性能。从官方的介绍来看,主要添加了大量的圆角元素,设计平滑自然。

下载

https://www.deepin.org/download/

安装

先在虚拟机里面尝试安装体验一下。首先打开我珍藏许久的virturlbox,类型选择linux,版本选择debian64.

分配4g内存(为了流畅运行)

然后其余的默认就好,在创建虚拟硬盘这里给大一点的空间,我就30g吧,因为以前安装貌似最少需要16g

然后它就躺在我们的列表里面了,在启动之前,我们还需要稍微设置一下,保证开机之后的流程运行,点击设置,在系统里面分配4个cpu处理器,这个具体数量按你的电脑配置来。

然后开个机吧!

启动点击选择盘片,点击注册,找到我们刚刚下载好的iso。

然后点击选择

点击启动

然后等待安装。。。

居然需要64G的空间,千算万算却又失算!

修改磁盘大小

保存之后再次启动。

然后去泡杯咖啡,顺便记单词,又写了会作业。

体验

如果出现无法启动,反复安装的情况,只需要移除虚拟盘即可。

登陆页面很好看

由于我的误操作,不能安装增强功能,只能将就着看啦

依旧是很好看的终端

多窗口模式

总之一点就是界面很好看,性能这个问题,由于是在虚拟机里面,体验不出来,大家想尝试的话可以全盘安装体验一下,不过毕竟是beta版本,所以还是不建议生产环境使用。

很早就发现了阿里云控制台有个云命令行的选项,一直不知道是什么玩意,无意间打开看了一下,发现真的是一个linux系统。

文档:https://help.aliyun.com/document_detail/90256.html

通过查看使用文档发现这个真的是一个好东西

云命令行(Cloud Shell)是网页版命令行工具。您可以在任意浏览器上运行云命令行管理阿里云资源。在云命令行启动时会自动为您分配一台Linux虚拟机供您免费使用。在该虚拟机上预装 python、java、nodejs 环境和 aliyun CLI、curl、ssh、kubectl、fun、terraform、ansible 、vim 等多种云管理工具和系统工具,配合Cloud Shell提供的Web IDE,辅助您完成日常的云资源管理。

就是一台免费的虚拟机,里面的文件存储都是永久性的,并且带有预置的代码编辑器,不免让我想到之前使用的腾讯云CloudStudio。

代码编辑器

支持部分的开发语言,其实预装也是有git的。

使用Aliyun CLI来管理云资源

在 Cloud Shell 中,可以直接输入 aliyun 来使用

1
aliyun

这个功能可能以后可以用的到,不过咱也不是专业做运维的,所以很多功能其实用不掉云命令行来处理,哈哈

使用限制

作为静态博客生成器

云命令行支持存储空间的挂载,会挂载到一个阿里云NAS,如果使用云命令行安装HEXO生成静态文件到阿里云NAS,然后可以通过NAS同步工具同步到OSS,将OSS作为静态博客站点,不知道这样算不算滥用,哈哈!

如何打开云命令行

登陆控制台之后在右上角就可以看到图标啦!

最近一段时间有点忙碌,主要是开始着手开发一款属于自己的typecho主题了,有着wp主题ease的经验,相信这次应该也可以更好的收场。

但是我却被CSS的模糊折磨了我好几个小时。。。

高斯模糊

我是挺喜欢高斯模糊的样式的,追溯到很久很久以前,miui6的模糊真的是让人眼前一亮。

css也是支持图片模糊的,并且实现也非常的简单,使用filter属性即可。首先,我们来看看filter到底是什么:

filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度),说白了就是给图片加个滤镜。如果你不知道啥是高斯模糊,没关系,你一定见过某些H图片被模糊掉的地方。

语法什么的直接参考菜鸟教程:https://www.runoob.com/cssref/css3-pr-filter.html

重点来了,我通过使用backdrop-filter:blur(10px);来为我的图片背景添加模糊效果,

这样给我带来了很好的视觉体验,在我调整好样式之后准备下一步的工作,我发现了一个问题,就是FireFox不支持这个属性。也就是说我新写的内容在它那里完全无效。

然后我就奔溃了!闲着没事开发那么多浏览器内核干嘛?? ::tieba:Y.tb8::

解决方案

删掉body的背景图片,然后设置了一个div,内部放上一张图片作为网站背景图,并设置z-inde属性。

然后直接使用filter属性即可。

最后效果是这个样子

现在是这么一个状况,在版权意识越来越强烈的今天,各大厂商的音乐APP都对歌曲做了版权的保护。也就是因为这个原因,现在出现了VIP付费歌曲这一说法。

比如我常用的网易云音乐,不开vip的话某些歌曲只能试听几秒钟,但是开了vip的话,歌曲也只能在vip的有效期内才可以播放,即使你下载了下来也无济于事。

本地音乐播放器

所以我一直在使用一款满足音乐需求的本地播放器——Poweramp。

这款软件其实我已经使用了很久了,当初在活动期间花了0.99美元在play商店入手,一直使用到现在,不得不说在各种方面都很不错,无论是界面还是操作流畅度,对我来说都很满意。

打开动画,内置有很多的预设,配合着音乐的节拍,炫酷十足,不过会增加耗电。

[dplayer url=”https://down.wgb.ink/?/BLOG/poweramp/powerampdemo.mp4" pic=”” danmu=”false” /]

自带也有均衡器,但是我并不会用,看起来很炫酷其实对我的用处倒不是很大。
[album type=”photos”]



[/album]

从哪里下载音乐

其实我是用网易云音乐下载的啦,开了黑胶vip,然后以最高的音质下载下来。网易云音乐的音乐是加密过的,vip的音乐一般都是ncm格式,然后我通过一点技术手段将ncm还原为flac或者其他的无损格式,再上传到云盘或者导入手机,就可以随时随地享受音乐了。

我有一个小工具可以很方便的转换格式,需要的话在评论区回复,我单独发。这个工具仅限自己使用,禁止一切商务用途和违法用途。

音质

不管怎么说我都认为有线耳机要比蓝牙的音质更好,比较损耗率比较少嘛!耳机我倒是没有特别贵的,但是却都有线耳机。对于木耳来说,万元以下听个响可不是没有依据的哈!

不在乡下还真的感受不到这种生机勃勃的样子。清新的空气,迎风而来伴随着淡淡泥土味道的青草香气,一大片的油菜花壮观又颇为养眼。

清晨出去走走,无意间看到了那一颗长满刺的小树,依旧不知道它叫什么名字。

小时候,它只有一根大拇指般粗,现在都有我的大腿一般粗壮了,它的浑身满满的是熊孩子刻下的伤痕,随着日月的积累成为了它身体的一部分。

生机勃勃的树叶仿佛在展示它的生命力非同一般。

希望你能茁壮成长,伴随着春夏秋冬,成为一颗参天大树!

看到分享社区有小伙伴设置了网站全站变灰,那我也来一个进阶设置吧!用jquery的方式定时实现全站黑白。

首先看到的是这个小伙伴的文章:https://www.igetyou.cn/archives/43/,然后我就稍加修改,嘿嘿!

不多说,直接上代码:

将以下代码直接复制到自定义JS中即可,理论所有网站都适用。

1
2
3
4
5
6
7
8
9
10
11
12
13
ncov_gray();

function ncov_gray() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();

var currentTime = this.year + "." + this.month + "." + this.date;
if (currentTime == "2020.4.4") {
$("html").css("filter", "grayscale(1)");
}
}

稍微解释一下,我是通过JS的Date函数获取年月日,当年月日等于2020.4.4的时候调用jQuery为html标签设置css样式:

1
2
3
html{
filter: grayscale(1);
}

为啥是html?

因为我发现那位小伙伴用body其实是有一点缺点的,在handsome主题下,如果我们设置了背景图片,那么全站变灰仅限于盒子模型,图片并没有变化。而handsome主题的自定义样式是给html标签设置了一个名位bgclass

地球在自转,但是我想让地球停止转动十分钟,你觉得我的想法可以实现吗?

我可以用脑袋很简单的想象出地球停止的样子,但是地球真的会按照我的想法来停止转动十分钟吗?

很多的人都只站在自己的角度去考虑问题,认为自己的想法是正确的,所以这些人经常将自己的想法强加给别人,认为别人只要按照自己所说的去做,才是正确的。

我们并不能控制别人的思想,更不可能将自己的想法强加于人,除非那个人有和我们相同的想法。但自己觉得可行的想法在别人那里也并不一定适用。

为什么人会吵架闹脾气?吵架大多数就是因为双方的想法在对方那里并不适用,假如我们可以心平气和的理解对方,给对方一点余地,那么世界也就和平了。

地球不会停止自转,对方也不会按照我的想法行事,那么我们为什么还要去跟别人争吵?争吵之后我们会得到什么呢?

之前看到handsome分享社区有博主提供了复制版权的代码,复制之后会在剪切板自动添加博主的链接之类的内容,就像在CSDN博客内复制文字一样,会自动添加作者的版权链接。

我不是说这样的方式不好,但是对于我来说,每次有朋友申请友链,复制链接图片的时候总是会遇到链接不合法的问题,因为复制之后链接之前还添加了一大堆的文字,还需要一一删除。每次写东西复制自己博客以前文章内的代码,还要自己去删除版权提示。

那位博主提供的方法需要在修改主题的post.php文件,我觉得这样做有点缺乏灵活性,主题更新之后可能就需要重新配置了。

然后,我就使用layer和jQuery写了一个弹窗提示,很简单,也不会自动复制出来一堆内容,就单纯是一个弹窗提示。

[scode type=”green”]无法复制的bug已经修复了![/scode]

效果

先上效果吧!

原理是用jq监听ctrl+c和右键复制,然后弹窗提醒当前的链接地址。

使用

使用方式很简单,并且不单单是支持handsome,理论上所有主题或者网站通用。

Handsome主题使用方式

由于handsome主题自带jQuery,所以只需要在主题设置》开发者设置》自定义输出body 尾部的HTML代码这一栏内填入以下代码,保存即可使用。

1
2
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/layer/layer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/js/kaygb_cp3.js"></script>

如果不想通过外部引用的方式,也可以只引用layer

1
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/layer/layer.js"></script>

然后在主题设置》开发者设置》自定义 JavaScript输入以下代码

1
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){layer.msg('复制成功,转载请注明出处!<br> '+sitesurl)}}

如果你开启了PJAX,那么需要在主题设置》PJAX》PJAX回调函数一栏内填入以下函数,然后保存即可。

1
kaygb_copy();

其它主题或网站

首先打开你的网站,然后点击F12进入开发者设置,点击Console(控制台),输入$.fn.jquery即可查看当前jQuery版本,目前理论上2.2.4以上版本皆可。

如果你的网站有jQuery并且版本在2.2.4以上,那么只需要在您网站源码的</body>标签之前添加以下代码:

1
2
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/layer/layer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/js/kaygb_cp3.js"></script>

如果你的网站没有jQuery,那么就需要填写以下代码:

1
2
3
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/layer/layer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/[email protected]/js/kaygb_cp3.js"></script>

或者是在引入jQuery和layer之后在源代码或者主题自定义js中填入:

1
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){layer.msg('复制成功,转载请注明出处!<br> '+sitesurl)}}

同样,如果你的网站开启了PJAX,那么需要在你的网站PJAX设置内添加回调函数:

1
kaygb_copy();

最后

如果遇到问题或者出错,请先查看以下内容:

https://github.com/kaygb/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md

然后在此文章下留言或者GitHub提交issue。