PostCSS学习指南(二)

关于我最近学习PostCSS的一些相关心得和总结,主要介绍项目中可能用到的一些插件比如autoprefixer,postcss-partial-import,postcss-advanced-variables,cssnano,postcss-px2rem,precss等等

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(二))

继上一次PostCSS学习指南(一)后,渐渐开始在项目中应用。

这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。

本期主要介绍以下几个插件和几个坑

  1. autoprefixer
  2. postcss-partial-import
  3. postcss-advanced-variables
  4. cssnano
  5. postcss-px2rem
  6. precss
  7. postcss-nestingpostcss-nested
  8. 坑( ఠൠఠ )ノ

autoprefixer

这个就不用多说了,必装插件之一。方便的写规范的css,它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是,它的大部分兼容数据来源Can I Use,另外一个稍微需要了解的插件配置参数就是browsers,比如这样写:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' })
  ]
}

关于这个参数的详细介绍可以看看Browserslist Queries,文中说了,强烈建议将查询写入package.json(后面会告诉你为何要写在这里),而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下:

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer');
  ]
}

package.json内增加如下示例

"browserslist": [
  "> 1%",
  "last 2 versions"
]

这里我对着官方文档简单说一下数组内的值对应的含义:

  • last 2 versions: 每个浏览器中最新的两个版本。
  • > 5% or >= 5%: 全球浏览器使用率大于5%或大于等于5%(上例中则是1%)。

其他的一些参数简单介绍:

  • ie 6-8: 选择包含ie6-8的版本。
  • Firefox > 20: 火狐版本号大于20。

还有很多不一一列举,这里的配置还是很详细的,一般来说最省事的就是不加参数,按照默认即可。

需要配置的话,就在package.json里面添加browserslist参数,这样其他插件也能够从中获取到项目将要兼容的版本,目前包含以下几个插件会读取改配置:

关于autoprefixer的介绍差不多就这些了~

postcss-partial-import

这个没啥好说的,也是很容易理解的插件,就是让你的css文件支持@import,支持W3C的写法也支持SASS那种写法,这里就不多说啦。

postcss-advanced-variables

同样的,像SASS那样可以自定义变量并进行引用,用法也十分简单,相信大家一定不用点开官方文档也会用的~(你肯定还是点开了哈哈哈~你这叫胡开链接综合症,生怕错过了啥内容。)

cssnano

很显然这个插件作者比较高调,github的cssnano上面是没有什么说明和介绍的,当然官方也写得很详细了。这个插件通俗来讲,就是css代码压缩工具,他的配置建议采用默认配置,除非你知道你在做什么。

当然我在测试使用中遇到了一点点问题,关于cssnano和autoprefixer结合使用,或者说是postcss.config.js插件引入顺序有关的造成输出不同的问题?我暂时还在研究,先看代码:

testcssnano.css

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
}

postcss.config.js(第一种)

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
    require('autoprefixer')
  ]
}

输出结果:

.test{border-radius:10px;display:flex}

postcss.config.js(第二种)

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    })
  ]
}

输出结果:

.test{border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex}

问题一,如果手写-moz-,cssnano会清除,可见示例,当然或许这个属性在火狐已经支持不需前缀所以,就被去掉了。

问题二,如果在配置文件中,cssnano在autoprefixer之前引用,假设根据webpack的loader执行顺序规则相同的话,大概postcss.config.js中的插件也是这样由下而上依次执行,因此,在第一种例子中,css代码先被autoprefixer处理,然后再执行cssnano清除了那些多余的前缀代码?大致可分解为:

第一步autoprefixer处理结果:

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
}

第二步cssnano处理结果:

.test{border-radius:10px;display:flex}

可是我要遗憾的告诉大家。。。这个可能是错误的结论!!!

因为我将第一步的结果作为初始css,将postcss.config.js中仅引用一个cssnano插件来执行的结果如下:

.test{border-radius:10px;display:flex;display:-webkit-box;display:-ms-flexbox}

