• 首页
  • 搜索
  • 夜间模式
    ©2012-2025  Feng's Blog Theme by OneBlog
    搜索
    标签
    # 随笔 # 维修 # Wordpress # 阿里云 # 服务器 # typecho # Ghost # iphone # 网站 # word
  • 首页>
  • IT网络>
  • 正文
  • Hello Astro

    2024年03月25日 283 阅读 7 评论 3424 字

    之前看老麦的博客的文章,说是从NextJS换成Astro,很适合搭建静态博客,使用灵活,过程也不复杂,看的我又有折腾的方向了。目前我的博客除了主站在用的Wordpress外,还有其它的如:Typecho,Xlog,静态博客曾经也折腾过Hexo,Hugo(不过那都是很久的事了,其中搭建/使用等几乎也忘得差不多了),当然其它诸如:Ghost、Halo这种有后台的俺们以前也是用过的。

    既然Astro这么好玩,那就耍起来呗,官方的教程都有中文的,不得不夸一下,按着步骤来就好,这里需要注意的是要选好主题,这玩意据说换主题比较麻烦(这点不像其它那么方便,但也丝毫不能影响咱们这折腾的心),选好主题后一番部署基本就差不多了。一些小修改啥的基本都是照着官方教程来就可以了,非常简单,关键信息设置好就可以传到自己的Github上,再用Vercel部署就可以了(当然也可以先本地查看一下)。
    Astro最让我困惑的是怎么给它添加评论,折腾了很久也没能搞定,后来还是在老麦的指导下解决了,再次感谢老麦,放弃自己中午休息还给我写教程,感谢感谢!那么下面就来记录一下Astro添加评论的过程。

    • 在组件目录下src/components/下新建一个文件,例如Comments.astro,文件名记牢,后面会引用
      1. 如果添加Giscus评论,按照Giscus官方先部署好相关,会给一个相应的配置代码复制好,然后再在前面新建的组件Comments.astro中添加如下代码:
        <section class="giscus mx-auto mt-10 w-full"></section>
        <script
        src="https://giscus.app/client.js"
        data-repo="username/repo"
        data-repo-id="repo-id"
        data-category="Blog Posts Comments"
        data-category-id="DIC_kwDOB3LMn84CaXpn"
        data-mapping="url"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async
        </script>

        这里只是给一个示例代码,实际以Giscus给的为准,我这个只是参考一下
        2.添加Twikoo评论,也是按Twikoo教程部署好相关,然后按以下代码具体修改

        <div id="tcomment"></div>
        <script>
        document.addEventListener('astro:page-load', () => {
        function loadTwikoo() {
        const commentsContainer = document.getElementById('tcomment');
        if (commentsContainer) {
        const script = document.createElement('script');
        script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js';
        script.async = true;
        script.onload = () => {
          const initScript = document.createElement('script');
          initScript.innerHTML = `
            twikoo.init({
                envId: '您的环境id',
                el: '#tcomment',
            });
        `;
          document.body.appendChild(initScript);
        };
        document.body.appendChild(script);
        }
        }
        loadTwikoo();
        });
        </script>

        3.添加Artalk评论可以参照Twikoo的,部分修改一下就行
        4.添加Waline评论,参照以下代码

        <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
        <div id="waline"></div>
        <script type="module">
        import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
        init({
        el: '#waline',
        serverURL: 'https://waline.vercel.app',
        });
        </script>

        暂时先想到这4个评论,除了Giscus和Waline是我自己捣鼓的外,另外两个都是在老麦的指导下搞定的。定义好组件Comments.astro后就可以添加自己想要的评论了,在src/layouts/PostDetails.astro中添加一行代码就可以了,比如:

        //其它代码……
        <Content />
        </article>
        <Comments />  //添加这一段代码引用一下我们前面定义的组件
        </main>
        <Footer />
        </Layout>
        //其它代码……

        自此,Astro的评论就搞定了,折腾带来的乐趣,有时确实无法形容,至于要不要主用Astro,暂且不说(说不定乐趣过了也就不折腾了)

    本文著作权归作者 [ Feng ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    astro
    — END —

    读者留言7

    1. 你好 AstroPaper R11; 槿呈Goidea 博主
      2024-08-29 10:29

      [...]1900 哥哥给我看了一篇文章,里面提到了通过创建新的组件模板引入评论组件的方式。[...]

    2. 老麦 Lv.2
      2024-03-27 11:05

      我在想,添加waline的方法好像更简洁,按理twikoo和artalk也能这样添加的,我试试先。

      1. Feng 博主
        2024-03-27 11:42
        @老麦

        那你先趟个水试试看,可以的话再写个文章分享下

    3. 老张博客 Lv.3
      2024-03-27 09:17

      看来都是折腾能手呀!

      1. Feng 博主
        2024-03-27 09:56
        @老张博客

        我都是跟着大佬们,自己瞎折腾的

    4. koobai Lv.2
      2024-03-26 10:42

      折腾上瘾了,越折腾越嗨

      1. Feng 博主
        2024-03-26 15:40
        @koobai

        是的,你也可以搞起来了,Astro还是值得折腾一下的

    加载更多评论
    加载中...
    — 已加载全部评论 —
    首页
    Copyright©2012-2025  All Rights Reserved.  Load:0.019 s
    Theme by OneBlog V3.6.3
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。