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