SOFTWARE 2023 年 9 月 20 日

插入Disqus評論 → 到 Astro-air-blog 主題中

我作夢都沒想到，當我跟Jekyll和Hugo說掰掰，最能接納我的就是Astro了。就像張開雙手般，永遠不會拒絕你.... 不過這些都不是重點，重點是我終於在這個Astro-air-blog當中，插入Disqus評論了，十分讓我開心！

SOFTWARE TQGX

我作夢都沒想到，當我跟Jekyll和Hugo說掰掰，最能接納我的就是Astro了。就像張開雙手般，永遠不會拒絕你… 不過這些都不是重點，重點是我終於在這個Astro-air-blog當中，插入Disqus評論了，十分讓我開心！

廢話不多說，上教學：

下面三張圖，代表流程。

因為我們用的是Astro-air-blog的主題背景

首先我們找到部落格的文件：src/MarkdownPost.astro 中
並且找到下列代碼：

           <a href={`/tags/${tag}`} class="tag">
            {tag}
           </a>
          );
         })
        }
       </div>
      </div>
     </div>
     <slot />
     <div class="component">
      <div class="component-content">
       <div class="article-copyright"> 
        <img class="copyright-img" src="https://github.com/tqgx/tqgx/blob/main/TQGX/copyright.png?raw=true" alt="我的圖片" width="160" style="display: block; margin: 0 auto;">
        <div class="cccopyright" style="padding:10px;margin:auto;font-size:16px;width:auto;text-align:center;:2px solid"><p>感謝您的閱讀。歡迎分享TQGX部落格(tqgx.github.io)的文章，引用轉載請上註明網址並遵守：<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh_TW" target="_blank" rel="noopener noreferrer">創用CC-姓名標示-非商業性-禁止改作 4.0 國際</a>授權條款。如需商業使用請來信告之。

       </div>
      </div>
     </div>
    </article>
   </section>
  </main>
  <Footer />
  <script is:inline>
   var script = document.createElement("script");
   script.src = "/static/js/initPost.js";
   document.head.appendChild(script);
  </script>
 </body>
</html>





要在上方代码中嵌入 Disqus 留言板，您可以按照以下步骤操作：

'' 在 <div class="component-content"> 标签之前，添加以下代码：
![|inline](https://github.com/tqgx/tqgx/blob/main/TQGX/dis1.png?raw=true)
HTML
<div id="disqus_thread"></div>
Use code with caution. Learn more
在 <script is:inline> 标签之前，添加以下代码：

HTML
<script>
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://{YOUR_DISQUS_SHORTNAME}.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
Use code with caution. Learn more
将 {YOUR_DISQUS_SHORTNAME} 替换为您在 Disqus 上的短名称。
完成上述步骤后，您的代码将如下所示：
```
HTML
<slot />
          <div class="component">
            <div class="component-content">
              <div id="disqus_thread"></div>
              <div class="article-copyright"> 
                <img class="copyright-img" src="https://github.com/tqgx/tqgx/blob/main/TQGX/copyright.png?raw=true" alt="我的圖片" width="160" style="display: block; margin: 0 auto;">
                <div class="cccopyright" style="padding:10px;margin:auto;font-size:16x;width:auto;text-align:center;:2px solid"><p>感謝您的閱讀。歡迎分享TQGX部落格(tqgx.github.io)的文章，引用轉載請上註明網址並遵守：<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh_TW" target="="_blank" rel="noopener noreferrer">創用CC-姓名標示-非商業性-禁止改作 4.0 國際</a>授權條款。如需商業使用請來信告之。

              </div>
            </div>
          </div>
        </article>
      </section>
    </main>
    <Footer />
    <script is:inline>
      var script = document.createElement("script");
      script.src = "/static/js/initPost.js";
      document.head.appendChild(script);
    </script>
  </body>
</html>
```

## 完成！
![|inline](https://github.com/tqgx/tqgx/blob/main/TQGX/dis4.png?raw=true)

HTML

留言板

Utteranc

Giscus

感謝您的閱讀。歡迎分享TQGX部落格(tqgx.github.io)的文章，引用轉載請上註明網址並遵守：創用CC-姓名標示-非商業性-禁止改作 4.0 國際授權條款。如需商業使用請來信告之。

Back