「解决」hexo-yilia主题博客中出现Subnav图标不显示问题

我发现了一个问题,并解决之。


使用hexo搭建博客有一段时间了,个人比较喜欢voidking的博客主题,看上去十分简洁、美观。
优化后的yilia主题


问题发现

今天在segmentfault平台上创建一个博客,想要添加segmentfault的Subnav图标,在主题配置文件_config.yml中开启配置,发现却显示空白图。
Subnav图标不显示问题


经过一系列折腾,终于把问题解决了,这里分享一下解决方法。
PS:笔者主要学习方向始终是嵌入式,web前后端开发了解不多,涉及理论方面不做任何解释。


分析与解决

  1. 获取图标方法
    打开包含此图标的目标网站,右键查看源码,搜索到favicon.ico文件,一般是想要的图标,下载并保存(16*16的矢量图);或者在阿里巴巴矢量图标库中查询图标。
    获取图标

  2. 放置图标
    将此前保存的图片文件,另存到yilia主题的source/img/目录下,格式和其他图标文件保存一致,命名为segmentfault.png
    「解决」hexo-yilia主题博客中出现Subnav图标不显示问题_第1张图片

  3. 修改配置文件
    配置文件用于引入和渲染该文件,首先找出该配置文件的位置。

    • 打开博客页面,按F12调试,查看到渲染其他图标的文件是style.css,url是/css /style.css
      「解决」hexo-yilia主题博客中出现Subnav图标不显示问题_第2张图片
    • 在yilia主题目录下,找到了yilia/source/css/style.styl文件,使用搜素工具,最终定位到main.styl文件
    • 发现引用图标的配置代码,参考这个配置,也添加一个对segmentfault.png文件的引入配置
      「解决」hexo-yilia主题博客中出现Subnav图标不显示问题_第3张图片
  4. 再次访问

修改完成

参考教程

修改Yilia左下角SubNav的社交图标https://blog.zscself.com/post...

你可能感兴趣的:(hexo-yilia)