MWeb 1.4 新功能介绍二：静态博客功能加强

MWeb 比较有特点的是一键生成静态博客功能，而后从 MWeb 最开始规划要作静态博客生成功能时，我就但愿 MWeb 的静态博客生成功能在易用的同时，还要有很强大的扩展性。

好比说能本身增长网站公告，这个公告能够随时更换和取消。再好比说能本身为网站增长广告，并且能够增长多个广告位，google 的或者自定的广告均可以。这些以前均可以经过修改模板解决，可是有些是解决不了的：好比说把文章列表作成像 theverge http://www.theverge.com/reviews 的页的效果，就是列表中有设定的特点图片，有自定的简介，有评分，有价格时会显示价格等。好比说设定 SEO 的一些信息，设定分享到 Facebook 的一些信息。又好比说播客类的网站，要生成 Apple 规格的 RSS。

1.4 版的静态博客加强就是解决这些问题的。我一直考虑如何介绍这个功能，而后由于以前比特新声的主播之一 郝海龙 随意问了一下是否支持生成 Podcast 的 RSS。因此我想来想去，仍是介绍用 MWeb 自带的 greyshade 网站模板作一个能够写博客又能够作为播客的新模板好了。

这个新模板的 Demo 网址是：http://coderforart.com/bitvoice/，Podcast RSS 为：http://coderforart.com/bitvoice/podcast-atom.xml。 通常状况下只要到这个网址体验一下，并看一下《音乐《梁祝》及 MWeb 静态博客功能加强的使用体验》这篇文章便可，由于下边的内容是跟自定模板有关。

下面正式开始作这个新模板。
首先在 MWeb 中新增一个静态网站分类，名为比特新声。而后设置以下，我是想放在个人博客中作 Demo，因此网址为：http://coderforart.com/bitvoice/。评论和分类代码、GA 代码都跟 coderforart 同样。



点上图中最下边的 Advanced Settings 后会出来以下图的网站扩展设置。



一开始打开时，Site Setting 这个 Tab 是没有内容的，能够看到 MWeb 支持整个网站的字段扩展（Site Extension）和网站所属文档的字段扩展（Document Extension）。

以下图，我在 Site Extension 这个 Tab 根据 Apple Podcast RSS 自定了一些必要字段，而后切到 Site Setting 这个 Tab，就会看到按照自定的字段生成能够输入的文本框了。



如右边，我能够填入相关文案。而后若是有图片怎么办，简单的办法是打开比特新声分类内的一个文档，直接把图拖入编辑器中，从生成的 Markdown 语法中取其地址贴上就好。如上图右边的图中的 Fb Image 字段。

而后我也在 Document Extension 这个 Tab 也根据 Apple Podcast RSS 自定了一些必要字段，这些字段能够点软件右上角的设置按钮，并点第三个 Tab Extension 就能看到了按自定字段生成的可输入文本框了，如图。



这样的话，若是想新增新一期播客，就点开第三个 Extension Tab，填入一些这一期播客的相关信息便可。若是新增的文档只是普通文章，则能够不用管扩展的信息。

下图是关于 Base Tab 和 Media Tab 的状况。



Media Tab 会列出全部你引入到当前文档中的图片、附件等等。好比要增长一张某期的播客的封面图片，文章里用不到，可是 Extension Tab 里要填入，就能够先把图拖入编辑器内，而后删除，再点 Media Tab 就会看到所拖入的图了，点 Copy Path 而后贴到 Extension Tab 的某字段便可。

字段设置好了，下面要开始修改 greyshade 网站模板了。目前看来只须要为属于播客的文章增长一个播放器，让它能够播放 MP3。而后修改 RSS，让 RSS 按 Apple 播客的格式便可。

如下为修改模板的内容，建议先参考 自定网站或博客主题简单说明。

首先增长播放器，我随便找了一下，看到 http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/ 这个播放器不错，因此就决定用这个了，首先复制 greyshade 模板，并重命名为：podcast-greyshade。把 soundmanager 的相关代码放到 asset/soundmanager 中。而后打开 header.html 文档，在上面增长 soundmanager2 播放器的代码，大概是这样：

<link href="asset/soundmanager/css/bar-ui.css" media="screen, projection" rel="stylesheet" type="text/css">
<script type="text/javascript" src="asset/soundmanager/soundmanager2-jsmin.js"></script>
<script type="text/javascript" src="asset/soundmanager/bar-ui.js"></script>
<script>
soundManager.setup({
  preferFlash: false,
  onready: function() {

  }
});
</script>

由于我须要在文章列表和单篇文章都支持播放功能，因此为 category.html 和 post.html 增长播放支持。代码大概以下（我只选关键代码）。

