V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
proxytoworld
V2EX  ›  问与答

大家写 hugo 的 markdown,图片插入的路径怎么方便的解决的呢

  •  
  •   proxytoworld · May 25, 2022 · 4792 views
    This topic created in 1439 days ago, the information mentioned may be changed or developed.

    之前用 hugo 写博客,因为 hugo 定义的根目录在 conten 下,所有图片都要放在 content 下,并且在 markdown 里面引用也要以相对 content 的路径引用,导致普通的编辑器没办法识别到和渲染 hugo 的 markdown 图片,并不知道当前插入图片的效果,大家都是用啥解决的呢

    起一个 hugo server 倒是一个解决办法,但更好的是在编辑器里面就可以渲染好,所见即所得,所以 hugo server 是最后没办法的办法。

    另外 typora 好像收费了,有点难受

    13 replies    2024-03-17 21:57:59 +08:00
    xzh20121116g
        1
    xzh20121116g  
       May 25, 2022
    typora+picgo+阿里云 oss
    typora 目前还提供老版本下载
    dreamworldcn
        2
    dreamworldcn  
       May 25, 2022   ❤️ 2
    可以让 hugo 处理相对路径引用,参考 https://github.com/zoni/obsidian-export#relative-links-with-hugo

    这样自由使用 markdown 编辑器预览
    jdhao
        3
    jdhao  
       May 25, 2022 via Android
    都是直接用图床,所以没有这个烦恼。。或者你直接完整路径不行吗
    mingqi
        4
    mingqi  
       May 25, 2022
    我刚换的阿里云的 oss ,量不大的话也很便宜
    root01
        5
    root01  
       May 25, 2022   ❤️ 1
    树状结构:
    xxxname 目录:
    --->index.md
    --->1.png
    --->2.png
    插入图片语法: ![1](1.png) 或者![img](1.png) 看你习惯
    xxxname 目录:
    --->index.md
    --->img/1.png ##img 为目录名
    --->img/2.png

    插入图片语法: ![1](img/1.png) 或者![img](1.png) 看你习惯
    SenLief
        6
    SenLief  
       May 25, 2022
    我记得 vscode 可以识别相对路径啊。
    rayhy
        7
    rayhy  
       May 25, 2022   ❤️ 2
    写文章的时候用文件夹,而不是单个 md 文件。即从 post1.md 换成 post1/index.md ,然后在 post1/文件夹下放你的图片。然后用相对路径引用。这样无论是 github ,还是 hugo ,还是 vscode ,全部都能正常显示。

    通过这样整理路径,也同时方便了你切换图床。在 hugo 的主题里加一个`render-image.html`,就能控制 hugo 渲染图片的输出,可以在这个文件里面把图片路径换成类似于`https://<CDN 地址>/blog/20190315-175 天 /浙大鸡.png`这样的东西。

    具体细节可以参考下我的一篇博客: https://wrong.wang/blog/20190301-%E6%9C%AC%E7%AB%99%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87%E7%9A%84%E9%A1%BA%E6%BB%91%E6%B5%81%E7%A8%8B/
    ghouleztt
        8
    ghouleztt  
       May 25, 2022 via iPhone
    我是 typora+sharex+imgur
    dcsuibian
        9
    dcsuibian  
       May 25, 2022
    阿里云 OSS 啊
    yzbythesea
        10
    yzbythesea  
       May 25, 2022
    放 statics 里啊
    lingxiaoli
        11
    lingxiaoli  
       May 25, 2022
    放到项目的 static 文件夹中 然后写路径的时候直接 /(static 文件夹下创建的文件夹或文件名字)
    proxytoworld
        12
    proxytoworld  
    OP
       May 25, 2022
    @lingxiaoli
    @yzbythesea

    放 static 文件夹 也可以 就是想让 markdown 编辑器能够直接渲染图片
    churchmice
        13
    churchmice  
       Mar 17, 2024
    我现在的方法是放到同级目录下面,结构类似下面这样,可以通过配置 obsidian 让复制黏贴的图片放在当前文档的目录下面
    ├── life-goal
    │   ├── Pasted image 20240317215256.png
    │   └── index.md

    接着弄个 render-image.html
    https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html

    这样在 obsidian 和网站上都可以看
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2377 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 55ms · UTC 10:55 · PVG 18:55 · LAX 03:55 · JFK 06:55
    ♥ Do have faith in what you're doing.