因此,这个问题就来了。。。cssnano确实将-moz-去掉,但是他并没有处理其他的关于display的兼容代码。

于是我再做了一个测试:

我将css代码改为:

.test {
  -webkit-transform: scale(.5) translate(10, 20);
  -moz-transform: scale(.5) translate(10, 20);
  -ms-transform: scale(.5) translate(10, 20);
  -o-transform: scale(.5) translate(10, 20);
  transform: scale(.5) translate(10, 20);
}

而postcss.config.js还是同时引入cssnano和autoprefixer,经过测试,无论谁先谁后输出结果均为:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

如果css代码改为:

.test {
  transform: scale(.5) translate(10, 20);
}

postcss.config.js同时引入cssnano和autoprefixer,

第一种cssnano在前结果:

.test{transform:scale(.5) translate(10,20)}

第二种autoprefixer在前结果:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

结果又不一样,不知道看到这里大家晕了没有。

根据观察,postcss.config.js的插件执行顺序是有要求的,至少在同时使用cssnano和autoprefixer的时候,cssnano一定要在autoprefixer之后,否则autoprefixer可能会失效!

另外cssnano和autoprefixer都会对很旧的兼容写法进行精简,例如上文有一段有很多个transform属性的css代码,autoprefixer会(根据browserslist)剔除其他的。

至于顺序问题,我后面继续进行研究!

postcss-px2rem

做移动端,适配是个头疼的问题,不过我目前还是使用想对稳定的方案flexible,那么就需要用rem来做主要的单位,这里不说适配问题只说这个插件,一般移动端,设计师给的设计稿都是750px宽,你只需要下面这样设置,就可以直接在代码里面写你在PSD量的像素值了,这真是太令人激动了!

require('postcss-px2rem')({
  remUnit: 75,
  threeVersion: true
})

因为这个postcss-px2rem又是来源于px2rem的,所以详细的说明见px2rem,我这里写了两个参数,一个remUnit,这个对应的是每rem对应的px值,既然750px,就写75啦,不知道这样理解对不对。另一个threeVersion则对应三个不同dpr下的大小,这个比较少用,需要注意的是处理这些参数,是否转换rem都和注释有关,这里就不细说了,看看文档就好~当然这里也埋下一个坑,等下会提到。

precss

这就是个大杂烩,主要是为了满足SASS开发者的习惯,继承了很多插件,本篇前后文都有提及precss内的部分插件,如果并不是全部用到,我建议还是一个个手动安装所需插件来进行配置,这东西,配好了以后也就不会经常改动了,而且个人认为用大杂烩很容易出现一些坑,又很难排查,例如下面两个插件,大家仔细看看。

另外还有几个插件,建议安装(当然如果你完全不知道干啥的可以忽略):

  1. postcss-mixins 一个和SASS的mixins用法相同的插件
  2. postcss-atroot 让你的嵌套css处于根部,官方有个bar.css的@import的例子很棒,可以看看举一反三
  3. postcss-extend 有相同结构却有那么一点点不同的区别,用这个可以方便的统一管理相同部分样式代码

其他的一些我个人觉得不常用或者说实用意义不大所以就没有写出来了。

postcss-nestingpostcss-nested

这两个也是从precss里面拿出来的,就是仿SASS的嵌套css写法用。为啥把这两个放一起写,因为他们长的太像了。只看名字鬼知道他们的区别,然而他们都被加入到precss里面去了。据precss介绍,他们两个的区别是:

光看这两行我是看不懂到底是个啥玩意,难道第一个是符合W3C规范的嵌套选择?粗略看了下两个插件的说明文档,没看出没啥区别。行,那手动写代码来一个个试试。先安装postcss-nesting,编译试试,哗嚓一片红。。。咋回事,我们先看看代码片段。

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

看似SASS写法没有任何问题。可是它提示的报错信息让人看不大懂

