Tokinx 发布的文章

enter image description here

嗯,大概的效果就是,当访客访问你的博客时,页面会首先显示一张全屏大图,然后再逐渐显示网页内容,很有趣,之前一个朋友让我给他做单页的时候,他想加入这个效果,我就研究了下,给他加了上去,后来在@碎碎念哪里看到的是JS版本,才想到我纯CSS做出来好像很厉害的样子,放出来仅供参考。

先贴出CSS代码,讲下方代码添加到header内(不要放入css文件内)

<style>
.loading{opacity:0;background:#fff url(images/loading.jpg);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
0% {opacity:1;color:#C1FF50;z-index:999999;}
20% {opacity:1;color:#5CB8FF;}
40% {opacity:1;color:#FFD350;}
60% {opacity:1;color:#FF5950;}
80% {opacity:.5;color:#fff;}
100% {opacity:0;}
}
</style>

可以很直观的看出,代码是通过CSS3动画控制的效果,所以很轻量,但是兼容浏览器没有JS的全面。

html代码就更简单了,将下面代码放入body的最上面

<div class="loading">Loading...</div>

代码参考:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style>
.loading{opacity:0;background:#fff url(images/loading.jpg);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
0% {opacity:1;color:#C1FF50;z-index:999999;}
20% {opacity:1;color:#5CB8FF;}
40% {opacity:1;color:#FFD350;}
60% {opacity:1;color:#FF5950;}
80% {opacity:.5;color:#fff;}
100% {opacity:0;}
}
</style>
</head>
<body>
<div class="loading">Loading...</div>
</body>
</html>

网上获取Bing背景图的方法很多,但是好像很多都是获取的都是1366x768像素的,大屏幕下这个大小好像不够用,但是Bing网站的背景图是1920x1080的,官方用的是Josn方式获取的,于是:

//获取bing背景图
$str = file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
$array = json_decode($str);
$imgurl = $array->{"images"}[0]->{"url"};

<?php echo $imgurl;?>就可以输出图片地址了,在本地测试正常,但是我的实际应用却遇到了一些问题,上传到主机只能输出“/az/hprichbg/rb/图片名_1920x1080.jpg”不含主机头的地址,万分不解,于是我就稍微改造了下:

$imgurl = 'http://s.cn.bing.net'.$array->{"images"}[0]->{"urlbase"}.'_1920x1080.jpg';

这样就可以在一些比较特殊的主机上正常调用图片了,而且上面的方式还可以用一些CDN镜像这些图片来加速静态文件访问速度,比如我就是用的七牛云存储,简单粗暴的就应用上了。

解析:

$str = file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');

idx=0” 的意思是当天的图片,“1”为昨天使用的图片,“-1”为明天要使用的图片,最小为-1,最大为15,也就是可以通过修改idx可以获取最近17的图片。 “n=1” 则是打印几个图片josn,默认1就可以打印一个图片信息,可以修改一下做其他用途。

enter image description here

本篇文章由@Rich提供 表情放在主题目录img/smilies下。 首先添加functions.php自定义评论回调部分的代码,自定义评论回调部分可以参考Typecho更简单的解决Gravatar被墙提到的方法。 然后再在functions.php将回调函数的content(); ?>修改为content); ?> 接着在functions.php下面加入代码:

/** 解析表情 */
function convertSmilies($widget)
{
    $smiliesTrans = array(
    ':?:'        => 'icon_question.gif',
    ':razz:'     => 'icon_razz.gif',
    ':sad:'      => 'icon_sad.gif',
    ':evil:'     => 'icon_evil.gif',
    ':!:'        => 'icon_exclaim.gif',
    ':smile:'    => 'icon_smile.gif',
    ':oops:'     => 'icon_redface.gif',
    ':grin:'     => 'icon_biggrin.gif',
    ':eek:'      => 'icon_surprised.gif',
    ':shock:'    => 'icon_eek.gif',
    ':???:'      => 'icon_confused.gif',
    ':cool:'     => 'icon_cool.gif',
    ':lol:'      => 'icon_lol.gif',
    ':mad:'      => 'icon_mad.gif',
    ':twisted:'  => 'icon_twisted.gif',
    ':roll:'     => 'icon_rolleyes.gif',
    ':wink:'     => 'icon_wink.gif',
    ':idea:'     => 'icon_idea.gif',
    ':arrow:'    => 'icon_arrow.gif',
    ':neutral:'  => 'icon_neutral.gif',
    ':cry:'      => 'icon_cry.gif',
    ':mrgreen:'  => 'icon_mrgreen.gif',
    '8-)'        => 'icon_cool.gif',
    '8-O'        => 'icon_eek.gif',
    ':-('        => 'icon_sad.gif',
    ':-)'        => 'icon_smile.gif',
    ':-?'        => 'icon_confused.gif',
    ':-D'        => 'icon_biggrin.gif',
    ':-P'        => 'icon_razz.gif',
    ':-o'        => 'icon_surprised.gif',
    ':-x'        => 'icon_mad.gif',
    ':-|'        => 'icon_neutral.gif',
    ';-)'        => 'icon_wink.gif',
    '8)'         => 'icon_cool.gif',
    '8O'         => 'icon_eek.gif',
    ':('         => 'icon_sad.gif',
    ':)'         => 'icon_smile.gif',
    ':?'         => 'icon_confused.gif',
    ':D'         => 'icon_biggrin.gif',
    ':P'         => 'icon_razz.gif',
    ':o'         => 'icon_surprised.gif',
    ':x'         => 'icon_mad.gif',
    ':|'         => 'icon_neutral.gif',
    ';)'         => 'icon_wink.gif',
    );
    $imgUrl = Typecho_Widget::widget('Widget_Options')->themeUrl . '/img/smilies/';
    foreach($smiliesTrans as $smiley => $img) {
        $smiliesTag[] = $smiley;
        $smiliesReplace[] = "<img src=\"$imgUrl$img\" alt=\"\" class=\"smiley\" />";
    }   
    $output = '';
    $textArr = preg_split("/(<.*>)/U", $widget, -1, PREG_SPLIT_DELIM_CAPTURE);
    $stop = count($textArr);
    for ($i = 0; $i < $stop; $i++) {
        $content = $textArr[$i];
        if ((strlen($content) > 0) && ('<' != $content{0})) {
            $content = str_replace($smiliesTag, $smiliesReplace, $content);
        }
        $output .= $content;
    }
    $output = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $output);
    echo $output;
}

接下来,在主题目录新建inc目录,然后新建smiley.php文件内容如下:

<?php $imgUrl = $this->options->themeUrl . '/img/smilies/'; ?>
<span id="smiley">
<a href="javascript:Smilies.grin(':?:')"      ><img src="<?php echo $imgUrl; ?>icon_question.gif"  alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':razz:')"   ><img src="<?php echo $imgUrl; ?>icon_razz.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':sad:')"    ><img src="<?php echo $imgUrl; ?>icon_sad.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':evil:')"   ><img src="<?php echo $imgUrl; ?>icon_evil.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':!:')"      ><img src="<?php echo $imgUrl; ?>icon_exclaim.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':smile:')"  ><img src="<?php echo $imgUrl; ?>icon_smile.gif"     alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':oops:')"   ><img src="<?php echo $imgUrl; ?>icon_redface.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':grin:')"   ><img src="<?php echo $imgUrl; ?>icon_biggrin.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':eek:')"    ><img src="<?php echo $imgUrl; ?>icon_surprised.gif" alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':shock:')"  ><img src="<?php echo $imgUrl; ?>icon_eek.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':???:')"    ><img src="<?php echo $imgUrl; ?>icon_confused.gif"  alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':cool:')"   ><img src="<?php echo $imgUrl; ?>icon_cool.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':lol:')"    ><img src="<?php echo $imgUrl; ?>icon_lol.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':mad:')"    ><img src="<?php echo $imgUrl; ?>icon_mad.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':twisted:')"><img src="<?php echo $imgUrl; ?>icon_twisted.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':roll:')"   ><img src="<?php echo $imgUrl; ?>icon_rolleyes.gif"  alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':wink:')"   ><img src="<?php echo $imgUrl; ?>icon_wink.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':idea:')"   ><img src="<?php echo $imgUrl; ?>icon_idea.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':arrow:')"  ><img src="<?php echo $imgUrl; ?>icon_arrow.gif"     alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':neutral:')"><img src="<?php echo $imgUrl; ?>icon_neutral.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':cry:')"    ><img src="<?php echo $imgUrl; ?>icon_cry.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':mrgreen:')"><img src="<?php echo $imgUrl; ?>icon_mrgreen.gif"   alt="" class="smiley" /></a>
</span>

