因为给域名做了301重定向,所以子域名的访问都指向www.mrju.cn了,用以下规则可以处理这个办法。


# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
# me和tool对应你子域名所对应的文件夹
RewriteCond %{REQUEST_URI} !^/(me|tool).*$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

域名开启https的301重定向规则这么写入:


#网站定制化开启 HTTPS 的301重定向
RewriteCond %{SERVER_PORT} !^443$
RewriteCond %{HTTP_USER_AGENT} !MSIE/[1-8]. [NC]
# 域名改为你自己的域名
RewriteCond %{HTTP_HOST} www.mrju.cn
RewriteRule ^.*$ https://www.mrju.cn%{REQUEST_URI} [L,R=301]

以上规则都加入网站目录.htaccess内。

万网免费主机还有450多天的使用时间,然而我却搬到衡天主机来了,主要原因还是想搞一个装逼小绿锁(https)。还好衡天主机的香港独立ip虚拟主机速度还不错,不然我就觉得有点后悔了,毕竟万网那边还有那么久的使用时间。

周末这两天为了https装逼小锁,折腾的我蛋都碎了。各种免费主机搭配360网站卫士上传ssl尝试,有一两个免费主机成功使用360ssl,但是速度实在是不敢恭维,为了体验性更好,不得不购入一台有独立ip的虚拟主机,在网上看了很多带独立ip的虚拟主机,都觉得好贵,vps虽然开放性更高,但是我觉得折腾vps还不如折腾博客内容,所以依然选择虚拟主机。

昨晚在浏览我友链里的博客的时候,发现了一个博客的速度还不错,问了下是衡天的,于是就去衡天官网看了下,恩,不错,价格还能接受。199元一年的300m带独立ip的虚拟主机。在我准备购买的时候,发现未支付订单里有一个同样配置的衡天主机,价格是200元两年,突然想到去年年末的时候,衡天做过活动,当时我只是提交了订单并没支付,谁知道都隔了半年了,这个订单居然还在,于是毫不犹豫的支付了。感觉赚了。

这还不是结局,在我支付成功后,衡天分配我的独立ip居然有人在使用,而且主机的到期时间是在我去年提交订单的那个日子加上两年,我觉得有点蛋疼啊,这个使用时间2年不是从支付订单的时间计算,而是从你提交订单的那一刻计算,这样的话,就是我这个主机只能用一年半的时间,于是我就是提交了工单,2点提交的工单,衡天的客户4点的时候居然回复我了,说给我重新开一台,换一个独立ip。由于我是去年的订单,分配的是之前的独立ip。难免会出现这个问题。我以为换个主机就结束了,结果看了下主机的到期时间居然是2018年12月,我擦,这不是说我200元买了将近30个月的使用时间,不得不说衡天的服务还是不错的。

点击查看衡天给力订单:查看大图
 
既然小锁(https)出来了,以后就好好搞我的博客内容吧,充实起来还是不错的,光是个空架子也没什么意思。

如果你的主机有1G的空间,可以绑定20个域名,只用来放一个网站会不会太浪费啦,那是肯定很浪费的。接下来我们来看看怎么通过htaccess,让不同域名绑定不同子目录,从而实现同一个主机建立多个独立网站。

htaccess 域名目录分配

.htacces 真的很强大,我们使用.htaccess写入特定规则,就可以一个空间放多个网站,让不同域名进入绑定不同的文件夹,以下范例:

比如我们要根目录中实现以下的域名绑定子目录结构:


|----.htaccess文件

|----me目录(绑定域名me.mrju.cn)

  |--------.htaccess文件

|----aaa目录(绑定域名aaa.com)

  |--------.htaccess文件

  阅读更多 

这两天一直在折腾niaoyun.com送的三个月云服务器,amh和lnmp都安装试用过,也稍微的体验了一把绿色装逼小锁,但是没有后台界面管理器,很是不方便。

期间lnmp反复安装以及再删除多遍,因为强迫症,生怕哪个命令搞错了,于是就这么无限循环的反复安装让我有点心累,用来用去还是觉得阿里云两年的免费虚拟主机适合我这种强迫症用,自己搭配环境去安装WordPress很是麻烦,我算是体验到了。并且安装后的WordPress或多或少都存在的问题,比如502错误代码,以及WordPress不能自动升级版本,插件也一样不能升级。升级必须输入ftp或者sftp的账户信息,明明sftp信息对的,却一个劲的报错。还好是免费送的三个月,不然就心疼money咯!