ERROR in ./src/style/index.css
Module build failed: ModuleBuildError: Module build failed: Error: undefined:783:6: property missing ':'
    at error (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:62:15)
    at declaration (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:223:33)
    at declarations (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:252:19)

啥玩意missing了个冒号嘛。。。改来改去都不对。索性拿来官方的实例。才看清楚。原来每个嵌套的样式前面都需要一个&(注意符号后面有个空格),实际上应该如下才对:

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  & li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    & .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    & .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

这里面有一段用到伪类其中&符号后面是没有空格的,是正确的。编译后的结果:

.catis-list {
  padding: 0 0.666667rem;
  overflow: hidden;
}
​
.catis-list li {
  list-style: none;
  float: left;
  margin-top: 0.506667rem;
  width: 1.506667rem;
}
​
.catis-list li:not(:nth-child(4n)) {
  margin-right: 0.88rem;
}
​
.catis-list li .iconfont {
  font-size: 1.333333rem;
  line-height: 1.333333rem;
  color: #506071;
  display: block;
  text-align: center;
}
​
.catis-list li .cati-name {
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  display: block;
  color: #999;
  text-align: center;
}

那么这样就没有问题了。和官方的说明的是一样的,但是另一方面,如果每次都要写&加空格,那岂不是很麻烦,习惯写SASS的兄弟们肯定不愿意这样做啦。

那么我要说的就是另一个插件postcss-nested,如precss所述,这个的确是SASS-LIKE了。当然我暂时还不太明白为何precss要收入两个nest插件(为了满足不同开发人员的习惯?)。我们修改postcss.config.js使用postcss-nested,并重新修改样式代码之前第一段,再次编译执行,一切OK,那么结论就是,如果仅习惯于SASS的嵌套写法,安装postcss-nested插件即可~

坑( ఠൠఠ )ノ

  1. 最后来说说我遇到的坑,除了刚才说的cssnano和autoprefixer同时使用需要注意顺序问题。还有另一个顺序研究,就是确定好将要使用的插件后,在postcss.config.js中配置插件require顺序还是有讲究的,这里我个人观察的确还是从上往下的(至于是不是每个插件轮流处理完文件后挨个执行我尚不确定),比如说,postcss-partial-import这个理应是第一个引入的,你若是把它放在最后面,而css代码中第一行就用了@import那肯定会报错!所以,建议根据css代码的写法来决定你的执行顺序。
  2. postcss-nested插件是大部分SASS开发者所喜爱的,但是你在css文件中用sass写法会遇到以下几个问题:
    1. csslint,css文件不支持嵌套,变量等写法,如果你将文件模式改为sass,注释的方式会变成//,而非/* comments */,当然你可以手写/* ... */这样的注释,但是用快捷键进行注释会很痛苦。

      这里有个小技巧,让项目所有css文件均为sass模式下编辑,在项目settings.json添加:

      "files.associations": {
        "*.css": "scss"
      }

      当然你若是想要支持//注释也是可以的,请再安装postcss-scss插件,我这里不多说这个了,因为我已经决定手写注释了😭

    2. 你手写注释没有问题,然而编译出来的东西会出问题,你样式中最后一行如果将注释写在花括号内部,它转换出来的代码,注释会在外部,这是个大坑,因为在使用postcss-px2rem的时候,那注释来控制是否转换的功能就失效了。我文字描述可能让人迷糊,所以看看代码:

      例如CSS部分代码:

      .test {
        color:#999;
        border:1px solid #ddd; /* no */
        .inner {
          color:#333;
        }
      }

      转换后:

      .test {
        color:#999;
        border:0.13333rem solid #ddd;
      }
      /* no */
      .test .inner {
        color:#333;
      }

      而不是我想要的:

      .test {
        color:#999;
        border:1px solid #ddd;
      }
      .test .inner {
        color:#333;
      }

      理论上是应该输出我想要的结果,却没有输出正确,错误的将1px的border转成rem,原因就是先执行的postcss-nested将注释弄在外部后,postcss-px2rem无法识别到它的规则了。

      我一开始也是装了precss后发现该问题,后来查了很久才发现是这个插件的问题。同时也发现了这个人其实已经提过issue了Wrong location of comment of the last declaration in a nested rule definition只是没人解决。

      而我临时处理的方法就是只好将要注释的那段代码不要写在最后一行了。如下:

      .test {
        border:1px solid #ddd; /* no */
        color:#999;
        .inner {
          color:#333;
        }
      }

      可能有时候并不会有两个样式给border垫底,如果只有一行border的样式,就只能这样:

      .test {
        .inner {
          color:#333;
        }
        border:1px solid #ddd; /* no */
      }

      这样倒是可以了,不过看起来很奇怪,所以如果你使用和我相同的处理方式时,务必注意此点(写完本文时我似乎发现了更好的解决方案,等确认了没有问题后,放在下一期来写~)。