然后编辑comments.php文件,在评论框<textarea>上面加入<p><?php include('inc/smiley.php'); ?></p> 最后是JS部分,直接丢进主题的JS里即可:

// Smilies v1.0.4 for Typecho Comments - by willin kan - URI: http://kan.willin.org/typecho/
Smilies = {
 dom : function(id) {
   return document.getElementById(id);
 },

 grin : function (tag) { // 表情
   tag = ' ' + tag + ' '; myField = this.dom('comment');
   document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
 },

 insertTag : function (tag) { // 插入评论中
   myField = Smilies.dom('textarea');
   myField.selectionStart || myField.selectionStart == '0' ? (
     startPos = myField.selectionStart,
     endPos = myField.selectionEnd,
     cursorPos = startPos,
     myField.value = myField.value.substring(0, startPos)
                   + tag
                   + myField.value.substring(endPos, myField.value.length),
     cursorPos += tag.length,
     myField.focus(),
     myField.selectionStart = cursorPos,
     myField.selectionEnd = cursorPos
   ) : (
     myField.value += tag,
     myField.focus()
   );
 }
}

注:convertSmilies可以用再不同的地方上,如 或者是实现文章表情修改content(); ?>到content); ?>甚至是公告。侧边栏最新评论表情如此类推。 因为我的主题暂时并不打算加入评论表情功能,所以没有整理一套表情,请自行整理并修改文件名。  

