Contents

Hugo主题LoveIt使用遇到的问题

几年没写博客了,腾讯的云主机到期后,把博客从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/
  # [email protected] https://github.com/simple-icons/simple-icons
  simpleIcons: http://www.icharm.me/npm/[email protected]/icons/
libFiles:
  # [email protected] https://fontawesome.com/
  fontawesomeFreeCSS: '@fortawesome/[email protected]/css/all.min.css'
  # [email protected] https://github.com/daneden/animate.css
  animateCSS: [email protected]/animate.min.css
  # [email protected] https://github.com/algolia/autocomplete.js
  autocompleteJS: [email protected]/dist/autocomplete.min.js
  # [email protected] https://lunrjs.com/
  lunrJS: [email protected]/lunr.min.js
  # [email protected] https://github.com/algolia/algoliasearch-client-javascript
  algoliasearchJS: [email protected]/dist/algoliasearch-lite.umd.min.js
  # [email protected] https://github.com/aFarkas/lazysizes
  lazysizesJS: [email protected]/lazysizes.min.js
  # [email protected] https://github.com/fregante/object-fit-images
  objectFitImagesJS: [email protected]/dist/ofi.min.js
  # [email protected] https://github.com/twitter/twemoji
  twemojiJS: [email protected]/dist/twemoji.min.js
  # [email protected] https://github.com/sachinchoolur/lightgallery
  lightgalleryCSS: [email protected]/css/lightgallery-bundle.min.css
  lightgalleryJS: [email protected]/lightgallery.min.js
  lightgalleryThumbnailJS: [email protected]/plugins/thumbnail/lg-thumbnail.min.js
  lightgalleryZoomJS: [email protected]/plugins/zoom/lg-zoom.min.js
  # [email protected] https://github.com/zenorocha/clipboard.js
  clipboardJS: [email protected]/dist/clipboard.min.js
  # [email protected] https://github.com/ellisonleao/sharer.js
  sharerJS: [email protected]/sharer.min.js
  # [email protected] https://github.com/alexmacarthur/typeit
  typeitJS: [email protected]/dist/index.umd.js
  # [email protected] https://katex.org/
  katexCSS: [email protected]/dist/katex.min.css
  katexJS: [email protected]/dist/katex.min.js
  katexAutoRenderJS: [email protected]/dist/contrib/auto-render.min.js
  katexCopyTexJS: [email protected]/dist/contrib/copy-tex.min.js
  katexMhchemJS: [email protected]/dist/contrib/mhchem.min.js
  # [email protected]://github.com/mermaid-js/mermaid
  mermaidJS: [email protected]/dist/mermaid.min.js
  # [email protected] https://echarts.apache.org/
  echartsJS: [email protected]/dist/echarts.min.js
  # [email protected] https://docs.mapbox.com/mapbox-gl-js
  mapboxGLCSS: [email protected]/dist/mapbox-gl.min.css
  mapboxGLJS: [email protected]/dist/mapbox-gl.min.js
  # [email protected] https://github.com/MoePlayer/APlayer
  aplayerCSS: [email protected]/dist/APlayer.min.css
  aplayerJS: [email protected]/dist/APlayer.min.js
  # [email protected] https://github.com/metowolf/MetingJS
  metingJS: [email protected]/dist/Meting.min.js
  # [email protected] https://github.com/gitalk/gitalk
  gitalkCSS: [email protected]/dist/gitalk.min.css
  gitalkJS: [email protected]/dist/gitalk.min.js
  # [email protected] https://valine.js.org/
  valineJS: [email protected]/dist/Valine.min.js
  # [email protected] https://github.com/osano/cookieconsent
  cookieconsentCSS: [email protected]/build/cookieconsent.min.css
  cookieconsentJS: [email protected]/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,一些比较小的图片被放大了就很难看

修改了主题的显示图片的样式:参考如下

hugoloveit001.png
1

Todo

使用Hugo还有下面的问题需要优化一下:

  • Valine评论没有邮件通知
  • 修改Loveit主题,增加bing壁纸