Hugo主题LoveIt使用遇到的问题
Contents
几年没写博客了，腾讯的云主机到期后，把博客从wordpress迁移到Hugo上面，主题使用的loveit，刚迁移过来，遇到不少问题，记录一下。
迁移
本来以为迁移很麻烦，没想到有这个工具 wordpress-to-hugo-exporter 安装好后直接把所有的文章都导出到Hugo格式还有静态文件，图片什么的一块整理好，省去了很多的工作。
然后就是针对每篇文章一个一个的优化，还是花了不少的精力。
代码高亮
使用loveit的默认配置，发现代码块渲染出来的样式与demosite上面不同，没有折叠和拷贝按钮。
处理这个问题需要在主题配置config.toml中添加下列配置:
# Markup related configuration in Hugo
# Hugo 解析文档的配置
[markup]
# Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
# 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
[markup.highlight]
# false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
# false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
noClasses = false
Refer: https://github.com/dillonzq/LoveIt/issues/361
封面图
创建一个posts，在md文档的同目录下放入封面图featured-image.jpg，通过下面方式引入：
---
title: 技嘉GIGABYTE B350M Gaming 3 关闭 secure boot
images: []
resources:
- name: "featured-image"
src: "featured-image.jpg"
---
经过测试，没有正常显示封面图片。解决该问题有两种方式:
方式一
hugo中文档名称必须是index.xxx.md的格式，并且确保文档是在content/posts/下面，把文档换成index开后之后，通过上面方式引入封面图可以正常显示。
Refer: https://github.com/dillonzq/LoveIt/issues/582
方式二
封面图放在static目录下，然后在md文档的头部通过featuredImage的方式引入，如下
---
title: 技嘉GIGABYTE B350M Gaming 3 关闭 secure boot
featuredImage: "featured-image.jpg"
---
本地开启生产模式
本地测试是hugo server命令默认启动的是development开发模式， 像这样
$ hugo server
hugo v0.114.1+extended darwin/amd64 BuildDate=unknown
WARN Current environment is "development". The "comment system", "CDN" and "fingerprint" will be disabled.
当前运行环境是 "development". "评论系统", "CDN" 和 "fingerprint" 不会启用.
如果想在本地调试评论系统，比如说替换了评论系统emijos表情包，想在本地看看效果，可以通过下面的方式开启生产模式
$ export HUGO_ENVIRONMENT=production
$ hugo server
Jsdelivr
LoveIt主题使用了cdn.jsdeliver.com里面很多前端库文件，但是国内访问jsdeliver很慢
网上搜了下jsdeliver在国内的镜像站，没有找到太靠谱的，只好自己设置代理。有两种方式：
- 利用国内CDN服务代理
- 使用自己的服务器代理
这里笛湖使用自己的服务器来代理。
Nginx反代配置 参考如下：
# 缓存文件配置
proxy_cache_path /myl/jsdelivr.cache levels=2:2 use_temp_path=off keys_zone=jsdelivr:50m inactive=180d max_size=500m;
server {
listen 80;
server_name your-blog-domian;
# Allow file uploads
client_max_body_size 1M;
#access_log /myl/logs/access_uni.log main;
location / {
root /icharm/blog;
index index.html index.htm;
}
location /npm {
# 将流量转发到https://cdn.jsdelivr.net
proxy_pass https://cdn.jsdelivr.net;
# 因采用https，所以需要使用SNI指明主机名
proxy_ssl_server_name on;
# 设置请求头主机名
proxy_set_header Host cdn.jsdelivr.net;
# 记录代理信息
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
# 设置HTTP协议，并建立长连接
proxy_http_version 1.1;
proxy_set_header Connection "";
# X-Cache表明请求是否命中缓存
add_header X-Cache $upstream_cache_status;
# 禁用源站的cookie和浏览器缓存设置
proxy_ignore_headers Set-Cookie Cache-Control expires;
# 设置缓存的key_zone名称，必须与proxy_cache_path中的设置一致
proxy_cache jsdelivr;
# 设置缓存的key名称
proxy_cache_key $host$uri$is_args$args;
# 设置缓存的条件，只缓存状态码200的请求，缓存时限为180天
proxy_cache_valid 200 180d;
# 设置缓存的失效日期为180天
expires 180d;
# 禁用源站的Access-Control-Allow-Origin请求头
proxy_hide_header Access-Control-Allow-Origin;
# 自定义Access-Control-Allow-Origin请求头，注意包含协议和域名
add_header Access-Control-Allow-Origin "http://your-blog-domian";
}
}
在自己的blog项目里面新建assets\data\cdn目录，再创建xxx-jsdelivr.yml文件，贴入如下内容：
prefix:
libFiles: http://your-blog-domian/npm/
# simple-icons@7.3.0 https://github.com/simple-icons/simple-icons
simpleIcons: http://www.icharm.me/npm/simple-icons@7.3.0/icons/
libFiles:
# fontawesome-free@6.1.1 https://fontawesome.com/
fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.1.1/css/all.min.css'
# animate.css@4.1.1 https://github.com/daneden/animate.css
animateCSS: animate.css@4.1.1/animate.min.css
# autocomplete.js@0.38.1 https://github.com/algolia/autocomplete.js
autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
# lunr.js@2.3.9 https://lunrjs.com/
lunrJS: lunr@2.3.9/lunr.min.js
# algoliasearch@4.13.1 https://github.com/algolia/algoliasearch-client-javascript
algoliasearchJS: algoliasearch@4.13.1/dist/algoliasearch-lite.umd.min.js
# lazysizes@5.3.2 https://github.com/aFarkas/lazysizes
lazysizesJS: lazysizes@5.3.2/lazysizes.min.js
# object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
objectFitImagesJS: object-fit-images@3.2.4/dist/ofi.min.js
# twemoji@14.0.2 https://github.com/twitter/twemoji
twemojiJS: twemoji@14.0.2/dist/twemoji.min.js
# lightgallery@2.5.0 https://github.com/sachinchoolur/lightgallery
lightgalleryCSS: lightgallery@2.5.0/css/lightgallery-bundle.min.css
lightgalleryJS: lightgallery@2.5.0/lightgallery.min.js
lightgalleryThumbnailJS: lightgallery@2.5.0/plugins/thumbnail/lg-thumbnail.min.js
lightgalleryZoomJS: lightgallery@2.5.0/plugins/zoom/lg-zoom.min.js
# clipboard.js@2.0.11 https://github.com/zenorocha/clipboard.js
clipboardJS: clipboard@2.0.11/dist/clipboard.min.js
# sharer.js@0.5.1 https://github.com/ellisonleao/sharer.js
sharerJS: sharer.js@0.5.1/sharer.min.js
# typeit@8.6.0 https://github.com/alexmacarthur/typeit
typeitJS: typeit@8.6.0/dist/index.umd.js
# katex@0.16.0 https://katex.org/
katexCSS: katex@0.16.0/dist/katex.min.css
katexJS: katex@0.16.0/dist/katex.min.js
katexAutoRenderJS: katex@0.16.0/dist/contrib/auto-render.min.js
katexCopyTexJS: katex@0.16.0/dist/contrib/copy-tex.min.js
katexMhchemJS: katex@0.16.0/dist/contrib/mhchem.min.js
# mermaid@9.1.3https://github.com/mermaid-js/mermaid
mermaidJS: mermaid@9.1.3/dist/mermaid.min.js
# echarts@5.3.3 https://echarts.apache.org/
echartsJS: echarts@5.3.3/dist/echarts.min.js
# mapbox-gl@2.9.1 https://docs.mapbox.com/mapbox-gl-js
mapboxGLCSS: mapbox-gl@2.9.1/dist/mapbox-gl.min.css
mapboxGLJS: mapbox-gl@2.9.1/dist/mapbox-gl.min.js
# aplayer@1.10.1 https://github.com/MoePlayer/APlayer
aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
# meting@2.0.1 https://github.com/metowolf/MetingJS
metingJS: meting@2.0.1/dist/Meting.min.js
# gitalk@1.7.2 https://github.com/gitalk/gitalk
gitalkCSS: gitalk@1.7.2/dist/gitalk.min.css
gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
# valine@1.5.0 https://valine.js.org/
valineJS: valine@1.5.0/dist/Valine.min.js
# cookieconsent@3.1.1 https://github.com/osano/cookieconsent
cookieconsentCSS: cookieconsent@3.1.1/build/cookieconsent.min.css
cookieconsentJS: cookieconsent@3.1.1/build/cookieconsent.min.js
Tip
将上面的
your-blog-domian 改为自己博客域名修改blog项目的config.toml中的cdn设置，如下：
# CDN config for third-party library files
# 第三方库文件的 CDN 设置
[params.cdn]
# CDN data file name, disabled by default
# ["jsdelivr.yml"]
# located in "themes/LoveIt/assets/data/cdn/" directory
# you can store your own data files in the same path under your project:
# "assets/data/cdn/"
# CDN 数据文件名称, 默认不启用
# ["jsdelivr.yml"]
# 位于 "themes/LoveIt/assets/data/cdn/" 目录
# 可以在你的项目下相同路径存放你自己的数据文件:
# "assets/data/cdn/"
data = "xxx-jsdelivr.yml"
Refer: https://blog.jaspirit.cc/posts/ffee5413/
图片引用
hugo存放图片等静态文件有两个位置
static目录下，路径可以全局引用- posts文档的同目录下，这种方式仅能在当前文档里面引用
通过如下的方式引入图片
// {< image src="5.png" caption="4">}}
发现图片宽度自动100%，没有展示图片的原size，一些比较小的图片被放大了就很难看
修改了主题的显示图片的样式：参考如下
Todo
使用Hugo还有下面的问题需要优化一下：
- Valine评论没有邮件通知
- 修改Loveit主题，增加bing壁纸