主题:博客搭建、博客美化和博客部署等经验
PaperMod:网站统计
https://blog.yuk7.com/posts/papermod/#%e5%9b%9b%e6%b7%bb%e5%8a%a0-umami-%e7%bd%91%e7%ab%99%e7%bb%9f%e8%ae%a1 https://jianyesc.com/p/page_view_over_time/
主题:博客搭建、博客美化和博客部署等经验
https://blog.yuk7.com/posts/papermod/#%e5%9b%9b%e6%b7%bb%e5%8a%a0-umami-%e7%bd%91%e7%ab%99%e7%bb%9f%e8%ae%a1 https://jianyesc.com/p/page_view_over_time/
https://www.tofuwine.cn/posts/3c96c5d2/#%e6%82%ac%e6%b5%ae%e6%8c%89%e9%92%ae
EnvId申请 请看 twikoo 官方文档 本人选择云函数部署的 vercel 部署方式。 MongoDB Atlas 500 MiB 的数据库 + Vercel 后端 最终获取的 EnvId 包含 https:// 前缀,例如 https://xxx.vercel.app。 Twikoo调用 在 layouts/partials/comments.html 添加 twikoo 代码: 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 <!-- Twikoo --> {{- with .Site.Params.comments.twikoo -}} <div class="pagination__title"> <span class="pagination__title-h" style="font-size: 20px;">💬 评论</span> <hr /> </div> <div id="tcomment"></div> <script src="//cdn.jsdelivr.net/npm/twikoo@{{- .version -}}/dist/twikoo.all.min.js"></script> <script> twikoo.init({ envId: '{{- .envId -}}', el: '#tcomment', {{- with .region -}} region: '{{- . -}}', {{- end -}} {{- with .path -}} path: '{{- . -}}', {{- end -}} {{- with .lang -}} lang: '{{- . -}}', {{- end -}} }) </script> <style> .twikoo { background-color: var(--card-background); border-radius: var(--card-border-radius); box-shadow: var(--shadow-l1); padding: var(--card-padding); } :root[data-scheme="dark"] { --twikoo-body-text-color-main: rgba(255, 255, 255, 0.9); --twikoo-body-text-color: rgba(255, 255, 255, 0.7); } .twikoo .el-input-group__prepend, .twikoo .tk-action-icon, .twikoo .tk-submit-action-icon, .twikoo .tk-time, .twikoo .tk-comments-no, .twikoo .tk-comments-count { color: var(--twikoo-body-text-color); } .twikoo .el-input__inner, .twikoo .el-textarea__inner, .twikoo .tk-preview-container, .twikoo .tk-content, .twikoo .tk-nick, .twikoo .tk-send { color: var(--twikoo-body-text-color-main); } .twikoo .el-button { color: var(--twikoo-body-text-color) !important; } .twikoo .el-input__count { color: var(--twikoo-body-text-color) !important; } .OwO .OwO-body { background-color: var(--body-background) !important; color: var(--body-text-color) !important; } </style> {{- end -}} 在 layouts/_default/single.html 调用 twikoo 代码: 1 2 3 {{- if (.Param "comments") }} {{- partial "comments.html" . }} {{- end }} 在 config/_default/params.yaml 中添加下面的代码: 1 2 3 4 5 6 7 comments: # 评论系统 twikoo: envId: https://xxx.vercel.app # 腾讯云环境填 envId;Vercel 环境填地址(https://xxx.vercel.app) region: # 环境地域,默认为 ap-shanghai,腾讯云环境填 ap-shanghai 或 ap-guangzhou;Vercel 环境不填 path: window.TWIKOO_MAGIC_PATH||window.location.pathname # 用于区分不同文章的自定义 js 路径 lang: zh-CN # 用于手动设定评论区语言,支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js version: 1.6.41 # 要和twikoo的版本号要对得上,可从vercel上看 Twikoo管理设置 现在博客里应该能看到 Twikoo 界面了。点击右下角的蓝色小齿轮进入管理员界面,第一次需要设置管理密码,进入后可在 配置管理 里更改选项。 ...
基于Shortcode实现文章内链
基于Shortcode移植Admonition折叠框
设置外链跳转 默认站外链接都是当前页打开,对留存率很不友好呀,而且站外链接通常是补充文章内容的,需要返回回来很打断节奏。 在根目录下 layouts/_default/_markup/render-link.html,新建/追加: ...
PaperMod主题魔改
基于Hugo搭建博客和介绍如何使用PaperMod博客框架
自定义域名购买、DNS配置和Github自定义域名配置
本地构建+Github Action部署流程。