Lei

屌丝之歌 - 花粥

Wed, 16 May 2012 11:13:08 GMT

屌丝之歌 - 花粥

请注意打码部分！

Release Note:

这是新版的更新专用歌哦！
大图要点更多才能看到！

感谢天船的投稿 :)

照片

Tue, 15 May 2012 03:55:39 GMT

I'm diandian:

点点新模板：《专注》
推荐理由：
"很难说有什么办不到的事情，因为昨天的梦想，可以是今天的希望，而且还可以成为明天的现实。"——by罗伯特·戈达德
白底，素字，这款模板的名字叫《专注》，把梦想记录在这里，专注于你的内心。
模板链接：http://www.diandian.com/themes/137/show

照片

Tue, 15 May 2012 02:02:43 GMT

颐和园的小黄花与小蜜蜂.

照片

Fri, 11 May 2012 07:42:00 GMT

小盆友，公司对面有你最爱吃的番茄味砂锅米线！味道和中关村被你吃倒闭的那家一模一样，连菜单和餐具都一样！

一些 Mars 的 Demo（曾在 D-Day 演示过）

Thu, 10 May 2012 09:08:32 GMT

第二代模板引擎 Mars 现在已经内测了，放出一些 D Day 时的一些演示，希望对大家有点儿帮助。

为了看到代码高亮，建议在Lei的博客中查看文章。

Hello World 1：用JavaScript输出内容

<script type="server/javascript">
    var now = new Date();
                                                             
    write('<h1>Hello 点点！</h1>');
    write('<p>' + now + '</p>');
</script>

Hello World 2：带逻辑的JS，输出灰度渐变色块

<script type="server/javascript">
write('<p>Mars让你在服务端运行JavaScript，助你应对复杂逻辑。</p>');
                                                      
for (var i = 0; i < 256; i++) {
    var hex = i.toString(16);
    if (hex.length === 1) {
        hex = '0' + hex;
    }
    hex += hex + hex;
    write('<div class="width:30px;height:30px;float:left;' + 'background:#' + hex + '"></div>');
}
</script>

模块的使用1：用 underscore.js 增强 JavaScript

<script type="server/javascript">
    // 在Mars中使用underscore的简单示例
    // Underscore.js的用法请参考：http://documentcloud.github.com/underscore/
    var _ = require("dd://modules/underscore/1.3.3/underscore"),
        n = _.min([6, 2, 8, 9, 3]); // 调用underscore提供的方法，取数组中的最小值
    write(n); // 页面输出：2
</script>

模块的使用2：用 moment.js 来格式化时间

<script type="server/javascript">
    // 在 Mars 中使用 Moment.js 的简单示例
    // Moment.js 的用法请参考：http://momentjs.com/
    var moment = require("dd://modules/moment/1.5.0/moment");
    // 根据 UNIX 时间戳创建日期
    var day = moment(1318781876406);
                                                     
    // 距离现在多久
    write(day.fromNow());   // 7 months ago
                                                 
    write('<hr />');        // 加个分隔线
                                                     
    // 切换成中文
    moment.lang('zh-cn');
    write(day.fromNow());   // 7个月前
</script>

模板与数据1：流行的 Logic-Less 模板引擎 Mustache

<module id="theme" name="theme.template">
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{{data.meta.title}}}</title>
    <link rel="stylesheet" href="http://x.libdd.com/farm1/90ecce/964ef5b0/DA232.css">
    <link rel="stylesheet" href="http://t.libdd.com/css/base/rich-content.css">
