在Markdown中插入视听文件及其他

Also published on S&C.

• Markdown插入视听文件
  • 例子
• Markdown 折叠
• Markdown插入表格

Google Analytics

先把Github Pages的一个坑填上。如果我们希望对自己的站点进行网站流量分析、统计，多数情况下是用Google Analytics。这个服务是05年的时候Google收购了它的前身Urchin，将收费服务开放免费使用。

它是把一段JS代码放入页面，每当运行该页面时，即会发送浏览者的国家、经由关键字等信息传递给站长。

我们先在Google Analytics开一个Account，设置property，Google Analytics就会给出Tracking Info，包括你的Tracking ID，和Website Tracking的JS代码。

• 把Tracking ID放入_config.yml文件中(option)；
• 把GA提供的JS代码放入default模板或者需要的页面中。

页面可以是在_includes下新建的一个analytics.html文件，单独在里面放置代码。

Markdown插入视听文件

事实上Markdown并不支持插入音频、视频，但是，Markdown支持html语法，我们可以通过html语句插入视听文件。用到的html标签是iframe，代码解释如下：

• div用于控制格式，若无则默认为居左；
• frameborder用于规定是否显示框架周围的边框，1为是，0为否；
• marginwidth及marginheight表示距离边缘的像素大小；
• width及height表示播放条的长度和宽度；
• src为播放链接，可以在如网易云音乐的生成外链播放器获取该链接，同时也获得以下代码，并可以自行更改；
• 也可将音频链接改为视频链接，从而播放视频。

注意1：

音频和视频在默认情况下是会自动循环播放的，可以修改链接的值进行修改；

在src域中，auto值表示是否自动播放，当值为1时为自动播放，0则不是；

在src域中，有些链接会附有height或width值，其表示表示播放框的基本宽高，可以更换其值以获得想要的播放框大小，此时可以不用填写外部的width及height。

注意2：

有的Markdown解析不支持直接在markdown中直接贴iframe语句。我们的解决办法是，在_includes里建一个单独的html文件。

例子

我们用一个例子来说明一下：

1. 先在_includes中新建youtube.html文件，里面放入youtube给的embed语句。ID部分用``代替；

<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen></iframe>

1. 在你撰写的markdown文件，需要插入视频的地方，插入语句：

{% include youtube.html id="IlkBLwl4aBM" %}

效果是这样的：

如果贴的是音频，道理一样，获取外链，同样操作即可。以网易云为例：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&amp;id={{ include.id }}&amp;auto=0&amp;height=66"></iframe>

上述是网易云生成的外链，不过要把width和height的值，用引号包起来，才能被kramdown解析。

163music音频测试：

对于Youtube存在与否的问题，请自行解决。

Markdown 折叠

其实这也是通过html语法实现的功能，你可以测试一下（拒绝IE，它不支持）：

实现上述折叠效果的代码如下：

<details>
  <summary>我有些话想跟你说</summary>
    <p> 等等，让我想想是什么话。</p>
      <p> 哎呀，忘记了。</p>
      </details>

Markdown插入表格

终于是一个Markdown本身就支持的功能了。表格、制表是我们在写作当中常用的一个功能。我们先看一个例子，看看在Markdown里用几行代码插入表格的效果是怎么样的：

   | 一个普通标题 | 一个普通标题 | 一个普通标题 |
   | ------| ------ | ------ |
   | 短文本 | 中等文本 | 稍微长一点的文本 |
   | 稍微长一点的文本 | 短文本 | 中等文本 |

效果如下：

稍微再加一点要求，例如：对齐

   | 左对齐标题 | 右对齐标题 | 居中对齐标题 |
   | :------| ------: | :------: |
   | 短文本 | 中等文本 | 稍微长一点的文本 |
   | 稍微长一点的文本 | 短文本 | 中等文本 |

出来的表格样式则是这样：

从上面的例子我们可以看到：

• 默认情况下，标题栏居中对齐，内容居左对齐；
• |、-、:这些符号之间，多余的空格会被忽略，布局由Markdown部署；
• -:表示内容和标题栏居右对齐；
• :-表示内容和标题栏居左对齐；
• :-:我们都猜到了，居中；
• |分隔单元格，-分隔表头和内容。

表格内支持插入其他Markdown行内标记，例如加粗、斜体、链接等等。

为站点增加几个常用功能

Also published on S&C.

• Post Archives
  • archives.html 文件
• 404 页面
• 社交按钮
  • 1. 录入社交账号信息
  • 2. 显示页面增加按钮
• 增加分享选项

给站点增加了几个常用功能，笔记如下。

Post Archives

按照站点选择的方式或主题不同而各有异同。主要的语法是：

archives.html 文件

通常archives.html文件会放在站点根目录下方便访问和放置。它的主要内容是：

{% for post in site.posts %}
  {% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
    {% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
        {% if month != nmonth %}
              {% if forloop.index != 1 %}</ul>{% endif %}
                    <h5>{{ post.date | date: '%B %Y' }}</h5><ul>
                        {% endif %}
                          <li><span class="time">{{ post.date | date: "%d/%m/%Y" }}</span>    <a href="{{ post.url }}">{{ post.title }}</a></li>
                          {% endfor %}

文件的作用就是按时间为分类list post。那么，我们需要在某个或某些页面放置一个链接，方便访问。以本站点为例，这个链接放置在侧栏中：

<li class="sidebar-nav-item"><a href="{{ site.baseurl }}/archives/">Posts Archives</a></li>

或者，有时你需要在主页上放置一个链接，例如：

      {% if page.archives %} <a href='{{ site.baseurl }}{{ page.archives }}'> Posts</a>{% endif %}
            {% endif %}

根据站点的实际情况进行修改即可。

404 页面

Github Pages默认有一个404页面，如果你需要自定义，404页面的跳转也很简单。

1. 在你的站点repo中，切换至master分支，根目录下新建一个404.html或404.md文件；
2. 在404文件开头设置YAML头信息，如permalink: /404.html；
3. 增加其它你希望在404页面显示的内容；
4. 收工或push完了收工。

Github能够从YAML头信息处得知那就是你希望跳转的404页面。如图所示：

社交按钮

主要分两步进行：

1. 录入社交账号信息

在站点设置文件_config.yml中放入类似以下的内容：

twitter_username:  princeliebe

2. 显示页面增加按钮

以twitter为例，在相应的页面中，放入以下语句：

      {% if site.twitter_username %}
            <a href="https://www.twitter.com/{{ site.twitter_username }}" target="_blank" style="text-decoration:none">
                    <i class="fa fa-fw fa-twitter"></i>

增加分享选项

计划进行的是：读者浏览post的时候，文末增加分享按钮，例如分享到twitter。我们需要做的就是在post的layout模板里面，增加一段语句：

<footer class="post-footer">
             <section class="share">
                             <h5>分享|Share</h5>
                                             <a class="icon-twitter" href="https://twitter.com/intent/tweet?text=&quot;{{ page.title }}&quot;%20{{ site.url }}{{ page.url }}%20via%20&#64;princeliebe">
                                                                 <span class="hidden">Twitter</span>
                                                                                 </a>
                                                                                             </section>     
                                                                                                     </footer>

如上述语句中，分享 | Share的内容、via后面的内容，可根据自己的实际情况设置。其他分享按钮做法类似。

想到再补充。