zoukankan      html  css  js  c++  java
  • Hexo博客插入图片的方法

    Hexo博客插入图片的方法

    hexo blog 插入图片的方法总结

    hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /public 文件夹中, 所以我们使用相对路径的引用可能导致问题, 总结了一下常用的引用图片的几种方式,记录一下,避免再次忘记

    1. 绝对引用: 使用 /source/images 文件夹
    2. 相对引用: 使用 post_asset_folder:true 建立文章同名文件夹
    3. CDN 或者图床引用

    1. 绝对引用

    少量使用图片的时候使用, 将文件放在 /source/images 文件夹下, 使用 markdown 语法 ![Lena](/images/lena.png) 可以实现图片显示, 但是这种引用在本地markdown 编辑器中会无法预览,因为相对路径不一致,找不到文件, 不过在首页内容和文章正文中都能正常显示,十分方便

    Lena
    Lena

    个人使用的方法就是这种, 由于自己很少插入图片, 但是存在一个问题,后续可能维护起来麻烦, 不知道哪里引用了哪个图片,导致文章删除但是图片仍在, 很麻烦

    2. 相对引用

    在站点配置文件*/_config.yml* 中配置指令 post_asset_folder: true 这样在每次新建文章的时候就会建立同名文件夹, 直接将相应的文章图片放在文件夹内 使用 语法 ![Lena](Hexo博客插入图片的方法/lena.png) 可以访问同名文件夹下图片资源,十分方便

    Lena
    Lena

    3. 在线资源

    在线图片

    如果我们要的图片现在网络上已经存在了,我们找到相应的地址直接引用就好
    可以只用标准markdown 图片语法引用相关图片 ![百度图片--lena](http://images2018.cnblogs.com/blog/1003156/201806/1003156-20180604175546711-227291592.png)

    例如

    百度图片
    百度图片--lena

    CSDN 图片
    CSDN--lena

    博客园图片
    cnblogs--lena

    维基百科图片
    wikipedia--lena

    自己做的图

    如果我们要的图只是我们自己画出来的图,或者生成的图,可以使用在线图床上传之后得到链接使用,

    个人感觉最好用的图床是 sm.ms, 点击上传之后可以得到各种链接,十分方便, 最终给出的链接比如 https://i.loli.net/2019/11/09/KDut86ljxM9TXnP.png 的形式

    刚刚上传了代码的一段截图 得到链接在这里测试使用

    39-53 行内容截图
    39-53 行内容截图

    图像样式自定义

    对于markdown 插入的图片,可能不是很满足自己的需求,需要进行一定的图片调整,比如图片居中或者图片大小控制 相应的各家markdown 的编辑器有自己的实现规则,但是在hexo blog 中我们对于图片的处理一般是转为直接 做html 处理, 比如

    1. 使用img 标记来控制图片显示大小
      图片大小控制
      <img src="/images/lena.png" width="50%" height="50%">
    1. 使用div 加上css 来控制图片的显示和大小
      <div style=" 200px; margin: auto">![Lena](/images/lena.png)</div>
    ![Lena](/images/lena.png)
    1. Hexo 中扩展 Markdown 语法设置图片的大小 blog 中自己写了一个控制显示的方法,可以参考

    更多

    个人目前使用的方法1
    但是后续可能要换成方法2 更加方便管理图片以及后续可能的迁移过程, 希望对看到的你们有一点帮助.

    参考链接

    1. 在Hexo博客中插入图片的各种方式
    2. Hexo博客搭建之在文章中插入图片
    3. hexo博客图片问题
    4. Hexo插入图片和设置图片大小
    5. Hexo 中扩展 Markdown 语法设置图片的大小
  • 相关阅读:
    Maven 打war包
    linuxan安装redis出现Newer version of jemalloc required错误
    Linux常用命令
    Linux重启和关机命令
    CentOS 端口和防火墙操作
    修改root密码
    Web登录验证之 Shiro
    No WebApplicationContext found: no ContextLoaderListener registered
    java写文件实现换行
    gcc命令详解
  • 原文地址:https://www.cnblogs.com/hugochen1024/p/12570656.html
Copyright © 2011-2022 走看看