zoukankan      html  css  js  c++  java
  • Insert Pictures In Hexo Blog

    After build my blog following the online course step by step , I began to try to write my own blog✏️ , then I find a problem when after inserting pictures in my blog , it can be viewed locally , but I can't view it correctly after deploying to Github . Here are some solutions for it .

    在跟着网上教程一步步搭建好自己的博客后,开始尝试自己写博客文章,发现在Hexo博客文章中插入图片后在本地浏览正常,但是部署到GitHub上后边无法查看,在此提出一些供参考的解决方法
    具体情况如下图:

    遂在网上搜索解决方案,参照Ericam_的博客文章得以解决。

    教程参考此篇文章https://blog.csdn.net/xjm850552586/article/details/84101345

    以下为解决步骤:

    1. 安装插件

    安装hexo-asset-image插件,这是一个图片路径转换的插件。
    在Hexo根目录下右键运行git bash,输入以下命令安装插件

    $ npm install https://github.com/CodeFalling/hexo-asset-image --save
    

    或者

    $ npm install hexo-asset-image --save
    

    若出现错误则先执行:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    后执行:

    $ npm install hexo-asset-image --save
    

    可能原因是国内网络。

    2. 配置插件

    打开/node_modules/hexo-asset-image/index.js 这个文件,修改其内容,因版权原因,具体的修改内容在此就不放了,请去原文章复制,将index.js的内容全部替换即可。

    3. 修改 .yml文件内容

    在Hexo根目录下打开_config.yml文件,修改post_asset_folder:值为ture,效果如下:

    $ post_asset_folder: true
    

    这时,当你使用

    $ hexo new “filename”
    

    新建一个 .md文件时,同时会在-post文件夹下将出现一个与新建的 .md文件同名的文件夹,把你需要插入的图片放到这个文件夹中即可。

    4. 正确的图片插入命令

    本人使用的是Typora的编辑器编写.md文件,当你使用使用相对路径的常规 Markdown 语法 ![](/imgName.jpg)时,虽然他能在你本地的编辑器上正确显示,但是当你部署到GitHub时会依旧不显示,正确的引用语法为

    $ {% asset_img Name.jpg 文章中显示的图片名%}
    

    jpg 后面空格可以直接写上你想要这张图片在文章中显示的名字,虽然在你本地的编辑器上不会正确显示,但是部署后会在网页文章中正确显示。

    效果如下图:
    Typora编辑时的显示


    Chrome浏览器打开时的显示


    以上步骤完成以后即可插入本地图片后,再部署到GitHub即可正常显示图片。

  • 相关阅读:
    jQuery5事件相关
    jQuery4操作表单+属性+样式
    ueditor不能上传mp4格式的视频--解决方案
    笔记本怎么设置WIfi热点
    em rem vw vh
    字体的使用,坑爹啊!
    font的使用
    photoshop简单切图
    HTTP的学习
    call apply bind的联系与区别
  • 原文地址:https://www.cnblogs.com/juyss/p/13099426.html
Copyright © 2011-2022 走看看