feat: support Artalk comment system (#1306)

* feat: support artalk comment system

* chore: change url from testingcf to cdn prefix

* refactor(comments): align artalk provider style and keep custom css overrides

* fix: update Artalk CDN links to use the correct URL

* refactor(comments): simplify Artalk implementation

* fix(artalk): update script tag to use ESM for Artalk

* fix(artalk): set locale to 'auto' for Artalk comments

* refactor: move artalk style and script link to external.toml

---------

Co-authored-by: Jimmy Cai <jimmy@cai.im>

layouts/_partials/comments/provider/artalk.html

@@ -0,0 +1,30 @@
+{{- $style := resources.Get "scss/partials/comments/artalk.scss" | toCSS | minify -}}
+{{- with .Site.Params.comments.artalk -}}
+<link rel="stylesheet" href="{{ hugo.Data.external.Artalk.Style }}">
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+<div id="Comments" class="artalk-container"></div>
+
+<script type="module">
+    import Artalk from '{{ hugo.Data.external.Artalk.Script }}';
+
+    function isDarkMode() {
+        return document.documentElement.dataset.scheme === 'dark';
+    }
+
+    const artalkInstance = Artalk.init({
+        el: '#Comments',
+        pageKey: '{{ $.RelPermalink }}',
+        pageTitle: '{{ $.Title }}',
+        server: '{{ .serverUrl }}',
+        site: '{{ .site }}',
+        darkMode: isDarkMode(),
+        locale: 'auto',
+    });
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        if (!artalkInstance || typeof artalkInstance.setDarkMode !== 'function') return;
+        artalkInstance.setDarkMode(e.detail === 'dark');
+    });
+</script>
+{{- end -}}