那些人/那些事…
live write的妙用（一）
live write每天都在给我惊喜，今天也不例外。
在进入正文之前先骂一下IE6，IE6是一个自以为是的家伙，都是微软这个父母给惯坏的，不遵循w3c的标准，对CSS的支持存在一些问题，在其它浏览器中显示得好好的页面在IE6中就不正常了，本网站的首页就是一个例子。骂归骂，毕竟IE6还是占据了绝大部分的市场，网页设计师不得不考虑它。
巧改英文链接
永久链接的乱码问题又是IE6的另一个缺陷，linuxabc启用了永久链接，当文章名是中文时，则链接在IE6的浏览器中显示的是乱码（在firefox中显示正常），live write的文章属性中有一个“数据域”，我们可以在这里输入文章的英文链接，例如《live writer 试用手记》这篇文章，alfie就改成了live-writer-try-out-notes，于是该文的永久链接就由乱码变成了http://www.linuxabc.net.cn/wordpress/live-writer-try-out-notes.html，在IE6和firefox均能正常显示该链接。
支持多个blog
alfie也在家里的电脑上架设了一套wordpress测试环境，在将文章发布到互联网前，需要现在测试环境测试一下。live writer提供了管理多个blog的功能，可以在“工具”—“帐户”中新增，发布文章前先确认当前所选定的blog即可。
| 打印文章 | 这篇文章由alfie于2008年09月30日 02:25发表在软件。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有评论
没有引用
如何在DreamHost中升级wordpress
大约1年前 - 没有评论
linuxabc租用的是DreamHost的空间，该空间提供了PHP+MySQL，用户可通过SSH或者Web panel进行管理，由于我是跟别人合租的，因此没有Web Panel的管理权限，也罢，SSH更适合我一点，方便、快捷。 2.7.1相对于2.6而言融入了很多新的特性，出来也有一段时间了，已趋稳定，因此我打算升级到2.7.1，与此同时，放弃了自己打造theme的幻想，直接用Jinwen的js-o3-lite，网页设计还真不是自己的强项。 wordpress升级很方便，基本的步骤是用新的wordpress替换掉就版本的wordpress，然后重新更新一下数据库即可。 1、用FlashFXP将2.7.1压缩包上传到DreamHost 2、备份旧的wordpress user@computer:$ tar cvf linuxabc.net.cn.20090530 linuxabc.net.cn/ 3、将wp-config.php拷贝出来 user@computer:$ cp wp-config.php ../ 4、删除linuxabc.net.cn目录 user@computer:$ rm -rf linuxabc.net.cn/ 5、将新版本的wordpress解压到linuxabc.net.cn user@computer:$ tar zxvf wordpressxx.tar.gz linuxabc.net.cn 6、根据旧的wp-config.php更改linuxabc.net.cn/wp-config.php 主要是数据库的用户名和密码 7、在IE中打开http://www.linuxabc.net.cn/wp-admin.php 这时会出现要求更新数据库的提示，点击“确定”即可完成整个升级步骤，非常简单。
LinuxABC主题之等高布局
大约1年前 - 没有评论
LinuxABC采用了传统的布局： 由于目前content和sidebar未设背景色，沿用了body的#，显得很呆板，而且读者不容易将视线聚焦在左边的内容上，所以alfie决定将content的背景色改成白色，sidebar的颜色改成灰色系，改完之后发现两边不等高，如下图的左边所示，其实alfie的的初衷是实现右边的效果。 于是上网搜了一下，原来这个问题早已有之，众人也是八仙过海各显神通，总结了一下有以下四种解决方法。 一、分层交错法 英文原文是：Equal Height Columns with Cross-Browser CSS & No Hacks 原文的例子是三栏的，定义三个不同背景色的div： 通过控制width的百分比，将各个层错落显示，达到每个col显示不同的颜色，而且是等高的。 详细的实现方式请参阅原文。 二、border-right alfie无意中进入http://www.alistapart.com/，看到了border-right这种解决方式，下面以LinuxABC为例简要说明。 首先将wrapper的背景色设为白色，content也设为白色，并且border-right的宽度为sidebar的宽度，sidebar的背景色设为#EDEDED 当content高于sidebar时，由于content的border-right的颜色即为sidebar的背景色，因此sidebar短缺的部分由content的border-right背景色不足； 当sidebar高于content时，由于wrapper是content和sidebar的父容器，content短缺的背景由wrapper补足； 这样就实现了两栏等高的问题，如果读者想知道三栏的实现方式，可以参考原文：Multi-Column Layouts Climb Out of the Box index.php: <div id="wrapper"> <div id="content">This is the content</div> <div id="sidebar">This is the sidebar</div> </div> style.css: #wrapper{ background-color: #FFFFFF; overflow: hidden; width: 100%; } #content{ background-color: #FFFFFF; width:
LinuxABC主题之圆角
大约1年前 - 没有评论
在web2.0的时代，网页设计大量采用了圆角效果，套用《大腕》里的一句台词就是“你不圆都不好意思跟别人打招呼。”，alfie也不能免俗，决定为LinuxABC的页面元素加入圆角效果。 目前实现圆角效果的主流方式有两种，一种是CSS+DIV，另一种是使用圆角图片。这两种方法对alfie来说都不方便，第一种需要掌握复杂的div嵌套，而且圆角无法做到抗锯齿；第二种则需要使用图像处理工具，而alfie最怕的就是去学习photoshop这个庞然大物，所以决定另辟蹊径。 曾经见过有人用JavaScript解决过圆角问题，而LinuxABC将大量采用jquery，所以alfie搜索了一下jquery的官方网站，还真的有好事者做了圆角效果的插件，而且还不少： JQuery Curvy Corners JCorners JQuery Corner Gallery rounded corners 对比一下上面几个插件，alfie最终决定采用rounded corners。因为另外三个插件不支持在div里直接提供参数，当多个页面元素的圆角弧度均不相同的时候需要用户在$("#ElementID").corner()中单独提供参数，这就造成展示层跟代码层的混合，不利于后期的维护。下面以一个例子展示JQuery Corner Galley和Rounded Corners两个插件的不同之处。 为LinuxABC的 topNavi的左上角和右上角做圆角效果； wrapper的左下角和右下角做圆角效果； JQuery Corner Galley： <script> $(document).ready(function(){ … $(‘#topNavi’).corner("round top 4px"); $(‘#content’).corner("round bottom 5px"); … }); </script> <div id="topNavi">…</div> <div id="content">…</div> Rounded Corners： <script> $(document).ready(function(){ … $(‘.rounded’).corner(); … }); </script> <div class="rounded {4px top}" id="topNavi">…</div> <div
wordpress中代码高亮显示的三种方式
大约1年前 - 1个评论
由于alfie经常要写技术文档，经常需要在文章中插入代码块，于是比较了几种代码高亮的解决方案。 一、通过style.css格式化代码块 这种方式是最原始的，一般的主题的样式表中都会有都会有类似下面的语句： code{ font:1em ‘Courier New’,Courier,Fixed; display:block; overflow:auto; text-align:left; margin: 10px 0; padding: 5px 10px; background: #FBF5DF; border-top: solid 1px #EDE0B3; border-bottom: solid 1px #EDE0B3; } 只需要在代码块前后加上<code> 和</code>就可以在文章中简单的格式化代码块了，不过这种方式比较简陋，仅能实现代码的字体和大小，无法实现关键字高亮、缩进等。效果见上 二、在文章中直接插入已格式化好的代码 网友Unmi(隔叶黄莺)在dp.SyntaxHighlighter的基础上写了一个代码高亮的工具：CodeRender，它有自己的样式表，并提供格式化功能，可以依据各种不同语言的关键字进行高亮显示，用户只需要将格式化好后的<div>块插入文章中即可。下面是CodeRender工具的截图： 下面则是使用CodeRender的效果： 三、使用wp-syntax插件 wp-syntax是一个专门用于代码高亮的wp插件，它是基于geshi这个php开源程序进行二次开发的，支持的语言种类异常丰富，用户只需要在写文章的时候，在代码块前后加上：<pre lang=”Lanuage”>和</pre>，后台就会自动帮你格式化代码了，下面是效果图： 对比三种方式，第一种最简单，但是功能最弱，无法满足要求；第二种灵活性最强，即使更换了blog系统，文章内的代码块效果依然保持不变，但是用户使用麻烦，需要频繁的在CodeRender和blog编辑器间切换；第三种使用比较方便，而且效果最佳，唯一的劣势仅限于wordpress平台，万一哪天换了平台，原有文章的代码块效果就消失了。不过一旦用上了wordpress，更换其它blog系统的可能性就很小了，因为它是如此的漂亮和优雅。 因而，建议采用wp-syntax插件这种方式，类似的插件还有国人编写的coolcode，有兴趣的读者也可以试一下。
如何在不同页面间使用不同的样式表
大约1年前 - 没有评论
大多数主题使用一个统一的样式表: style.css，这并不能满足一些特殊需要，例如linxuabc的首页(index.php)和全文页(single.php)布局就不一样，所以需要实现在不同页面中使用不同的样式表。 wordpress的动态页面都是通过调用header.php来构造的，而header.php定义了当前页面的样式表，所以解决的思路是判断当前是什么页面，然后根据不同的页面调用不同的样式表。下面是linuxabc中header.php关于css调用的代码 1 2 3 4 5 <?php if ( is_single() ) { <link rel="”stylesheet”" href="”<?php" bloginfo(’template_url’); ?>/single_style.css” type=”text/css” media=”screen” />; <?php } else { ?> <link rel="”stylesheet”" href="”<?php" bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” /> <?php } ?> 以上语句说明了当显示single.php的时候使用single_style.css这个样式表，否则使用sytle.css。 really easy, huh?!
wordpress、windows和永久链接
大约1年前 - 3个评论
在blog中发布一篇文章后，wordpress会自动赋予一个post_id，读者访问这篇文章时，通过浏览器的地址栏可以发现其链接形如：http://example.com/?p=N，其中N就是post_id，这样的链接对读者毫无疑义，对搜索引擎也不友好，所以需要更改链接的样式，改成什么样好呢？wordpress提供了几种方式，如下图所示： alfie倾向于使用这种样式：http://www.linuxabc.net.cn/mobile/palm-or-wm.html/，这种链接不深，容易被搜索引擎收录；不带日期，容易迁移；带有分类，容易管理，最后是文章名的英文，容易理解。在“自定义结构”中输入/%category%/%postname%.html/，再点击“保存修改”即可启动永久的自定义链接了。 有些用户在windows下安装了wordpress环境，由于默认情况下apache2 for windows不加载mod_rewrite模块，所以wordpress的自定义永久链接无法正常工作。alfie今晚就被这个折腾了很久，终于找到了解决方案： 一、修改httpd.conf，启用mod_rewrite.so #将下行前面的#删掉，加载mod_rewrite模块 LoadModule rewrite_module modules/mod_rewrite.so # 默认情况下apache2对其根目录设置了 AllowOverride none的权限， # 故无法创建和修改.htaccess文件，请增加下列配置 <Directory "D:/Apache2/htdocs/wordpress"> Options Indexes FollowSymLinks AllowOverride All </Directory> 二、创建.htaccess 当启用永久链接时，wordpress会在其根目录下自动创建.htaccess文件，所以读者不用担心，如果发现没有该文件的话，也可以自己手工创建，内容如下： # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /wordpress/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /wordpress/index.php [L] </IfModule> # END WordPress 最后在重启apache服务就可以在windows下启用永久链接了。 另外需要提醒大家的是尽早在安装测试环境后马上进行上述的修改，链接样式变更后，搜索引擎所收录的旧链接将失效，读者访问你的文章时将得到404错误。
live writer试用手记
大约1年前 - 1个评论
wordpress堪称完美之作，但有一点令我耿耿于怀，那就是孱弱的文章编辑功能： 1. visual edit名不副实，在后台攥写文章发布后却不是那么一回事； 2. 速度慢，wordpress的后台那叫一个慢啊，点个按钮得等个3、5秒； 于是，把目光投向离线编辑器，试用了几个发现最好用的还是微软出的live writer 令我诧异的是，这么优秀的软件，居然是免费的，向来唯利是图的M$，居然提供了一顿丰盛的免费的午餐！ 不过我爱上live writer的历程却并不轻松，安装过程颇费周折。live writer没有独立的安装程序，需要WLInstall.exe这个引导程序通过网络进行安装（注意：live writer依赖于.net framework 2.0，用户需要先装这个组件），WLInstall.exe实际上是微软live计划的入口，运行后将检测你机器上的live组件，并默认安装/更新所有组件，真霸道！说到这alife又忍不住想f*ck微软了，不过转念一想，我们在吃免费的午餐，还有什么资格对人家口诛笔伐呢？说到这就不得不说国内用户的丑恶嘴脸，一方面在用盗版的windows，一方面又骂微软定价过高、安全性差，是，没错，windows的售价大大超出了国民的支付能力，但你可以不用啊？微软又没有把刀架在你脖子上，所以既然偷偷的用了别人的东西，就是不要再抱怨这抱怨那了，知足吧。扯远了，安装的过程就不多说了，为了方便读者，alfie将live writer的安装目录压缩了，放在这里供大家下载，解压后就可直接运行，再提醒一次，需要先安装.net framework 2.0哦。 live writer的功能介绍 一、界面 live writer继承了典型的微软风格，类似office，很容易上手 二、真正的所见即所得 这是微软的强项，无出其右者，可能有的读者会反对，觉得Tex才是真正的WYSWYG，这就不深究了，对于普通用户而言，唯M$是也。在live writer安装的过程中，它将自动检测blog类型，并将blog模板下载到本地，这样用户就可以边编辑边查看在网站中的效果了。 三、贴心的图片编辑功能 这是alfie的最爱了，用户不仅可以在live writer中调整图片大小、变形、旋转的基本操作，还可以增加各种效果，例如上图就用了阴影效果，最贴心的当属水印，用户可以在图片中写上自己博客的网址，防止文章被盗用，这也是一种维权的手段之一，真的是太贴心了，alfie在用到这个功能的时候有一种很温暖的感觉，^_^。 四、智能发布 用户发表一篇文章后，觉得不满意，再修改再发布，仍然可以覆盖原先发布的文章，甚至更改了文章标题也不妨，不知道这是无心插柳还是有意为之。如果是有意为之，则微软的体贴到了极致；如果这无心插柳，则这个bug显得那么可爱，alife要的就是这种效果。 live writer还有插件接口，将来肯定会有越来越多的插件丰富其功能，对于拥有blog的用户，live writer绝对是不容放过的一道美食。
如何在wordpress中置顶精华文章？
大约1年前 - 没有评论
很多博主有这样的烦恼，一些精华文章随着时间流逝而慢慢沉底，那在wordpress中如何将这些精华文章置顶呢，就像论坛的置顶文章一样？答案是肯定的，一种方法是通过WP-sticky这个插件，不过功能有限，仅能对一篇文章进行置顶，我们不做深究；另一种方法就是手工调整源代码了，在页面中增加“精华文章区块”，废话少说，先来看看效果图： 这个截图来自于http://www.geekishblog.com/，博主用的是Organic这个主题，该主题的sidebar.php里有一个包含两个标签页的区块，第一个标签页的内容是Recent Post，第二个是Recent Comments，接着再通过样式表和tabber.js这个类来实现ajax的效果，那我们也可以利用它做一个“精华文章区块”来放置精华文章。先下载tabber.js 一、解压到主题根目录下 压缩包里面有多个示例文件和两个js文件，还有一个样式表，将tabber-minimized.js和exmaple.css解压到主题的根目录下，并重新命名为tabber.js和tabber.css。 说明：两个javascript文件的内容完全一样，tabber-minimized.js是tabber.js的优化版本，文件尺寸小，能加速网页的浏览速度。另外，这是一个遵循GPL的自由软件，用户可以免费使用。 二、修改header.php 标签页的效果是利用无序列表+CSS+javascript来实现的，因而在header.php中指定这两个文件的URL。 <link media="screen" href="<?php echo bloginfo(stylesheet_directory). ‘/tabber.css’; ?>" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .’/tabber.js’; ?>"></script> bloginfo是wordpress的函数，stylesheet_directory是bloginfo的参数，整个语句的意思是构造tabber.js的绝对路径，这样用户的浏览器就可以正确的下载该文件了。最后加上这段： <script type="text/javascript"> document.write(‘<style type="text/css">.tabber{display:none;}<\/style>’); </script> 默认情况下浏览器会在tabber类加载前优先显示标签页的内容，这会影响影响用户的体验，这段代码的作用是保证tabbe类加载之后方显示“精华文章区块”。 三、确定“精华文章区块”位置 在网页的哪个位置放置“精华文章区块”呢？这个问题还蛮挺重要的，很多主题都将类似的功能区块放在右边栏，因为这样有利于用户导航，而本网站使用的是ProSense这个主题，侧边栏的位置大小有限，所以把它放在第一和第二篇文章之间，这样也能醒目展示“精华文章”。 下面是ProSense主题中index.php的源代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?php