(我记得好像还有坑的,硬是想了半天想不起来了。。。那就先这样吧)

本期结语

最后如果你还想探索更多好玩的好用的插件,你可以看看这里PostCSS Plugins List还有这个可以搜索的分类插件列表,如果你发现了更棒的插件,也欢迎留言喔~另外上面的例子如果我没有写的很明白,或者你只是想直接拿来快速测试使用的话,可以看看这个mobileweb

(关于第三期PostCSS的内容还在考虑。。。可能是对第二期的补充和填坑~敬请期待🙃)

为了WordPress支持markdown…我重装了wordpress和theme,然而…

为了让wordpress支持markdown,重新升级了后台和主题还是没能像官方说明那样解决…最后才发现,那是给基于wordpress官方站点上创建的博客使用的…也真是醉了.

随着时代的推移,大部分文档开始使用markdown格式来编写了…我也打算把这些我排版好的markdown格式的文件直接弄到wordpress上面发表…我Google了一下,第一篇就是这篇文章Markdown — Support.

满怀欣喜的按照里面的说明找到设置 – 撰写, 却没有看到那个开启markdown的选项.

我有点不爽,难道是版本过低.对于每次进入后台都看到升级提示已经令我很不爽了…好吧我更新一下吧.折腾了大半天更新完了…也就是现在看到的博客的新样子…有2015主题换成了2016主题,本来想2017的,完全不懂头部的那张大图的设计含义…小心翼翼的保证一切主题修改的没出错(其实我也不知道到底出错没).主要是插件,主题的部分php修改,还有自己添加的代码高亮组件.反正瞎倒腾好了…再次满怀欣喜的找到设置-撰写发现根本就跟之前一样的时候…

我觉得我经历了绝望.这什么破玩意哦…遂去查找有没有相关的Markdown插件,貌似也没一个比较好用的…

这次大的更新,就当作是升级了一下…找了很多为什么没有刚才那个选项,后来说只有在他们服务器上面开的wordpress站点才支持,并非wordpress这个程序支持…于是我在我在wordpress上面创建的博客后台找到了…真是坑爹.

wordpress是不支持markdown的
wordpress是不支持markdown的

好吧,至此,如果实在是要的话,就只能用插件了…我不太想装插件,勉强就先这样了.如果你需要的话,据说比较好用的就是Jetpack了,大家自己尝试下下咯~

参考:

How to use markdown for wordpress posts

在Wordpress中如何使用MarkDown编辑博文?

魅族手机MX2原生浏览器字体大小问题

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,

都知道魅族的手机很坑了,我就不多说了.

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,如果你的魅族手机有遇到类似问题,可以试试这个demo测试一下,顺便看下源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meizu mx2 stock browser bug with font size style</title>
<style type="text/css">
* {margin:0;padding:0;}
body * {/*height:150px;*/display: block;}
</style>
</head>
<body>
    <h1 style="font-size:60px;">h1 tag with a font-size 60px style!</h1>
    <p style="font-size:60px;">p tag with a font-size 60px style!</p>
    <span style="font-size:60px;">span tag with a font-size 60px style!</span>
    <strong style="font-size:60px;">strong tag with a font-size 60px style!</strong>
    <a href="#" style="font-size:60px;">a tag with a font-size 60px style!</a>
