Posts Tagged “mandigo”

上回说到实现了各种文件的上传,正要给attachment.php实现高亮显示源代码……(天外音——pia飞)。

先上Demo:
icon-icpc-smallsource code (ZOJ2705.cpp)
attachment-demo

在wordpress的template hierarchy里,对附件显示(attachment display)的处理,wp会按照

  1. MIME_type.php – 可以是任意的MIME,对于type/subtype,比如text/plain会按照:

    1. type.php (e.g. text.php)
    2. subtype.php (e.g. plain.php)
    3. type_subtype (e.g. text_plain.php)
  2. attachment.php
  3. single.php
  4. index.php

的顺序,调用第一个主题(theme)中可用的php文件。wp模认主题里没有attachment.php,我所用的主题mandigo里提供有attachment.php,对于图片,会显示缩略图(thumbnail),而对于其他文件,只显示一个图标(icon)和文件标题(title)。而我希望对于上传的源代码,可以直接显示代码内容,最好还是语法高亮的。因为很多时候我们只是想简单的看一下代码,这样也要下载太麻烦了,而且硬盘空间可能不够(……几k的空间都没有么……),提供预览也能排雷,下了个假档影响多不好啊。

为了达到这一目的,图方便,我直接对attachment.php文件进行了hack,首先加入了下面这一段代码:

Comments 6 Comments »

wordpress提供有more标签,其作用就是在index里只显示文章的一部分,避免一页太长,点击链接后则可以看到全文。使用方法非常简单,在你想截断的地方加一个html注释

<!--more-->

就可以了。在mandigo主题里产生的超链接的文字为”Read the rest of this entry”,这是可以通过对主题代码的修改来个性化的。

个性化more标签我一直很想要的效果就是东方系列里载入过程的那段”少女祈祷中…”动画。不过我没有在网上找到其gif动画,自己尝试从东方花映冢中提取素材也以失败告终,所以就只好使用文字版的了。一个偶然的机会,我在这里意外发现了其flash动画版,而且颜色还正是我要的粉红色,真是踏破铁鞋无觅处 ,得来全不费工夫。当然虽然我无耻的rob了这个flash,但把它实际加到blog里还是要花点功夫的。这个flash动画不知为什么留了很奇怪的白边,而我不会flash,修改不能,向范叔求教,结果被鄙视了。然后考虑用工具把flash转成gif动画,再把多余的边剪掉,结果发现转换出来的gif变大了几十倍不说,效果也差很多,于是此路不通。最后想了一招,flash保留原样,在blog里通过css把多余的边“剪”掉。几经修改,最后html代码

<object
    style="margin: -40px -81px 0 -192px" standby="少女祈祷中..."
    data="http://watashi.ws/blog/wp-content/uploads/2009/12/NowLoading.swf"
    type="application/x-shockwave-flash" width="375" height="82">
    <param value="http://watashi.ws/blog/wp-content/uploads/2009/12/NowLoading.swf" name="movie">
    <param value="false" name="menu"><param value="high" name="quality">
    <param value="transparent" name="wmode">
</object>

的效果



比较满意。

最后把这个效果加到blog里去,实际加的时候把html和css分离开来。首先修改主题的Stylesheet (style.css),在最后加上

.more_flash {
    margin: -40px -81px 0 -192px;
}

然后修改主题的Main Index Template (index.php),

Comments No Comments »

要装扮一下自己的blog,最重要就是选择一个合适的主题。wordpress有着无数的免费与收费主题,但是要找到一个自己心满意足的却并非易事。当然如果你是一个css高手的话,自然能轻松搞定一切,可惜我不是,我只能找一个足够合适的主题作为一个高起点。首先当然是从wordpress的Free Themes Directory入手,很可惜,我在这里要么是搜不到满足我条件的主题,要么是安装后实际效果不理想。于是我开始求助搜索引擎,并搜到了更多的主题,依然很可惜,这些主题或者不符合我口味,或者定制性太差,或者同我blog内容结合在一起比较违和。最后,我开始用关键字搜一些同好用workpress架的blog,看看他们都用啥主题,企图rob一个合适的。搜寻过程拜到各种技术宅,包括自己写主题,插件的,还有自己做出一套华丽的素材的,无限orz。我就这样找啊找啊,找了整整三天之后,我才找到现在用的主题——mandigo

mandigo是一个在我看来非常不错的主题,首先它是fixed-width的,这样可以有效逃避自己精心打扮的blog在别人浏览器里崩掉的悲剧。它的定制性也不错,本身就有好几套不同的配色可以选择,还支持随机配色,不过我当然是毫不犹豫地选了现在的这个pink配色。最主要的还是对title和background图片个性化的支持。title的图片也支持随机功能,只要把备选图片放到指定目录下就可以了,都不用自己来实现了。

最后就是挑选背景图片了,总是搬运来搬运去的,也该到自己动动手的时候了。当然事实是我在自己的收藏,百度、google的搜索结果中都没能找到中意的。不过搜索中发现《东方活动写真馆》的截图主调确实和blog满搭配,于是自己用《东方活动写真馆》做一个。考虑到只用一张截图实在太单调了,于是用许多截图平铺起来。

首先获得截图,每秒钟来一张,利用mplayer可以轻松搞定。我写的比较圡,我想应该可以用一行脚本搞定的。

for i in `seq $1`
do
    mplayer -ss $i -noframedrop -nosound -vo png -frames 1 /media/temp/VIDEO_TS/VTS_02_1.VOB
    mv 00000001.png $i.png
done

然后利用imagemagick处理获得的截图,把过多的白边去掉,然后缩小图片并存成jpg。imagemagick是一个强大的图像处理工具,并且有很好的perl支持。

#!/usr/bin/perl -w

use strict;
use warnings;
use Image::Magick;

for my $file (@ARGV) {
    my $image = Image::Magick->new;
    $image->Read($file);
    $image->Crop(
        width => 700, height => 400,
        x => 80, y => 50);
    $image->Scale(
        width => 420, height => 240);
    $file =~ s/png$/jpg/;
    $image->Write($file);
}

最后随机选一些图片纵向平铺合成一张大的背景图片,依然通过perl脚本,借助imagemagick实现。这一步要人肉做的话不知有多痛苦……

#!/usr/bin/perl -w

use strict;
use warnings;
use Image::Magick;

sub randfile() {
    return sprintf '%08d.jpg', 15 + int rand 227;
}

srand;
my $n = 16;
my $size = sprintf '420x%d', 240 * $n;
print $size;
my $image = Image::Magick->new;
$image->Set(size => $size);
$image->Read('NULL:blank');
for (my $i = 0; $i < $n; ++$i) {
    my $img = Image::Magick->new;
    my $file = &randfile;
    print "$file\n";
    $img->Read($file);
    $image->Composite(
        image => $img, compose => 'Over',
        x => 0, y => 240 * $i);
}
$image->Write('gao2.jpg');

然后多随机几次,选个感觉最好的,上传并设置为blog的背景图片,大功告成^ ^

Comments 6 Comments »