以后就只用虚拟主机了,云服务器再见。再也不见!顺便说声端午节快乐。大半夜的写个吐槽也是无聊到底了。
niaoyun
上图就是niaoyun.com送的云服务器,配置还不错,要是你没强迫症而又想试试云服务器的感觉,可以去niaoyun.com上申请一台自己玩玩,长期用的话,价格有点贵,单纯的做博客站还是虚拟主机方便,lnmp命令虽然不多,但是还是不如虚拟主机界面管理的方便。

一直在找WordPress友情链接的页面设置方法,网上大多都是带头像的友情链接设置方法,没有找到分类链接设置的方法,像我们这些爱搞WordPress和前端的,素材网站太多太多,懒得存到浏览器书签处,就只好记在自己博客里,不至于是公司里写代码时因为一个素材而要找好久。如果你只是为了弄一个互相串博客的页面就不必往下看了,因为网上好多这样的设置方法,简单粗暴。话不多说,进入主题吧。

实现方法

本来原代码是大发_BigFa写在他博客里的,他那个links大头像样式的,对于WordPress博客还好说,有avatar头像就能正常显示,当你收藏了一堆素材网站的网址后,你会发现那些大头像就是个多余的。于是为了实用性,我就自己稍微精简了下代码和修改了样式。大发写的样式很是不错,自适应的样式。

自适应正方型的原理是利用padding-bottom:100%来实现的,为什么padding-bottom:100%等于容器宽度而不是高度呢,因为padding和margin的百分比都是按照文档方向算的,正常的文档方式是左右,自然也就是宽度了。
  阅读更多 

总觉得自己修改的博客某段代码有问题,某段css有问题,一看别人的主题都觉得好好啊。这是病吗?虽然我各方面都去调试了,版面看着也没问题,兼容性的问题在各个浏览器上也看了下,没什么问题,但是我还是觉得那里有问题,时不时的去翻一翻代码找找错误,但是目前php看不太懂,只看得懂html和css,js也是个半调子。虽说是这样的水平,但是看着psd文件也还是能手写出来一个网站出来,简单js效果也会弄。

我想问问我这是不是强迫症还是什么来着?你们做主题或者修改主题,也会有这样的症状吗?记得以前有人说过一句话,进步就是今天看着昨天写的代码都是垃圾,那就是进步了,听起来好像蛮有道理的,希望有一天我都会看明白,学无止境,继续加油!

最近一直在找tabJS切换效果和js幻灯片切换效果,还好WordPress圈有人也在做这个,虽然教程是几年前的,但是基础东西是不变,转载过来学习下,其实那位博主有独立Demo页面,但是还是要转载过来,毕竟还是怕原博主博客挂了,或者我记不得博客地址不就被悲剧了,不就白找了。好记性不如烂笔头。恩,就这样转过来吧。

还好博主给demo页面做了个html单页面,我就不用一段一段的代码和js抄过来了,直接给原博主的html单页面上传至我的主机就好了,太方便了。各位请点击demo演示网站进去学习下。
  阅读更多 

网站布局这么久了,遇到有些页面内容不够的版面,底部的footer总是会贴着内容下方一起浮动,看着很是别扭,于是就科学上网找到了这个方法,还不错,送给跟我一样刚学习网站布局的新同学试试。

方法一:footer高度固定+绝对定位

HTML结构:


<body>
    <header>header</header>
    <main>main content</main>
    <footer>footer</footer>
</body>

CSS设置:


html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;}

header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
最后,设置footer绝对定位,并设置height为固定高度值。

  阅读更多 

响应式简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。

到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。

这里有2个关键点:

一是如何在不修改Dom结构的前提下调整布局。

二是如何判断屏幕分辨率并应用对应的CSS。

以上两点都应该不依赖与JS。

实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left,宽度都用百分比表示。比如下图,黄色部分的宽度是60%,橘色宽度是40%。
1393216978_gsky.png
如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了,如下图。从而实现不修改Dom实现布局变化。

  阅读更多 

我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式,
但是默认的实在是太丑了,总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。

首先我们看我们美化过的

radio-beautuful

再回顾下默认样式

radio-ugly
  阅读更多