博客换图标

在hugo博客调整样式的时候，一直想加个图标嘛，就是像这个苹果小图标

一开始从主题copy出来的配置文件这个配置项是这样

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon:
    # 图标的配置就是favicon
    footer:
        since: 2020
        customText:

    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        emoji: 🍥
        subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

我想嘛底下的站内头像用的是相对地址 src: img/avatar.png ，那这网站的图标不也得来个相对地址？

就上了icon8 找了一个Mando的icon，选svg的格式下载

Mando icon

然后把svg文件上传到网站主目录下的assets/icons/文件夹下配置文件这样写

1
2


favicon: icons/mando.svg
    # 图标的配置就是favicon

然后 hugo -D 一下，看一下变化

噫，what’s the problem, why it’s still the default web page icon?

好奇怪，这玩意我配置的不对吗还是不能用相对路径定位到？

不想看文档了，干脆打开刚那个有苹果小图标的网页源码看看，这竟然是用的网络地址

svg使用网络地址

这我熟啊，找个网络图床把文件传上去再把直链贴到配置文件不就好了

但是打开最常用的图床网站，只接受jpg跟png文件😳？？？

愣了一下，再观察下刚才的那个favicon地址

https://www.appleid6.com/wp-content/uploads/2021/10/favicon.svg

这是传到他们自家网站的，那我用的nginx不也能用来当静态文件服务器嘛，知道这个url就好了

看了下我的 nginx-server 配置，root地址是这个

1
2
3
4


 location / {
                root /home/pos2/mynigga/public;
                index index.html index.htm;
            }

打开这个public路径，果然是存放静态文件的，hugo -D 生成的博客静态页面也都是存放这个路径下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


pos2@instance-20220901-0057:/etc/nginx$ cd ~/mynigga/
pos2@instance-20220901-0057:~/mynigga$ cd public/
pos2@instance-20220901-0057:~/mynigga/public$ ls
404.html    about-us  categories  img         links  post    sitemap.xml  zh-cn
about       ar        contact     index.html  p      scss    tags
about-hugo  archives  en          index.xml   page   search  ts
pos2@instance-20220901-0057:~/mynigga/public$ cd img
pos2@instance-20220901-0057:~/mynigga/public/img$ ls
avatar_huda2458f72ce188392d75c5d51cd8e24e_373_300x0_resize_box_3.png
icon_hu995b6d662f662aa18c1a4fc6ba465cdf_85512_300x0_resize_box_3.png

img 存放的就是图片吧，打开博客主页，复制图标图片地址，发现正好是这个icon_hu开头的url

https://blog.pos2.fun/img/icon_hu995b6d662f662aa18c1a4fc6ba465cdf_85512_300x0_resize_box_3.png

那简单啊，把svg文件放到这个img路径下，上面需要的图标网络地址不就出来了吗

1
2


favicon: https://blog.pos2.fun/img/mando.svg
# favicon替换成这个网络地址

然后再 hugo -D 再打开，就能看到小Mando了

Done！

edited:还是看了一下主题文档，还是有提到的，而且可以设置成本地路径

favicon# Type: string Site favicon path.

For example, if you want to use the favicon in static/favicon.ico, set favicon to /favicon.ico

就是把svg文件放在主目录的static文件夹下就行啦🤩 然后写

favicon: /mando.svg

(还是起个fav.svg名字好点，然后想换文件的话直接替换成同名文件就好了)