<p>MWeb 比较有特色的是一键生成静态博客功能，然后从 MWeb 最开始规划要做静态博客生成功能时，我就希望 MWeb 的静态博客生成功能在易用的同时，还要有很强大的扩展性。</p>
<p>比如说能自己增加网站公告，这个公告可以随时更换和取消。再比如说能自己为网站增加广告，而且可以增加多个广告位，google 的或者自定的广告都可以。这些之前都可以通过修改模板解决，但是有些是解决不了的：比如说把文章列表做成像 theverge <a href="http://www.theverge.com/reviews">http://www.theverge.com/reviews</a> 的页的效果，就是列表中有设定的特色图片，有自定的简介，有评分，有价格时会显示价格等。比如说设定 SEO 的一些信息，设定分享到 Facebook 的一些信息。又比如说播客类的网站，要生成 Apple 规格的 RSS。</p>
<p>1.4 版的静态博客增强就是解决这些问题的。我一直考虑如何介绍这个功能，然后因为之前比特新声的主播之一 <a href="http://weibo.com/haohailong">郝海龙</a> 随意问了一下是否支持生成 Podcast 的 RSS。所以我想来想去，还是介绍用 MWeb 自带的 greyshade 网站模板做一个可以写博客又可以做为播客的新模板好了。</p>
<p>这个新模板的 Demo 网址是：<a href="http://coderforart.com/bitvoice/">http://coderforart.com/bitvoice/</a>，Podcast RSS 为：<a href="http://coderforart.com/bitvoice/podcast-atom.xml">http://coderforart.com/bitvoice/podcast-atom.xml</a>。 一般情况下只要到这个网址体验一下，并看一下《音乐《梁祝》及 MWeb 静态博客功能增强的使用体验》这篇文章即可，因为下边的内容是跟自定模板有关。</p>
<!--more-->
<p>下面正式开始做这个新模板。<br/> 首先在 MWeb 中新增一个静态网站分类，名为比特新声。然后设置如下，我是想放在我的博客中做 Demo，所以网址为：<a href="http://coderforart.com/bitvoice/">http://coderforart.com/bitvoice/</a>。评论和分类代码、GA 代码都跟 coderforart 一样。</p>
<p><img src="http://static.oschina.net/uploads/img/201505/08144129_uEPn.jpg" alt=""/></p>
<p>点上图中最下边的 <code>Advanced Settings</code> 后会出来如下图的网站扩展设置。</p>
<p><img src="http://static.oschina.net/uploads/img/201505/08144125_Wjre.jpg" alt=""/></p>
<p>一开始打开时，<code>Site Setting</code> 这个 Tab 是没有内容的，可以看到 MWeb 支持整个网站的字段扩展（Site Extension）和网站所属文档的字段扩展（Document Extension）。</p>
<p>如下图，我在 <code>Site Extension</code> 这个 Tab 根据 <a href="https://www.apple.com/itunes/podcasts/specs.html">Apple Podcast RSS</a> 自定了一些必要字段，然后切到 <code>Site Setting</code> 这个 Tab，就会看到按照自定的字段生成可以输入的文本框了。</p>
<p><img src="http://static.oschina.net/uploads/img/201505/08144112_r7zA.jpg" alt=""/></p>
<p>如右边，我可以填入相关文案。然后如果有图片怎么办，简单的办法是打开比特新声分类内的一个文档，直接把图拖入编辑器中，从生成的 Markdown 语法中取其地址贴上就好。如上图右边的图中的 <code>Fb Image</code> 字段。</p>
<p>然后我也在 <code>Document Extension</code> 这个 Tab 也根据 <a href="https://www.apple.com/itunes/podcasts/specs.html">Apple Podcast RSS</a> 自定了一些必要字段，这些字段可以点软件右上角的设置按钮，并点第三个 Tab <code>Extension</code> 就能看到了按自定字段生成的可输入文本框了，如图。</p>
<p><img src="http://static.oschina.net/uploads/img/201505/08144126_bE7E.jpg" alt=""/></p>
<p>这样的话，如果想新增新一期播客，就点开第三个 <code>Extension</code> Tab，填入一些这一期播客的相关信息即可。如果新增的文档只是普通文章，则可以不用管扩展的信息。</p>
<p>下图是关于 <code>Base</code> Tab 和 <code>Media</code> Tab 的情况。</p>
<p><img src="http://static.oschina.net/uploads/img/201505/08144110_wANF.jpg" alt=""/></p>
<p><code>Media</code> Tab 会列出所有你引入到当前文档中的图片、附件等等。比如要增加一张某期的播客的封面图片，文章里用不到，但是 <code>Extension</code> Tab 里要填入，就可以先把图拖入编辑器内，然后删除，再点 <code>Media</code> Tab 就会看到所拖入的图了，点 <code>Copy Path</code> 然后贴到 <code>Extension</code> Tab 的某字段即可。</p>
<p>字段设置好了，下面要开始修改 greyshade 网站模板了。目前看来只需要为属于播客的文章增加一个播放器，让它可以播放 MP3。然后修改 RSS，让 RSS 按 Apple 播客的格式即可。</p>
<p>以下为修改模板的内容，建议先参考 <a href="http://zh.mweb.im/custom-site-theme-detail-zh.html">自定网站或博客主题简单说明</a>。</p>
<p>首先增加播放器，我随便找了一下，看到 <a href="http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/">http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/</a> 这个播放器不错，所以就决定用这个了，首先复制 greyshade 模板，并重命名为：podcast-greyshade。把 soundmanager 的相关代码放到 asset/soundmanager 中。然后打开 header.html 文档，在上面增加 soundmanager2 播放器的代码，大概是这样：</p>
<pre><code class="language-js"><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> </code></pre>
<p>因为我需要在文章列表和单篇文章都支持播放功能，所以为 category.html 和 post.html 增加播放支持。代码大概如下（我只选关键代码）。</p>
<pre><code class="language-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 %} </code></pre>
<p>下面解释一下上面这段代码。<br/> MWeb 中 <code>Site Setting</code> 设置的所有值会传到所有模板页，比如说要输出上面设置的 SEO Des 的值，用 <code>{{ext_seo_des}}</code> 即可。可以看到，规则是： <code>ext_ + variable Name</code> 。然后用软件右上角第一个按钮设置的文档中的 <code>Extension</code> 的值，会传到所有 <code>文档对象变量</code> 中，如上面代码，文档对象变量为 <code>post</code>，访问规则为 <code>post.ext_ + variable Name</code>。 然后请注意 <code>{% if post.ext_enclosureURL.length %} {% /if %}</code> 这种写法，这是为了判断这文章是否有设置了播客的相关值，有设置，说明这文章为播客文章。</p>
<p>下面介绍一下如何增加输出 Apple 支持的播客的 RSS 格式。 </p>
<p>MWeb 一般情况下只生成全站文章的 RSS，名字为 atom.xml。然后 MWeb 为了满足扩展需要，增加了另外的规则，为：如果网站模板中存在有 <code>分类的 HTML File Name 的值 + -atom.xml</code> 这样的模板文档，则会为这个分类用 <code>分类的 HTML File Name 的值 + -atom.xml</code> 这个模板生成名为 <code>分类的 HTML File Name 的值 + -atom.xml</code> 的 RSS。</p>
<p>如上面，我增加了两个子分类：文章和播客。然后我设置了播客子分类的 <code>HTML File Name</code> 为 <code>podcast</code>。然后我在网站模板中也增加了名为 <code>podcast-atom.xml</code> 的模板，下面是这个模板的内容。</p>
<pre><code class="language-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> </code></pre>
<p>至此，podcast-greyshade 这个新模板已经完成了，增加了播放器支持和把所有播客文章生成为 Apple 播客格式的 RSS。</p>
<p>podcast-greyshade 这个网站模板已传到 github：<a href="https://github.com/oulvhai/MWeb-Themes/tree/master/podcast-greyshade">https://github.com/oulvhai/MWeb-Themes/tree/master/podcast-greyshade</a><br/> 使用 podcast-greyshade 这个网站模板的 Demo 的网址：<a href="http://coderforart.com/bitvoice/">http://coderforart.com/bitvoice/</a>。我只增加了两篇播客文章。然后 Apple 规格的 RSS 输出网址为：<a href="http://coderforart.com/bitvoice/podcast-atom.xml">http://coderforart.com/bitvoice/podcast-atom.xml</a></p>
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
