关于写一个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标签设置了一个名位bg的class。

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

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

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

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

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

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

之前看到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。