</head>
<body>
    <div class="header">
    <h1>{{{data.global.name}}}</h1>
    {{#data.global.description}}
        <div class="description">{{{data.global.description}}}</div>
    {{/data.global.description}}
  </div>
    <div class="posts">
        {{#data.posts}}
        <div class="post" type="post-{{id}}">
            {{^link}}{{#title}}<h3 class="title">{{{title}}}</h3>{{/title}}{{/link}}
            {{#link}}
                <h3 class="title">
                    <a href="{{link_url}}" target="_blank">
                        {{#title}}{{{title}}}{{/title}}
                        {{^title}}{{{link_url}}}{{/title}}
                    </a>
                </h3>
            {{/link}}
            {{#content}}<div class="entry rich-content">{{{content}}}</div>{{/content}}
            {{#photos}}
                <div class="img-holder"><img src="{{500.src}}" /></div>
                {{#description}}<div class="img-desc">{{{description}}}</div>{{/description}}
            {{/photos}}
            {{#player}}<div class="player">{{{player}}}</div>{{/player}}
            {{#description}}<div class="entry rich-content">{{{description}}}</div>{{/description}}
        </div>
        {{/data.posts}}
    </div>
</body>
</html>
</module>
                                   
<script type="server/javascript">
    // 用Mustache渲染一个简易模板
    // Mustache.js的用法请参考：https://github.com/janl/mustache.js
    var Mu = require('dd://modules/mustache/0.5.0-dev/mustache'),
        code = Mu.render(dian.modules.theme, { data: dian.data });
    write(code);
</script>

模板与数据2：描述 XHTML 的标记语言 HAML

<module id="theme" name="theme.template">
!!! 5
%html
  %head
    %meta{ charset: "utf-8" }
    %title!= data.meta.title
    %link{ rel: "stylesheet", href: "http://x.libdd.com/farm1/90ecce/964ef5b0/DA232.css" }
    %link{ rel: "stylesheet", href: "http://t.libdd.com/css/base/rich-content.css" }
  %body
    .header
      %h1!= data.global.name
      - if (data.global.description)
        .description!= data.global.description
    .posts
      - each post in data.posts
        .post
          - if (!post.link && post.title)
            %h3.title!= post.title
          - if (post.link)
            %h3.title
              a{ href: post.link_url, target: '_blank' } (post.title ? post.title : post.link_url)
          - if (post.player)
            .player!= post.player
          - each photo in post.photos
            .img-holder
              %img{ src: photo['500'].src, alt: dian.tools.nohtml(photo.description) }
            - if (photo.description)
              .img-desc!= photo.description
          - if (post.description || post.content)
            .entry.rich-content!= (post.description ? post.description : post.content)
</module>
                             
<script type="server/javascript">
  // 用HAML渲染一个简易模板
  // Haml.js的用法请参考：https://github.com/visionmedia/haml.js
  var haml = require('dd://modules/haml/0.5.1/haml')
    , code = haml.render(dian.modules.theme, {
      locals: { data: dian.data }
    });
  write(code);
</script>

模板与数据3：来自 Twitter 的模板引擎 Hogan.js

<script type="server/javascript">
    // 在Mars中使用Hogan.js作为模板的实例
    // Hogan.js的使用方法请参考：http://twitter.github.com/hogan.js/
                         
    // require hogan
    var hogan = require('dd://modules/hogan/3.0.0/hogan');
                         
    // compile template
    var template = hogan.compile("<h1><a href='http://{{name}}.diandian.com'>{{name}}</a></h1>");
                         
    var team = ['zhaolei', 'secretworry', 'javamonk'];
                         
    team.map(function (boy) {
        // Render context to template & output
        write(template.render({name: boy }));
    });
</script>

自定义视图与数据接口：一个最新文章列表的接口示例

注：新版预览尚未上线，需保存后在博客页面查看效果

<script type="server/javascript">
    // 最新文章接口
    // 参数：_posts[limit]=10&_posts[offset]=0&_posts[type][]=photo
    if (dian.request.action === 'recent.ajax') {
        var obj = [];
                         
        dian.data.posts.forEach(function(post) {
            // 只暴露出包含 文章地址、100x100方形图片、图片标题 的有限数据
            obj.push({
                href    : post.url,
                src     : post.photo && post.photos[0].square_100.src,
                alt     : getCaption(post)
            });
        });
                 
        // 获取图片标题
        function getCaption(post) {
            var alt = '';
            if (post.title) {
                alt = post.title;
            } else if (post.description) {
                alt = post.description;
            } else if (post.content) {
                alt = post.content;
            } else {
                alt = post.type_name;
            }
            return dian.tools.nohtml(alt);
        }
        write(JSON.stringify(obj));
                 
        // 接口的数据吐完了，停止执行下面的代码
        return;
    }
</script>
                 
<!DOCTYPE html>
<html>
<head>
    <title>{$global.name}</title>
</head>
<body>
<h3>请打开控制台查看接口调用情况</h3>
<script type="text/javascript" src="http://t.libdd.com/js/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var url = '/do/recent.ajax';
    $.get(url, {
        // 取前20篇图片类型文章数据
        _posts: {
            limit: 20,
            offset: 0,
            type: [ 'photo' ]
        }
    }, function(r) {
        console.log(JSON.parse(r));
    });
});
</script>
                 
</body>
</html>

Mars 给模板创意的实现带来了无限可能，希望大家玩儿的愉快~！

五月模板5

Thu, 10 May 2012 07:18:42 GMT

“专注”原生支持代码高亮哦！很适合专注的程序员和开发者们~

BEKII.IN:

喜欢点点模板的童鞋又有的玩了～
去模板公园找吧～http://www.diandian.com/themes/recent

Firede新作《专注》：http://www.diandian.com/themes/137/show

《Discoid》：http://www.diandian.com/themes/145/show

《意林》：http://www.diandian.com/themes/142/show

bubu新作《cocoa》：http://www.diandian.com/themes/144/show

《移》：http://www.diandian.com/themes/140/show

照片

Wed, 09 May 2012 10:06:21 GMT

内涵就不说了，我想说的是iMac和Magic Mouse上的Logo很亮！

芸欠:

电脑病

照片

Mon, 07 May 2012 05:42:46 GMT

4月29，颐和园。

新一代模板引擎Mars正式开放内测

Mon, 07 May 2012 03:10:32 GMT

欢迎大家来申请内测哦~！

点点博客开放平台:

Mars，点点博客开放平台新一代模板引擎正式邀请你一起来参与内测。
Mars作为点点新一代的模板引擎，后端直接使用javascript的渲染引擎，给我们带来了：

零成本的学习代价；
强大的模板功能；
功能全面的模块化支持；
自定义视图；
自定义数据接口；
完美的向下兼容。

让你亲身体验使用javascript来创作模板的快感！

报名发邮件到d-day@diandian.com，邮件格式：
标题：申请Mars内测
正文：
博客地址：xxx.diandian.com（建议提供你的测试博客地址）
是否为点点开发者：是/否
收到我们的确认邮件之后就可以使用你提供的博客来体验Mars。

同时，在体验过程中，有任何问题可以发送邮件到d-day@diandian.com反馈给我们。
Mars相关文档说明请直接访问：
Mars简介
Mars使用
Mars模板数据
Mars页面数据

文字

Fri, 04 May 2012 02:31:54 GMT

I'm diandian:

你是否还在为买域名租空间的事情而操心
你是否还在为找不到称心的模板而费心
你是否还在为后期高昂的维护费用而劳心
你是否还在博客上莫名的广告而揪心
你是否还在为经常性的不稳定而痛心
我们想说：抛弃这些吧，我们的建站开博不是为了把精力耗费在系统平台上，不是为了这些细枝末节而来回奔波。
让我们回归博客的本质，让我们能够专注内容创造。
点点网将于5月13日在北京举行轻博客沙龙，无论您是在wordpress上搭建独立站点抑或独立博客，还是在传统博客平台上写博客，我们真诚的邀请您参加我们的第一届博客沙龙，一起讨论传统博客的未来，在这里您能够遇到众多与您一起在博客的世界里畅游的志同道合者。

使用WordPress，用户需要购买域名，租空间。此外模板，打开速度，以及PHP和Mysql的优化，这些问题或许会给您造成困扰。点点网关注博客用户，我们希望与大家建立沟通，并帮助大家解决在使用独立博客平台过程中遇到的问题。
点点网希望能为大家提供最轻松的解决方案，让您能保持愉悦的心情用在内容创作上。

第一届博客沙龙流程：
开场
主题演讲（40分钟）
4位优质独立博主嘉宾分享（60分钟）
圆桌论坛（40分钟）
提问与自由交流

地址：北京市朝阳区酒仙桥路4号798艺术区西门友谊大厦5层（下文地图中A处）
时间：5月13日下午两点
报名：发邮件至salon@diandian.com
邮件中请注明（您的姓名，手机，博客地址）
我们也非常欢迎您携朋友前来，谢谢您！