莫烦python的视频源

Posted 2021-03-14 meiqu

莫烦python是一个关于python、机器学习教程的网址，站长很多东西是通过自学而来的，所以他创建了youtube和优酷频道。

网址 https://morvanzhou.github.io/
项目地址 https://github.com/MorvanZhou/morvanzhou.github.io

在项目中有2个分支，master分支是github page，而hexo分支是源代码。在代码中，可以看到一些markdown文件的front matter 有 youku_id 和 youtube_id 变量，而在layout里面有这一段代码

<div class="switch-video-div">
  <span style="font-weight: bold;vertical-align: super;" >切换视频源：</span>
  {% if page.youtube_id %}
  <button class="switch-video-btn" onclick="chooseVideo(youtube_src, 'youtube', '{{page.youtube_id}}')">
    <img class="icon" src="/static/img/icon/youtube.png" alt="Youtube频道">
  </button>
  {% endif %}

  {% if page.youku_id %}
  <button class="switch-video-btn" onclick="chooseVideo(youku_src, 'youku', '{{page.youku_id}}')">
    <img class="icon" src="/static/img/icon/youku.jpg" alt="优酷频道">
  </button>
  {% endif %}

  {% if page.b_av %}
  <button class="switch-video-btn" onclick="chooseVideo(bilibili_src, 'bilibili', '{{page.b_av}}/?p={{page.b_page}}')">
      <img class="icon" src="/static/img/icon/bilibili_icon.png" alt="Bilibili">
    </button>
  {% endif %}

  <p id="video-alrt-info" style="display: none; font-size: 0.8em; text-align: center;"></p>
  <hr style="width: 60%;">


</div>

通过它实现视频源的切换按钮