Blogger 模板研究记

初始模板

<?xml version="1.0" encoding="UTF-8" ?>
<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><b:skin><![CDATA[]]></b:skin>
</head>
<body>
  <b:section id='main'>
  	<b:widget id='Blog1' type='Blog'></b:widget>
    <data:post.snippet/>
  </b:section>
  </body>
</html>

Blogger 有两种版本的代码格式，新版本增加许多的代码。

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' 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'>

一些关系

section 包含着若干个 widget ，widget 里包含着 includable 。section 代表一个区域，widget 表示添加一个功能，includable 是功能实现的代码部分。

include 是搭配着 includable 使用，include 还有其他功能，我们知道 include 是可以引用 includable 中的代码，这样可以减少代码的重复率，减小主题文件的体积。而 include 还可以引用 blogger 后台定义的 includable 代码。如 all-head-content

BlogArchive 博客归档
Blog 输出博文
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

includable 和 include

可以在里面放置 HTML 元素，include 元素可以在 xml 文件中任一位置引用，可以是Blogger所提供，或者是自行使用 <b:includable/>定义。至于引用自定义的<b:include/> 标签，只能在<b:includable><b:includable/> 中所使用

all-head-content

<b:include data='blog' name='all-head-content'/>

会显示如下信息：不同模板显示的信息会不太一样

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="blogger" name="generator" />
<link href="https://wljw.blogspot.hk/favicon.ico" rel="icon" type="image/x-icon" />
<link href="http://wljw.blogspot.com/" rel="canonical" />
<link
  rel="alternate"
  type="application/atom+xml"
  title="一颗赛艇 - Atom"
  href="https://wljw.blogspot.com/feeds/posts/default"
/>
<link
  rel="alternate"
  type="application/rss+xml"
  title="一颗赛艇 - RSS"
  href="https://wljw.blogspot.com/feeds/posts/default?alt=rss"
/>
<link
  rel="service.post"
  type="application/atom+xml"
  title="一颗赛艇 - Atom"
  href="https://www.blogger.com/feeds/2477113548547113779/posts/default"
/>
<link rel="openid.server" href="https://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="https://wljw.blogspot.com/" />
<!--[if IE
  ]><script
    type="text/javascript"
    src="https://www.blogger.com/static/v1/jsbin/3832463125-ieretrofit.js"
  ></script>
<![endif]-->
<meta content="http://wljw.blogspot.com/" property="og:url" />
<meta content="一颗赛艇" property="og:title" />
<meta content="一颗赛艇" property="og:description" />
<!--[if IE]>
  <script>
    ;(function () {
      var html5 = (
        "abbr,article,aside,audio,canvas,datalist,details," +
        "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
        "progress,section,time,video"
      ).split(",")
      for (var i = 0; i < html5.length; i++) {
        document.createElement(html5[i])
      }
      try {
        document.execCommand("BackgroundImageCache", false, true)
      } catch (e) {}
    })()
  </script>
<![endif]-->

data:blog.pageTitle

<data:blog.pageTitle/> 当前页面标题。

data:post.body

<data:post.body/> 输出整篇文章

data:post.snippet

<data:post.snippet/> 输出文章片段

data:post.firstImageUrl

<data:post.firstImageUrl/> 输出文章首张原图链接

<img expr:alt="data:post.title" expr:src="data:post.firstImageUrl" expr:title="data:post.title" />

data:view.title.escaped

<data:view.title.escaped/> 输出标题

data:title

<data:title/> 详细见「导航站制作」一章。

b:include name=‘skipNavigation’

<b:include name='skipNavigation'/> 不清楚，只知道会产生以下内容

<a class="skip-navigation" href="#main" tabindex="0"> 跳至主要内容 </a>

google-analytics

<b:include data='blog' name='google-analytics'/>

表示加入Blogger 设定中的网站分析程式码（设定> 其他> Analytics (分析) 网站资源ID）

将一下

<b:includable id='postBodySnippet' var='post'>
<div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>
            <b:if cond='data:post.featuredImage'>
              <div class='snippet-thumbnail'>
                <b:include data='{image: data:post.featuredImage,
                                 imageSizes: [32, 64, 128, 256],
                                 imageRatio: &quot;1:1&quot;,
                                 sourceSizes: &quot;(max-width: 800px) 20vw, 128px&quot; 								                             }' name='responsiveImage'/>
              </div>
            </b:if>
            <b:include cond='data:post' data='post' name='postSnippet'/>
          </div>
</b:includable>

判断 Blogger 的页面类型

https://gist.github.com/oliverdoetsch/153334604fdda9fe9191