首页
文档
标签 分类
其他
抓猫游戏
关于
留言板 打赏

目录

Hugo + LoveIt 主题使用 Twikoo 评论系统

小阿庆 收录于 Blog
   约 799 字   预计阅读 4 分钟   次阅读

一、主机与网络配置

IP地址与端口

服务IP地址端口
Hugo22.22.22.22/248080
Twikoo33.33.33.33/248080

Nginx 代理规则

域名地址映射到
https://hugo.example.com22.22.22.22:8080（Hugo 博客）
https://hugo.example.com/twikoo33.33.33.33:8080（Twikoo 评论）

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

二、Twikoo 部署方式

1. Docker 运行命令

  • 访问主机 8080 端口即可访问到 twikoo
  • ${PWD}/data 为宿主机存储配置文件路径
  • /app/data 对应docker镜像内部配置文件路径
  • imaegoo/twikoo 镜像名
1
2
3
4
5

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 镜像名
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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 配置暴露服务
点击查看 K8S YAML 配置
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

---
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 静态目录下:
1
2

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] 字段

  • 修改后的样式为:

1
2
3
4
5
6

[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"> 内添加以下代码：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{{- /* Twikoo Comment System */ -}}
{{- $twikoo := .Site.Params.page.comment.twikoo | default dict -}}
{{- if $twikoo.enable -}}
  <div id="twikoo" class="comment"></div>
  <script src="/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 -}}
  • 修改后的文件格式为:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{{- 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="/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 -}}

四、禁用评论

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

disable_comments = true

五、测试

Hugo 测试

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

Twikoo 访问测试

  • 访问 https://hugo.example.com/twikoo 如果出现以下输出那么就可以正常使用了
1

{"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.6.42"}

评论测试

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

六、部署完成！

  • Twikoo 评论系统已经部署完毕 🎉，访问你的博客页面测试评论功能吧！
更新于 2025-01-15
阅读原始文档
 Twikoo, Docker, Hugo, 评论系统
返回 | 主页