Blogger高级编程（一）

2014-03-03T00:39:00+08:00 再见理想

blogger是老牌的博客服务平台，拥有简单的操作设计，无需过多的了解服务器的运行原理，你就可以拥有自己的博客，blogger还可以完全自定义博客展现的框架结构以及运维部署上的自定义等，作为Google旗下的免费服务，它的速度，稳定性以及可持续性是毋庸置疑的，国内有很多的blog平台在微博之后都倒闭或者转型了。综上blogger在世界上的用户数量稳稳排在第一，我强烈推荐使用blogger作为你的写作平台。

blogger logo

由于中国有GFW存在的原因，在中国使用blogger原生会出现以下几个问题：

  1. 原生提供的免费二级域名无法访问
  2. 原生强制加载的一些静态资源无法正常加载
  3. 文章评论功能无法在中国加载使用

前面的几个问题我们不会在教程中解答，我们只讲解blogger高级编程，不讲解blogger的基本使用方法，我们会假设读者拥有编程开发经验，了解blogger的各个功能，了解模板语言，所以这个教程并不是适合所有朋友的，也不是step-by-step的。

首先，我们来了解一下blogger的模板系统，这是我们编程的主要对象。在blogger的模板库中，如果你挑选不到自己喜欢的模板，你可以上网搜索一下别人提供的blogger模板，我们需要你挑选出一个模板代码来，用来进行对照的理解学习。仔细查看模板代码，你可能会觉得一团乱麻，这主要是没有格式化的原因，现在blogger的模板编辑器支持格式化代码了，当然你也可以选择其他方式beautifier代码。

blogger自定义模板功能

你可以非常明显的发现，blogger的模板实际上是一个严格的xml格式的html文件，有一些节点和属性它必须包含：

  • <b:skin><![CDATA[]]></b:skin>
  • <b:section id=”unique id”></b:section>
  • html节点需要如下属性定义：
    1. xmlns='http://www.w3.org/1999/xhtml'
    2. xmlns:b='http://www.google.com/2005/gml/b'
    3. xmlns:data='http://www.google.com/2005/gml/data'
    4. xmlns:expr='http://www.google.com/2005/gml/expr'

其他的要求都是xml的要求，或者是html的要求，例如每一个节点必须闭合，需要包含html,head,body等最基本的html节点。

在xml形式中进行编程是blogger模板语言的特点，例如hello world可以这么写：

  1. 首先设置博客的description为hello world
  2. 在模板文件的任意节点中输出<data:description/>

完整例子文件如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <title>
        test for hello world</title>
    <b:skin><![CDATA[]]>
    </b:skin>
</head>
<body>
<b:section id='mysection'>
    <b:widget id='Header1' type='Header'>
        <b:includable id="main">
            <data:description/>
        </b:includable>
    </b:widget>
</b:section>
</body>
</html>

你可能会想要将description换一个地方输出，比如输出到title中，这是不可以的，你可以自己试试，blogger对数据的使用有比较严格的限制，这样可以防止blogger平台不会因为高度可自定义性被滥用为非博客类的网站！你会得到如下的输出：

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <title>
        test for hello world</title>
    <link type='text/css' rel='stylesheet'
          href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
    <link type='text/css' rel='stylesheet'
          href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6674537677848352520&zx=cf9f726e-105b-4104-82eb-316900f1fb0f'/>
    <style id='page-skin-1' type='text/css'><!--

    --></style>
    <script type="text/javascript">
        if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>
</head>
<body>
<div class='section' id='mysection'>
    <div class='widget Header' id='Header1'>
        hello world
    </div>
</div>
<script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2259541978-widgets.js"></script>
<script type='text/javascript'>
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
        window['blogger_templates_experiment_id'] = "templatesV1";
        window['blogger_blog_id'] = '6674537677848352520';
        BLOG_attachCsiOnload('');
    }
    _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6674537677848352520', '//smite-dev.blogspot.com/', '6674537677848352520');
    _WidgetManager._SetDataContext([{
        'name': 'blog',
        'data': {
            'blogId': '6674537677848352520',
            'bloggerUrl': 'http://www.blogger.com',
            'title': 'dev',
            'pageType': 'index',
            'url': 'http://smite-dev.blogspot.com/',
            'canonicalUrl': 'http://smite-dev.blogspot.com/',
            'canonicalHomepageUrl': 'http://smite-dev.blogspot.com/',
            'homepageUrl': 'http://smite-dev.blogspot.com/',
            'blogspotFaviconUrl': 'http://smite-dev.blogspot.com/favicon.ico',
            'enabledCommentProfileImages': true,
            'adultContent': false,
            'disableAdSenseWidget': false,
            'analyticsAccountNumber': '',
            'searchLabel': '',
            'searchQuery': '',
            'pageName': '',
            'pageTitle': 'dev',
            'metaDescription': 'search desc',
            'encoding': 'UTF-8',
            'locale': 'zh_CN',
            'localeUnderscoreDelimited': 'zh_cn',
            'isPrivate': true,
            'isMobile': false,
            'isMobileRequest': false,
            'mobileClass': '',
            'isPrivateBlog': false,
            'languageDirection': 'ltr',
            'feedLinks': '',
            'meTag': '',
            'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link rel\75\42openid.delegate\42 href\75\42http://smite-dev.blogspot.com/\42 /\76\n',
            'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42jstiming\42,k\75\42tick\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[k](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[g].srt\75h-c)}if(a){var e\75b[g].load;0\74c\46\46h\76\75c\46\46(e[k](\42_wtsrt\42,void 0,c),e[k](\42wtsrt_\42,\42_wtsrt\42,h),e[k](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[k](\42_tbnd\42,void 0,b[f].csi().startE),e[k](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[k](\42_tbnd\42,void 0,b.external.startE),e[k](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[g].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[g].load[k](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[g].load[k](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076',
            'mobileHeadScript': '',
            'view': '',
            'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js',
            'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d6f37bb30c327165',
            'plusOneApiSrc': 'https://apis.google.com/js/plusone.js',
            'testHtml5CssSrc': 'https://www.blogger.com/static/v1/widgets/3897762216-css_bundle_html5.css',
            'sf': 'n'
        }
    }, {'name': 'skin', 'data': {'vars': {}, 'override': '\n '}}, {
        'name': 'view',
        'data': {
            'classic': {'name': 'classic', 'url': '/?view\75classic'},
            'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'},
            'magazine': {'name': 'magazine', 'url': '/?view\75magazine'},
            'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'},
            'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'},
            'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'},
            'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}
        }
    }]);
    _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'mysection', null, document.getElementById('Header1'), {}, 'displayModeFull'));
    _WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'null', null, document.getElementById('PageList1'), {
        'title': '页面',
        'links': [{
            'href': 'http://smite-dev.blogspot.com/',
            'title': '主页',
            'isCurrentPage': true
        }, {'href': 'http://smite-dev.blogspot.com/p/about.html', 'title': 'about', 'isCurrentPage': false}],
        'mobile': false
    }, 'displayModeFull'));
</script>
</body>
</html>

从中可以看到blogger自动插入了许多节点到html文件中，这个你无法避免，我会在其他文章中提供解决方案。

第一个hello world成功了，可以说你已经入门了。

标签：
Blogger
导航：
← 较早的博文 较新的博文 → ↑回到页顶

Smite Chow