HCKZ知识库

Hugo_LoveIt主题使用Twikoo评论系统

一、主机与网络配置

IP地址与端口

服务 IP地址 端口
Hugo 22.22.22.22/24 8080
Twikoo 33.33.33.33/24 8080

Nginx 代理规则

域名地址 映射到
https://hugo.example.com 22.22.22.22:8080（Hugo 博客）
https://hugo.example.com/twikoo 33.33.33.33:8080（Twikoo 评论）

:warning: 如需外网访问，请使用端口转发或部署到云端。

二、Twikoo 部署方式

1. Docker 运行命令

  • 访问主机 8080 端口即可访问到 twikoo

  • ${PWD}/data 为宿主机存储配置文件路径

  • /app/data 对应docker镜像内部配置文件路径

  • imaegoo/twikoo 镜像名

docker run --name twikoo \
  -e TWIKOO_THROTTLE=1000 \
  -p 8080:8080 \
  -v ${PWD}/data:/app/data \
  -d imaegoo/twikoo

2. Docker Compose 部署

  • 访问主机 8080 端口即可访问到 twikoo

  • ./data 为宿主机存储配置文件路径

  • /app/data 对应docker镜像内部配置文件路径

  • imaegoo/twikoo 镜像名

version: '3'
services:
  twikoo:
    image: imaegoo/twikoo
    container_name: twikoo
    restart: unless-stopped
    ports:
      - 8080:8080
    environment:
      TWIKOO_THROTTLE: 1000
    volumes:
      - ./data:/app/data

3. Kubernetes 部署

注意事项：

  • 根据实际情况修改 namespace

  • 替换镜像拉取密钥 imagePullSecrets

  • 修改 volumes 存储

  • 注意修改 Ingress 配置暴露服务

    :::details {indent="0"}

    :::detailsSummary {indent="0"}

    点击查看 K8S YAML 配置

    :::

    :::detailsContent {indent="0"}

    :::

    :::

---
apiVersion: apps/v1
kind: Deployment
metadata:
  annotations:
    k8s.kuboard.cn/displayName: twikoo
    k8s.kuboard.cn/workload: twikoo
  labels:
    k8s.kuboard.cn/layer: web
    k8s.kuboard.cn/name: twikoo
  name: twikoo
  namespace: web-server
  resourceVersion: '32618440'
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  revisionHistoryLimit: 10
  selector:
    matchLabels:
      k8s.kuboard.cn/layer: web
      k8s.kuboard.cn/name: twikoo
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 25%
    type: RollingUpdate
  template:
    metadata:
      annotations:
        kubectl.kubernetes.io/restartedAt: '2024-08-02T18:15:15+08:00'
      creationTimestamp: null
      labels:
        k8s.kuboard.cn/layer: web
        k8s.kuboard.cn/name: twikoo
    spec:
      containers:
        - env:
            - name: TWIKOO_THROTTLE
              value: '1000'
          image: imaegoo/twikoo
          imagePullPolicy: Always
          name: twikoo
          ports:
            - containerPort: 8080
              name: port
              protocol: TCP
          resources:
            limits:
              cpu: '1'
              memory: 512Mi
            requests:
              cpu: 10m
              memory: 128Mi
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
          volumeMounts:
            - mountPath: /app/data
              name: volume-2bkj2
              subPath: twikoo
      dnsPolicy: ClusterFirst
      imagePullSecrets:
        - name: harbor
      restartPolicy: Always
      schedulerName: default-scheduler
      securityContext: {}
      terminationGracePeriodSeconds: 30
      volumes:
        - name: volume-2bkj2
          persistentVolumeClaim:
            claimName: web-server-ubuntu

---
apiVersion: v1
kind: Service
metadata:
  annotations:
    k8s.kuboard.cn/workload: twikoo
  labels:
    k8s.kuboard.cn/layer: web
    k8s.kuboard.cn/name: twikoo
  name: twikoo
  namespace: web-server
  resourceVersion: '372764'
