Cyclists 发布的文章

TYPECHO去除A标签超链接下划线

本人在二次开发主题时遇到一个小问题,用移动端访问网站时,出现超链接下划线,PC端不认真看也不容易发现,Typecho的超链接下划线一直去除不了,Google了相关信息,得到的结果只是添加全文A标签为:a{text-decoration:none;},无论我怎么添加修改此CSS标签,下划线一直存在,虽然下划线是很细的灰白色,不认真看是发现不了的,可强迫症患者表示一定要去除!

这个问题困扰了我好长一段时间,也一直没时间解决,偶然间利用Chrome浏览器的审查元素时调用相关CSS样式时发现根本就不是修改text-decoration标签,此标签是全站所有的下划线,并不是单独的超链接下划线。

去除方法:

登录Typecho后台之后编辑当前使用主题style.css文件。

Ctrl+F搜索标签:a{border-bottom:1px solid #EEE;}

搜索之后修改为:

a{border-bottom:none}

保存当前设置之后用手机端访问网站时,效果完成!

请注意,此方法目前仅限于Typecho,其他博客程序暂不支持!

Typecho利用HTML5代码实现本地视频播放

注:Typecho1.1新版本的Markdown语法不兼容导致原生HTML5视频标签解析播放失败的解决方法已经给出:点击直达链接

其实之前我一直在用羽中的视频播放插件JWPlayer,效果感觉不够理想,点击全屏播放时不能完全全屏,有时候播放转换MP4视频无法解析,分析JWPlayer插件时,发现利用的正是HTML5,何不直接使用HTML5实现更简单更纯粹的播放效果呢?

html5-copy.png

在自己分析过程中,我只用到自己常用的标签属性,如果有其他属性,其实都可以添加的。

HTML5 Video标签的使用

本人自用Video标签含有src、poster、preload、controls、width、height等几个属性, 以及一个内部使用的标签

(1) src属性和poster属性

你能想象src属性是用来干啥的。跟标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。

<video width="658" height="444" src="https://inwao.com/usr/xxx.mp4"poster="https://inwao.com/usr/xxx.jpg"></video>

(2) preload属性

这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。

<video width="658" height="444" src="https://inwao.com/usr/xxx.mp4" poster="https://inwao.com/usr/xxx.jpg" preload="auto"></video>

None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。

Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据。

Auto:全部预加载。

(3) controls属性

<video width="658" height="444" poster="https://inwao.com/usr/xxx.jpg" preload="none" controls="controls"><source src="https://inwao.com/usr/xxx.mp4" /></video>

Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。

控制栏须包括播放暂停控制,播放进度控制,音量控制等等。

(4) width属性和height属性

width属性为视频的宽度,height属性为视频的高度,此标签不做过多讲解。

(5) source标签

<video width="658" height="444" poster="https://inwao.com/usr/xxx.jpg" preload="none" controls="controls"><source src="https://inwao.com/usr/xxx.mp4" /></video>

Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。

浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。

此标签包含src、type、media三个属性。

src属性:用于指定媒体的地址,和video标签的一样。

Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。

(6) 一个完整的例子

<video width="658" height="444" poster="https://inwao.com/usr/xxx.jpg" preload="none" controls="controls"><source src="https://inwao.com/usr/xxx.mp4" /></video>

注:自行替换链接为自己的域名链接地址!

效果预览:https://inwao.com/Unbroken.html

域名DNS解析转入到CloudFlare记录

CloudXNS 疑需要实名,可能马上停止解析,请准备好转移。

接到cloudxns微信推送通知:

i5z7lt4.png

只能说国内干什么都要实名,这只能说政府一刀切,懒政已经深入民心了。

用cloudxns解析好几年了,突然推送说要求实名,只在几个小时之内必须实名,否则不给解析,这不逼我上梁山吗?

无奈,个人不喜欢实名,也不喜欢备案,国内域名DNS解析提供商CloudXNS最后一剂良药都拉下水了,也就没什么好留恋的了,果断注册并换到cloudflare,不需要cloudflare的CDN服务,只开启DNS解析,完事。

cloudflare关闭CDN方法在DNS菜单界面,把解析IP记录后面的黄色云朵点击一下,云朵变成灰色就切换到只开启DNS而不开启CDN状态了。

Lnmp环境下Typecho搬家时后台文章404解决方法

问题点:

之前从Vultr搬家到Bandwagon,搭建LNMP环境之后,上传原备份文件到新的VPS,域名解析OK,数据库通信OK,首页可访问,就是登录后台以及点击文章全出现404无法访问。

本人不才,在搜索资料自行修改无果后,求助于郭兄台,一下就给我改好了,后台以及文章都可访问,深入询问之后得知原来是Typecho伪静态规则出错,在此感谢郭兄台。

解决方法:

本人使用的是军哥的LNMP一键安装包,其他的服务器环境自行查找伪静态规则文件目录所在位置.

SSH登录VPS之后,编辑 vi /usr/local/nginx/conf/typecho.conf

        if (-f $request_filename/index.html) {
        rewrite (.*) $1/index.html break;
         }
        if (-f $request_filename/index.php) {
        rewrite (.*) $1/index.php;
         }
        if (!-f $request_filename) {
        rewrite (.*) /index.php;
         }

//复制以上代码到伪静态规则文件typecho.conf

//按Esc,:wq保存退出

//输入 /etc/init.d/nginx reload

//nginx自动重启之后,OK.

注:此方法只记录我迁移博客时出现的伪静态404问题,并不代表此方法就适合你,如果你的也是LNMP环境,也是在搬家过程中,其他都OK,就只后台文章404时,可以尝试一下我的解决方法,如果帮到了你,也是一件好事。

新归宿: Bandwagon KVM CN2 Vps

上几个月用的是$5/mo Vultr Japan Tokyo Vps(1Cpu,512M,500G,Glan),算下来一年也要RMB400元左右,本着中国传统朴素精神(穷逼精神),换到更符合自己的Bandwagon CN2,年付RMB不到200元,CN2直连中国大陆,家用电信光纤上网,无论搭建博客还是看Youtube都是嗖嗖的快,而且价钱还比Vultr便宜一半,何乐而不为呢?

Bandwagon CN2:

SSD: 10 GB RAID-10

内存: 512 MB

CPU: 1x Intel Xeon

流量: 500 GB/mo

网口: 1 Gigabit

I/O测试:

20170913122718.png

视频测试就不贴了,CN2再怎么差也能流畅观看Youtube 1080P,4K视频,拿来搭建博客更是易如反掌。

服务器搬家的同时,也换了新国别域名:Googlo.in

之前的Suming.org域名在使用百度搜索时,域名关联到大量的色情关键字,无奈换新。