记录hexo无法加载图片及修改yilia主题组件

1-解决图片无法加载

之前使用vs code在md文件直接使用插件粘贴传入图片,发现启动后无法加载图片的情况,看了很多网上的解决方法都不行,不知道是不是我电脑问题,通过反复摸索最终我还是使用官方文档的图片标签
首先找到项目根目录的_config.yml文件,修改post_asset_folder

修改
post_asset_folder: true

然后hexo clean清一下,hexo n "XXX" (你自定义的新博客文章名),然后根目录下的source/_posts会有XXX.md和XXX文件夹(两个是同名的)

image.png

{% asset_img 图片名.图片后缀 [title] %}

然后hexo g生成文件hexo s启动服务 就可以看到图片了
如果之前安装过hexo-asset-image需要卸载,我的电脑是卸载完才能显示

npm uninstall hexo-asset-image --save

2-更换主页的部件

2.1-更换头像和网页图标还有主页名字 在项目根目录路径\themes\yilia\source新建一个assets文件夹(自定义名字),把头像和网页图标的图片放进去

我是配置到码云上的,https://gitee.com/用户名/myBlog

在项目根目录的\themes\yilia,打开_config.yml,找到两个属性,把路径改为
#favicon: "/assets/favicon.png"
favicon: "/myBlog/assets/favicon.png"
#你的头像url
avatar: "/myBlog/assets/me.png"

以上路径跟注释中的路径不一样(网上的方法是用注释中的代码),如果失败请切换不同方法
更换主页名字在根目录下的_config.yml,修改

image.png

2.2实现主页中点击所有文章弹框

npm uninstall hexo-generator-json-content --save

项目根目录_config.yml添加以下代码就可以了

jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

image.png

2.3修改主页网站点击图标 在项目根目录路径\themes\yilia文件中打开_config.yml,设置里面参数就好

image.png

2.4更换头像上面区域颜色和点击所有文章弹框后的颜色 打开yilia目录下的_config.yml文件,修改里面参数

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  
  header: 'linear-gradient(to right, #f83600 0%, #f9d423 100%)'
  # 右滑板块背景
  slider: 'linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: true

回到命令行hexo clean ,hexo g,hexo s,查看 效果图

image.png

查看过没有问题就可以hexo d推送到码云了

码云+hexo搭建博客