spec:
  clusterIP: 10.111.188.120
  clusterIPs:
    - 10.111.188.120
  internalTrafficPolicy: Cluster
  ipFamilies:
    - IPv4
  ipFamilyPolicy: SingleStack
  ports:
    - name: zncwsy
      port: 8080
      protocol: TCP
      targetPort: 8080
  selector:
    k8s.kuboard.cn/layer: web
    k8s.kuboard.cn/name: twikoo
  sessionAffinity: ClientIP
  sessionAffinityConfig:
    clientIP:
      timeoutSeconds: 10800
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    k8s.kuboard.cn/workload: twikoo
    nginx.ingress.kubernetes.io/client-body-buffer-size: 10240M
    nginx.ingress.kubernetes.io/proxy-body-size: 10240M
    nginx.ingress.kubernetes.io/proxy-buffer-size: 10240M
    nginx.ingress.kubernetes.io/proxy-connect-timeout: 3600s
    nginx.ingress.kubernetes.io/proxy-max-temp-file-size: 10240M
    nginx.ingress.kubernetes.io/proxy-next-upstream-timeout: 3600s
    nginx.ingress.kubernetes.io/proxy-read-timeout: 3600s
    nginx.ingress.kubernetes.io/proxy-send-timeout: 3600s
  labels:
    k8s.kuboard.cn/layer: web
    k8s.kuboard.cn/name: twikoo
  name: twikoo
  namespace: web-server
  resourceVersion: '25540806'
spec:
  ingressClassName: nginx
  rules:
    - host: twikoo.example.com
      http:
        paths:
          - backend:
              service:
                name: twikoo
                port:
                  number: 8080
            path: /twikoo
            pathType: Prefix

三、Hugo + LoveIt 前端集成 Twikoo

1. 下载 Twikoo 前端 JS

  • 将以下文件下载并保存到你的 Hugo 静态目录下:
https://cdn.jsdelivr.net/npm/twikoo@1.6.42/dist/twikoo.all.min.js
→ static/js/twikoo.js

2. 修改 config.toml / hugo.toml

  • 找到 params.page.comment 评论配置

  • 修改 enable = false 为 true

  • 新增 [params.page.comment.twikoo] 字段

  • 修改后的样式为:

[params.page.comment]
  enable = true

  [params.page.comment.twikoo]
    enable = true
    twikoo_env_id = "https://hugo.example.com/twikoo"

3. 修改 layouts/partials/comment.html 文件

  • 在 {{- if $comment.enable -}} <div id="comments"> 内添加以下代码：
{{- /* Twikoo Comment System */ -}}
{{- $twikoo := .Site.Params.page.comment.twikoo | default dict -}}
{{- if $twikoo.enable -}}
  <div id="twikoo" class="comment"></div>
  <script src="https://wiki.hckz.tech/js/twikoo.js"></script>
  <script>
    twikoo.init({
      envId: "{{ $twikoo.twikoo_env_id }}",
      el: '#twikoo'
    });
  </script>
  <noscript>
    Please enable JavaScript to view the comments powered by <a href="https://twikoo.js.org/">Twikoo</a>.
  </noscript>
{{- end -}}
  • 修改后的文件格式为:
{{- if $comment.enable -}}
    <div id="comments">
        {{- /* Twikoo Comment System */ -}}
        {{- $twikoo := .Site.Params.page.comment.twikoo | default dict -}}
        {{- if $twikoo.enable -}}
            <div id="twikoo" class="comment"></div>
            <script src="https://wiki.hckz.tech/js/twikoo.js"></script>
            <script>
                twikoo.init({
                    envId: "{{ $twikoo.twikoo_env_id }}",
                    el: '#twikoo'
                });
            </script>
            <noscript>
                Please enable JavaScript to view the comments powered by <a href="https://twikoo.js.org/">Twikoo</a>.
            </noscript>
        {{- end -}}
        {{- /* Disqus Comment System */ -}}
        {{- $disqus := $comment.disqus | default dict -}}
        {{- if $disqus.enable -}}
            <div id="disqus_thread" class="comment"></div>
            {{- $source := printf "https://%v.disqus.com/embed.js" $disqus.shortname -}}
            {{- dict "Source" $source "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
            <noscript>
                Please enable JavaScript to view the comments powered by <a href="https://disqus.com/?ref_noscript">Disqus</a>.
            </noscript>
        {{- end -}}

四、禁用评论

  • 在文章最上方增加 以下配置即可停用该页面的评论.
disable_comments = true

五、测试

Hugo 测试

  • 访问 https://hugo.example.com 会跳转到博客主页

    Twikoo 访问测试

  • 访问 https://hugo.example.com/twikoo 如果出现以下输出那么就可以正常使用了
{"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.6.42"}

评论测试

  • 打开一篇文章的最下方 进行测试即可

六、部署完成！

  • Twikoo 评论系统已经部署完毕 :party:，访问你的博客页面测试评论功能吧！

评论

暂无评论。

提交后需管理员审核通过才会显示