</body>
</html>

从这个代码中可以看出,所有元素应该都是60px字体大小.

但是又可以发现a标签的字体大小是比以上字体大,实际上a才是60px大小,而其他元素的字体大小则是一个默认值.为什么会这样,请问魅族开发人员!

我发现了一个现象,上面把高度给注释去掉了,也就是”hack”后,则字体大小显示正常,均保持了60px,见demo2…这是什么原因.

鬼才知道!

因此我们一致认为魅族原生浏览器坑爹.我不记得web标准是需要给设定了字体大小的元素加高度的吧…

IScroll的click单击事件变为双击多次触发解决

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.其间收集了一些资料,但是苦于项目上线后一直都比较忙,也就没有什么时间总结这个iscroll插件的一些问题,距离项目上线已经有了半个月了,我下文写的不好还请见谅.

首先iscroll是为了让wap端页面的的某个层内能够固定滚动而特别制作的,我起初想这个东西使用好像还是比较广泛的,问题应该不多吧.之前同事也有使用过,不过基本上使用的是简单的功能,而我这次进行的更多是复杂的交互效果,因此,让我纠结了很久的就是android手机在不同系统版本上,在不同浏览器上以及不同系统版本和不同版本浏览器这三种情况都可能发生各种问题.

参考资料:

https://github.com/cubiq/iscroll/issues/674

https://github.com/cubiq/iscroll/issues/547


以上内容是一个月前写的…我已记不清了,大概是处理不同设备的click事件遇到了很多问题,,,这篇文章放在草稿箱许久了,是时候终结了!

这个iscroll插件的确有很多需要注意的地方,仔细阅读了文档重要部分好几遍,结果写的代码还是问题很多,本文就iscroll使用上的一些问题总结一下与大家分享分享.

我们先来看一个demo(从项目中提出可能有部分冗余代码),主要用于分类选择,菜单弹出功能,(实际应用效果见太平洋电脑网手机端产品库页面,当然后期可能改版,实际效果与demo略有差异)如,用到zepto库,iscroll插件.其中iscroll主要是处理固定高度的滑动效果,它能够自适应并兼容很多设备,所以我选择了插件.

当然每个可以上下滑动的区域都需要创建一个IScroll实例,只需要简单的一句话即可,但是要遵守它的HTML代码结构,详细可以参考官方文档.这里就不讲基本的使用方法了,底部有资料写的很清楚了.我就简要说一下关于这个DEMO中的注意事项.

首先是这是一个带有弹出层的页面,每次点击导航会有一个向下滚出的层,那么弹出后就会创建对应的一个或两个iscroll实例,当点击顶部收回的时候,容易忽略一点,刚创建的实例依然存在,假设收回不销毁新建的实例,就会出问题!

其次,iscroll内的的click事件处理,默认是false,这在ios系统的手机上会出现click执行两次,也就无效的情况,需要改成true,所以需要对创建的示例增加参数.但是问题在于兼容了ios后,android各个版本会出现同样的问题.解决方案,对不同的安卓设备采取不同的click属性值处理,但是经过大量机器测试,依然可能出现无法兼容的情况(实际上是通过一个正则处理的,见代码)

function iScrollClick(){ //设备识别来控制iscroll的click真假
    if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
    if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
    if (/Silk/i.test(UA)) return false;
    if (/Android/i.test(UA)) {
        var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
        return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false;
    } //测试大量机器总结的规律,可能会有极小部分机器在选择功能上依然出现问题
}

其实官方文档中有一个options.preventDefault的属性可以配置,但是不知道是哪里出了问题,经过反复测试都没起到作用.于是这个问题折腾了很久…直到有一天…