enter image description here

其实这个想法很早之前就有了,只是一直没付诸行动,做N3、N4的时候用到了自定义字段,为文章添加缩略图,方法很简单,而本文中讲介绍一下怎样用同样的方法,为文章添加不同的文章样式。

说说形式

WordPress早在 3.1 版本中便引入的文章形式这个功能了,是文章的一种属性,可以被主题用来决定文章的显示方式。其设计目的是要提供一个特殊的方法来根据文章的特点选用显示“格式”。

wordpress的方法很简单,因为程序自带此功能,根据官方文档就可以快速修改主题;而Typecho因为其自身精简,则不会加入此选项,但是我们可以使用其他方法实现,比如@沐风的插件,而我向来不喜欢安装多余的插件,所以想到了使用自定义字段的方式。

首先贴出参考代码

<?php if(isset($this->fields->say)){ //自定义字段“say” ?>
此处为say字段的样式,说说形式
<?php }else{; //如果文章没有定义say字段则else。 ?>
此处为普通文章样式
<?php }; ?>

字段名称为“say”, 字段值 任意或留空 由此可以看出,实现的方法非常简单,我这里仅仅是提供了php,具体代码和样式还需自行修改,如果想实现多种文章样式,多添加几个else即可。

到这里,自定义文章形式的教学就结束了,那么如何为文章添加缩略图呢?

其实网上很多代码,都可以很简单的获取文章首图,但是这些通过正则获取的方法好像并不支持Markdown编辑器,也就是说无法获取使用Markdown撰写的文章的图片,那么怎样更优雅的为文章添加缩略图呢?自定义字段即可。

参考代码:

<?php if(isset($this->fields->post_img)){ //自定义字段“post_img” ?>
<img src="<?php echo $this->fields->post_img;?>"/>
<?php };?>

把上面代码放进index.php合适的位置,字段名称为“post_img”,只需要在 字段值 中添加一张图片的链接即可 自定义字段的强大之处并不局限于此,想法很重要,实现很简单。

enter image description here

终于放假了,终于快过年了,终于发年终奖了,终于结算工资了,卧槽,大家手里又有钱了吧!

看着大家一个又一个因为发工资、涨工资而欣喜,我却想着如何才能黑你们一把,于是趁大家有钱的时候,我打算把NewRealm6发出来,赚点小外快,也不至于你们花钱的时候感到心疼。

大概描述了下我的黑心肠,下面就简单的介绍下NewRealm6到底是何方神物把:

  1. 导航栏方面,左侧下滑跟谁导航,支持二级菜单,还可左右切换进入搜索。
  2. 兼容性方面,主题兼容IE8+、Chrome、Firefox等主流浏览器(IE8以下未做测试,理论兼容IE6)
  3. 响应式方面,从大到更大,小到更小,主题均完美响应,从PC到Pad以及Phone,简单却完美的响应。
  4. 广告位方面,为保证清新的阅读流程,仅保留一处大小为宽700,高不限的广告位在文章结束部分
  5. 评论AJAX翻页,更方便的查看读者评论
  6. 评论AJAX提交,更友好而快速的提交方式
  7. JS优化,将JS代码均投放到页脚,加快网页渲染,方便浏览。
  8. 评论头像lazyload支持,有效解决页面因加载Gravatar而导致严重拖慢网站加载速度问题。
  9. 更多功能,等待你去发现》_《

主题预览【失效】

郑重提示:

目前暂时支持Typecho,如果WordPress或Emlog有一定需求量,会考虑移植。

嘿嘿,好像有点太黑了,不过我怎么说也是个良心博主,虽然技术不咋,但是总还是有点饭碗的,说起来已经好久没出来混商业主题了呢。

介绍了这么多,心动的小伙伴或许已经开始呐喊了:“你丫的怎么购买啊!” 于是乎,博主只好翻箱倒柜的找出了从我爷爷的爷爷的爷爷的爷爷传下来《NewRealm 6 购买手札》...

NewRealm 6 购买手札

首先,进入你的支付宝,选择“转账”》“转账到支付宝”

然后填入邮箱:mygsky@qq.com

支付金额为:人民币 9.9 多多益善,欢迎壕红包

备注:购买NR6-您的联系方式

更多备注:如方便,可以留下您的联系方式,也可以写几句祝福的话。

更多购买方式点这里

付款后,请将付款成功页面信息截图保存并发送给我

QQ:7422-0-6125 (验证:购买NR6),邮箱:admin(at)idevs.cn

付款后24小时内发货,本主题不支持退货,请知悉。

比良心更良心的售后

一般的问题都可以通过 天空团主题使用手册 来找到解决方法。

如果问题过于高端,可以通过QQ、邮箱或者本站留言联系我,支持远程协助。

最后,感谢多年来每一个支持天空团的读者,谢谢。