music.html

---
layout: page
title: "MUSIC"
description: "网易云歌单"
header-img: "img/post-index-bg-swift.jpg"

---

<Language Selector>
<select class="sel-lang" onchange= "onLanChange(this.options[this.options.selectedIndex].value)">
    <option value="0" selected> 中文 | Chinese </option>
    <option value="1"> 英文 | English </option>
    <option value="2"> 日语 | Japanese </option>
    <option value="3"> 粤语 | Cantonese </option>
    <option value="4"> 其他 | Others </option>
</select> 

<!-- Chinese Version -->
<div class="zh post-container">
    {% capture about_zh %}{% include music/zh.md %}{% endcapture %}
    {{ about_zh | markdownify }}
</div>

<!-- English Version -->
<div class="en post-container">
    {% capture about_en %}{% include music/en.md %}{% endcapture %}
    {{ about_en | markdownify }}    
</div> 

<!-- Japanese Version -->
<div class="jp post-container">
    {% capture about_jp %}{% include music/jp.md %}{% endcapture %}
    {{ about_jp | markdownify }}    
</div> 

<!-- Cantonese Version -->
<div class="ct post-container">
    {% capture about_ct %}{% include music/ct.md %}{% endcapture %}
    {{ about_ct | markdownify }}    
</div> 

<!-- Others Version -->
<div class="ot post-container">
    {% capture about_ot %}{% include music/ot.md %}{% endcapture %}
    {{ about_ot | markdownify }}    
</div> 

<Handle Language Change>
<script type="text/javascript">
    // get nodes
    var $zh = document.querySelector(".zh");
    var $en = document.querySelector(".en");
    var $jp = document.querySelector(".jp");
    var $ct = document.querySelector(".ct");
    var $ot = document.querySelector(".ot");
    var $select = document.querySelector("select");

    // bind hashchange event
    window.addEventListener('hashchange', _render);
    
    // handle render
    function _render(){
        var _hash = window.location.hash;
        // en
        if(_hash == "#en"){
            $select.selectedIndex = 1;
            $zh.style.display = "none";
            $en.style.display = "block";
            $jp.style.display = "none";
            $ct.style.display = "none";
            $ot.style.display = "none";
        // jp
        }else if(_hash == "#jp"){
            $select.selectedIndex = 2;
            $zh.style.display = "none";
            $en.style.display = "none";
            $jp.style.display = "block";
            $ct.style.display = "none";
            $ot.style.display = "none";
        // ct
        }else if(_hash == "#ct"){
            $select.selectedIndex = 3;
            $zh.style.display = "none";
            $en.style.display = "none";
            $jp.style.display = "none";
            $ct.style.display = "block";
            $ot.style.display = "none";
            // ct
        }else if(_hash == "#ot"){
            $select.selectedIndex = 4;
            $zh.style.display = "none";
            $en.style.display = "none";
            $jp.style.display = "none";
            $ct.style.display = "none";
            $ot.style.display = "block";
        // zh by default
        }else{
            // not trigger onChange, otherwise cause a loop call.
            $select.selectedIndex = 0;
            $zh.style.display = "block";
            $en.style.display = "none";
            $jp.style.display = "none";
            $ct.style.display = "none";
            $ot.style.display = "none";
        }
    }
    
    // handle select change
    function onLanChange(index){
        if(index == 0){
            window.location.hash = "#zh"
        }else if(index == 1){
            window.location.hash = "#en"
        }else if(index == 2){
            window.location.hash = "#jp"
        }else if(index == 3){
            window.location.hash = "#ct"
        }else if(index == 4){
            window.location.hash = "#ot"
        }
    }
    
    // init
    _render();
</script>


<!-- Gitalk 评论 start  -->
{% if site.gitalk.enable %}
<!-- Gitalk link  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
    <script type="text/javascript">
    var gitalk = new Gitalk({
    clientID: '{{site.gitalk.clientID}}',
    clientSecret: '{{site.gitalk.clientSecret}}',
    repo: '{{site.gitalk.repo}}',
    owner: '{{site.gitalk.owner}}',
    admin: ['{{site.gitalk.admin}}'],
    distractionFreeMode: {{site.gitalk.distractionFreeMode}},
    id: 'about',
    });
    gitalk.render('gitalk-container');
</script>
{% endif %}
<!-- Gitalk end -->

<!-- disqus 评论框 start  -->
{% if site.disqus_username %}  
<div class="comment">
    <div id="disqus_thread" class="disqus-thread">

    </div>
</div>
{% endif %}
<!-- disqus 评论框 end -->

<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "{{site.disqus_username}}";
    var disqus_identifier = "{{site.disqus_username}}/{{page.url}}";
    var disqus_url = "{{site.url}}{{page.url}}";

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<!-- disqus 公共JS代码 end -->



<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC80ODcxMi8yNTIwNg==">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->