{% if post.ext_enclosureURL.length %}
    <div class="sm2-bar-ui compact full-width">
        ....
        <div class="sm2-inline-duration">{{ post.ext_itunes_duration }}</div>
                      
        <div class="sm2-playlist-wrapper">
            <ul class="sm2-playlist-bd">
             <li><a href="{{ post.ext_enclosureURL }}"><b>{{ post.ext_itunes_author }}</b> - {{ post.ext_title }}</a></li>
            </ul>
          </div>
        ...
        </div>
    {% /if %}

下面解释一下上面这段代码。
MWeb 中 Site Setting 设置的全部值会传到全部模板页，好比说要输出上面设置的 SEO Des 的值，用 {{ext_seo_des}} 便可。能够看到，规则是： ext_ + variable Name 。而后用软件右上角第一个按钮设置的文档中的 Extension 的值，会传到全部 文档对象变量 中，如上面代码，文档对象变量为 post，访问规则为 post.ext_ + variable Name。 而后请注意 {% if post.ext_enclosureURL.length %} {% /if %} 这种写法，这是为了判断这文章是否有设置了播客的相关值，有设置，说明这文章为播客文章。

下面介绍一下如何增长输出 Apple 支持的播客的 RSS 格式。

MWeb 通常状况下只生成全站文章的 RSS，名字为 atom.xml。而后 MWeb 为了知足扩展须要，增长了另外的规则，为：若是网站模板中存在有 分类的 HTML File Name 的值 + -atom.xml 这样的模板文档，则会为这个分类用 分类的 HTML File Name 的值 + -atom.xml 这个模板生成名为 分类的 HTML File Name 的值 + -atom.xml 的 RSS。

如上面，我增长了两个子分类：文章和播客。而后我设置了播客子分类的 HTML File Name 为 podcast。而后我在网站模板中也增长了名为 podcast-atom.xml 的模板，下面是这个模板的内容。

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">
    <channel>
        <title><![CDATA[{{ siteName }}]]></title>
        <link>{{ siteURL }}</link>
        <language>zh-CN</language>
        {% if ext_copyright.length %}
            <copyright>{{ ext_copyright }}</copyright>
        {% /if %}
        {% if ext_itunes_subtitle.length %}
            <itunes:subtitle>{{ ext_itunes_subtitle }}</itunes:subtitle>
        {% /if %}
        {% if ext_itunes_author.length %}
            <itunes:author>{{ ext_itunes_author }}</itunes:author>
        {% /if %}
        {% if ext_itunes_summary.length %}
            <itunes:summary>{{ ext_itunes_summary }}</itunes:summary>
        {% /if %}
        {% if ext_itunes_description.length %}
            <description> {{ ext_itunes_description }} </description>
        {% /if %}
        <itunes:owner>
            {% if ext_itunes_author.length %}<itunes:name>{{ ext_itunes_author }}</itunes:name>{% /if %}
            {% if ext_itunes_email.length %}<itunes:email>{{ ext_itunes_email }}</itunes:email>{% /if %}
        </itunes:owner>
        {% if ext_itunes_image.length %}
            <itunes:image href="{{ ext_itunes_image }}" />
        {% /if %}
        {% if ext_itunes_category.length %}
            <itunes:category text="{{ ext_itunes_category }}"/>
        {% /if %}
        {% for p in posts %}
            {% if p.ext_enclosureURL.length %}
                <item>
                    <title>{{ p.ext_title }}</title>
                    <itunes:author> {{ p.ext_itunes_author }}</itunes:author>
                    <itunes:subtitle> {{ p.ext_itunes_subtitle }} </itunes:subtitle>
                    <itunes:summary><![CDATA[ 
                        {% if p.ext_itunes_summary.length %} 
                            {{ p.ext_itunes_summary }} 
                        {% else %}
                            {{ p.content }}
                        {% /if %} ]]>
                    </itunes:summary>
                    <itunes:image href="{{ p.ext_itunes_image }}" />
                    <enclosure url="{{ p.ext_enclosureURL }}"  length="{{ p.ext_enclosure_length }}"   type="{{ p.ext_enclosure_type }}"  />
                    <guid>{{ p.ext_guid }}</guid>
                    <pubDate>{{ p.ext_pubDate }}</pubDate>
                    <itunes:duration>{{ p.ext_itunes_duration }}</itunes:duration>
                </item>
            {% /if %}
        {% /for %}
    </channel>
</rss>

至此，podcast-greyshade 这个新模板已经完成了，增长了播放器支持和把全部播客文章生成为 Apple 播客格式的 RSS。

podcast-greyshade 这个网站模板已传到 github：https://github.com/oulvhai/MWeb-Themes/tree/master/podcast-greyshade
使用 podcast-greyshade 这个网站模板的 Demo 的网址：http://coderforart.com/bitvoice/。我只增长了两篇播客文章。而后 Apple 规格的 RSS 输出网址为：http://coderforart.com/bitvoice/podcast-atom.xml