虽然早起处理这个问题的时候就知道有fastclick,或许可以解决,但是又是一个插件,毕竟一个项目中用太多的插件不好,所以未采纳,前几天研究移动端的touch事件和普通的pc端click等事件时,更清楚的明白了一些东西,例如事件冒泡等…反复琢磨测试,觉得fastclick或许也是可行的,既然之前的方案不够完美,不妨试试这个demo,去掉了iscroll对click的配置(即默认都是false),并添加了fastclick插件及全局配置后,测试了很多机器,发现,并未出现问题.那么目前来看针对iscroll出现的双击,穿透,或是点击延时等问题应该全部处理好了!

毕竟这个内容过去太久,凭借回忆来写的,可能有些混乱,建议有遇到类似问题的朋友仔细看看两个demo的区别,一个是正则处理iscroll的click属性的demo,一个是用fastclick插件的iscroll demo,只需要注意两个demo的js的区别即可!

最后附上相关参考资料:

官方资料: IScroll官方网站 IScroll PDF参考手册 IScroll Github

其他: iScroll 5 API 中文版


后来发现,原来这不是万金油,总会有些坑爹的情况.比如魅族原生浏览器,还有chrome…竟然也会出问题,太失望了.

也就是说,在魅族原生浏览器下,需要设置为click : true才能正常运作,魅族原生浏览器如果false则会出现两次点击,而产生意外情况.而chrome则是当false时,整个iscroll容器内的事件全部被阻止了..没有办法只得打补丁了.于是加了以下代码…

var clickBoolean = false;
if (/Chrome/i.test(UA)) clickBoolean = true;
if (/534.30/i.test(UA)) {
    if (/UCBrowser/i.test(UA)) clickBoolean = false; //覆盖同版本
    else clickBoolean = true; //魅族原生?
}

我本来想通过UA标识来区分魅族浏览器,因为我这个写了534.30来区分魅族的方法风险太大因为UC也是这个版本,所以又加了一条如果是uc还是要用false,想在魅族的UA上处理,但是魅族原生浏览器真的很坑,UA上面根本无法下手.只能临时采用下策了.

这几点是需要大家注意的…(2015年2月2日18:54:00)

更新至WordPress 4.0

花了两个晚上,总算升级到了4.0,本地测试了半天,最后还是没有重新安装而是直接升级.也不知道会不会出问题.

不得不说住在这里的电信太坑爹,玩炉石要挂代理,用个FTP工具也要代理!!!我空间服务商也是折腾了半天,才连上.

本来说早点睡,但是一整博客就没完,仔细对比了3.8.1的主题和4.0的2012年的主题,进行了修改,其中并没有太大的改动,我想可能主要是维护2014的主题吧.另外其他增加的功能也没什么测试的.

最近也是瞎忙,一直没更新博客,本来是200W排名,虽然不值一提,但是降到600多W也是很不爽的.准备有空最近再来整改一下博客,优化一下了.

wordpress高亮插件Highlight.js手动添加及使用说明

使用WORDPRESS已经有很多年了,作为一个以技术内容为主的网站,经常会在文章内引用到各种语法的代码,在wordpress插件管理中,我们同样能够找到很多关于语法高亮的插件,有的十分完美,体积却异常庞大,比如我之前使用的Crayon Syntax Highlighter,若果博主们对自己的服务器很有信心,又喜欢强大的配置管理,这款插件实在是省事,可是我总觉过于臃肿,因为很多功能用不到,于是后来我找到了另一个插件SyntaxHighlighter Evolved,这款插件相对来讲很简洁,并且它所使用的高亮JS是很多大型网站都在用的,可是不知道为什么我这里看起来感觉怪怪的,并且它使用起来需要用到类似[html][/html]的标签,如果一旦放弃使用这个插件,恐怕就杯具了.虽然之前经过慎重考虑,选用了此插件,但是高亮效果感觉并不满意,最终寻找到了或许更好的或说更适合我的”高亮插件”–Highlight.js(其实wordpress里面有个wp-highlight.js的插件不知道是不是这个js,我没装,只是看了下,其实也是有下文提到的问题的.而且还不精简,所以我就决定手动添加)!

今天我就来简单介绍一下如何使用这个Highlight.js(如果喜欢自己琢磨,可以直接访问官方网站highlight.js查看相关说明)

当然我也是看了官方文档说明,总结给懒人看的.

本地测试

一. 准备必要文件

既然是使用它,那必须是需要一个highlight.js了,这个js可以自定义生成,这一点非常适合我,毕竟我只是一个小小小小的前端工作者,我只需要高亮显示html,css,js,json,最多加个php,sql了.于是,在这里,自定义配置这个js–Custom package,此处勾上自己需要的,然后点击Download按钮,很快一个zip文件就下载好了.

继续阅读“wordpress高亮插件Highlight.js手动添加及使用说明”

jsfiddle网站被封,大量日志重新修改

最近显示谷歌被封,接着还有一大堆常用的网站都出现了访问不正常,有本事你把github也封了吧~

我这可怜的小站长,只好把现有的201篇日志,花了我将近两个小时从头到尾翻了一遍,找出所有用了jsfiddle的文章,全部注释掉,说明如下:

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

近日特作此说明.若有发现遗漏请和部分错误与我联系,毕竟文章数量大,恐怕会有错误,谢谢合作!

wordpress默认主题引用google fonts导致访问速度过慢解决

这几天博客访问量下降,虽然本来每天就不多,这下可好,发现网站直接打不开,明白的人,都知道谷歌的服务器受影响了,所以博客就打不开了,估计很多wordpress中枪,临时解决方案就是将那些引用自谷歌服务器的文件取消,可是如何才能取消呢,小弟无才,自己未能解决,最终从网上找到两篇,一篇是cnblogs上的,写的好像很不错,不过没试成功,另一篇,更离谱,修改functions.php的一段代码,我却都没找到,也不知道是什么版本的.

最终还是用了插件,总算舒服了些,其实我不太喜欢给wordpress安装一大堆插件,等过几日有时间再来研究一下这个或许跟调用twentytwelve_get_font_url有关的函数吧.

有需要的可以安装此插件,插件名称: Disable Google Fonts

安装后启用即可,生在中国,要么忍要么…算了不想说了.还是乐观点吧.

WORDPRESS自定义模板后的PO文本翻译修改以及MO修改教程

wordpress这个程序虽然强大,但是有时候根据自己需求不同,需要进行一些模板的修改,这次就我自定义模板后出现的一些问题和大家分享下,内容涉及到主题的修改以及PO文本翻译修改,还有MO文件的修改等内容.

先简单说一下我的需求,我希望图片附件模板(image.php)里增加一条作者信息(实际上还是为了google的seo优化处理的),而默认是没有的,怎么处理,可参考该页面OCZ Vertex4包装正面图一(当然目前是已添加好的),如图:

修改图片内容模板信息
修改图片内容模板信息

现在应该很容易理解我要做的事情了吧,这个东西看起来似乎也是很简单的,不过当你看完这篇文章,也许你不会轻易这样想了.至少我完美解决这样的小问题花了3个小时,不过我的确不熟悉wordpress和php,也没有人能帮助我,好吧,闲话少说,步入正题. 继续阅读“WORDPRESS自定义模板后的PO文本翻译修改以及MO修改教程”

如何使用git for windows与github同步数据

其实,github这个东东很多经常做开发的人都应该知道,可以将自己做的demo上传维护并管理,也可以把其他人的优秀作品抓来研究学习,可谓一个很棒的网站.今天主要介绍一下git for windows(msysgit)与github同步的方法.

前几天在同事hoosin的简单介绍下,我又决定尝试好好学习利用一下github这个利器了.正巧有个朋友曾经试过失败了,希望我写个简单的操作过程,那么我接下来就简单介绍一下本地git与github数据同步的一些方法及过程. 继续阅读“如何使用git for windows与github同步数据”