【问题标题】:Embedding images inside a GitHub wiki (gollum) repository?在 GitHub wiki (gollum) 存储库中嵌入图像?
【发布时间】:2012-04-20 04:35:45
【问题描述】:

Github wiki 由一个单独的 git 存储库支持,然后是主项目存储库。

Github 团队的This post 听起来您应该能够在 wiki 标记内链接到存储在 wiki 存储库中的图像。

图像和文件夹

您现在可以引用托管在 Git 存储库中的图像。

我检查了我的 wiki 存储库并将资源文件夹和图像推入其中。我的问题是,我该如何使用这张图片

这是可能的还是我误解了什么?

【问题讨论】:

  • 有一个关于 adding-images-to-wikis 的 github-faq 但它没有关于这里讨论的短相对图像 url 的信息
  • 典型的图片url使用Camo呈现。

标签: github wiki gollum-wiki


【解决方案1】:

对于希望在 github wiki 上查看图像的查看者,我发现以下方法可行:

  • 转到存储库的 wiki 页面内的“Git Access”选项卡并检索 SSH 路径,该路径应类似于:git@github.com:USER/REPO.wiki.git 其中 USER 是您的帐户名和REPO 是存储库名称。
  • 在您的本地机器上,使用您希望 cd 进入您选择的本地目录并通过

    获取存储库的任何 Git 命令行工具

    git clone git@github.com:USER/REPO.wiki.git

  • 现在在此存储库中创建一个图像目录,我将其命名为“图像”并将您想要的任何图像放入目录中

  • 然后将你的wiki git目录推送到github
  • 您将无法实际看到“页面”选项卡中的图像,但如果您只是在本地链接中引用图像,您应该能够看到它们。以下是 Markdown 示例:

    ![Alt attribute text Here](images/YOURIMAGE.ext)

  • 您也可以像这样进一步包装图片,将图片作为链接本身嵌入:

    [![Alt attribute text Here](images/YOURIMAGE.ext)](http://Yoursite.com)

您还可以在本地副本中添加子目录来帮助组织 wiki,因为“页面”选项卡只是将它们列出来。但是请记住,即使推送了新目录,“页面”选项卡也不会列出该目录。

【讨论】:

  • 这是一篇文章,解释了@urig 建议的解决方案。超酷。 mikehadlow.blogspot.com/2014/03/…
  • @ElMatador 答案由 Ryan Q 发布。我只对其进行了小幅编辑。 :)
【解决方案2】:

要使用相对路径:

[[foo.jpg]]

有关详细信息,请参阅demo wiki's page on images

【讨论】:

  • 这比硬编码路径更可取。我唯一想不通的是如何使用这种方法创建替代文本。哦,那个演示中的图像不适合我。
  • 如果你克隆 git://github.com/mojombo/gollum-demo.git 然后运行gollum,你会看到它们。 :)
  • 也许我遗漏了一些东西......但是[[wiki syntax]] 在我帮助的这个 wiki 中工作:github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 也许你正在尝试使用自述文件?
  • wiki 语法由文件扩展名决定。 .wiki 使用 mediawiki 风格。 .md 使用降价样式(RyanQ 的回答)。
  • 此答案不再有效,请参阅下面的@Werner 答案(简而言之,使用 ![text](images/someimage.png) 并保存 - 不会在预览中显示)
【解决方案3】:

readme.md 中添加图像时,似乎没有任何答案有效。不过我有一个解决方案:

如果图片的网址是:

https://github.com/Username/Repository-Name/blob/master/Directory-Inside-Repository/image.png

blob 替换为 raw 会为您提供原始图像的 URL:

https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png

现在,您可以使用普通的 markdown 嵌入图像:

![Image Alt](https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png)

更新:截至目前,GitHub 还提供来自不同子域 raw.github.com 的原始图像。所以,你也可以使用:

https://raw.github.com/Username/Repository-Name/master/Directory-Inside-Repository/image.png

示例: https://raw.github.com/Automattic/liveblog/master/screenshot-1.png

【讨论】:

【解决方案4】:

相对路径对我来说是这样的:

维基主页:

![text](wiki/images/someimage.png)

wiki 的子页面:

![text](images/someimage.png)

请注意,预览时图像不会显示,我已经保存了它。

【讨论】:

  • @Werner 的这个提示非常重要。 (非常感谢!)由于某种原因,您的 wiki 主页与所有其他主页不同,因此在主页上您需要 wiki/path/foo.ext,而所有其他页面都使用 path/foo.ext。返回到您自己的 repo 的相对引用比绝对引用要好得多。如果您移动或克隆您的项目,或者离线修改它,无论存储库在哪里,一切仍然有效。另请注意,这种 ![text](link) 语法适用于大多数用途,但如果您需要对齐图像,则必须使用标准 HTML IMG 标记。
  • 似乎这是最新的答案
  • 这里的分支是什么?
  • 请注意,在进行预览时图像不会显示,我已将其保存。对于我们这些选择不记住它的人来说,这仍然是一个非常方便的提示。
【解决方案5】:

如果您想通过拖放快速上传图片,您可以执行以下操作(虽然有点骇人听闻):

创建一个虚拟问题;将您的图像拖放到那里;将上传的 Markdown 图像代码复制/粘贴到您的 wiki;

创建问题一次后,您可以多次使用它来执行此操作。

希望这可以帮助任何寻求快速修复的人,而无需将图像驻留在存储库中。

【讨论】:

    【解决方案6】:

    这是一个实用的方法:

    • 转到 github 上的任何问题
    • 在评论部分您可以附加文件,只需拖放、选择或粘贴您的图片
    • 复制文本区域中显示的代码/链接
    • 将其粘贴到 wiki 中
    • 利润!

    与@tiby 解决方案相比,您甚至不必创建或修改任何问题!

    【讨论】:

    • 谢谢!我想知道为什么 github 在他们的 wiki 站点上不支持这个功能。
    【解决方案7】:

    想通了。

    url格式如下

    https://raw.github.com/wiki/username/project/pathtoimage/imagename.extension

    pathtoimage 是可选的

    【讨论】:

    • 这可行,但与 GitHub 存储文件的方式紧密相关。如果他们改变他们的路径,它就会中断。通过 gollum 在本地运行 wiki 时也会中断。
    【解决方案8】:

    James 的 URL 格式对我不起作用,也许它已被更改。我用过:

    https://github.com/username/project/wiki/pathtoimage/image.extension

    pathtoimage 是可选的。

    【讨论】:

    • @JonathanLeung 它只是一个链接的语法示例,它实际上并没有去任何地方
    【解决方案9】:

    最终使用nerdwin描述的方法将图像放入存储库并使用![test](test.jpg)将它们显示在wiki中

    【讨论】:

      【解决方案10】:

      以下降价将从相应的 GitHub wiki

      中引用 GitHub repo 中的图像
      ![My Alt Text](../blob/master/Path/ToAsset/In/Repo.png?raw=true)
      

      上面的例子假设你的 repo 中有以下文件结构

      • 路径
        • 到资产
            • 回购.png

      对于一个真实世界的例子,如果我想从相应的 wiki 引用 github 中的 this image,我会使用这个 markdown

      ![Azure App Settings](../blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)
      

      注意事项

      1. 案件很重要
      2. 如果您在 wiki 的特殊主页上,则无需使用 ../ 在上面的示例中上一级,正确的链接应该是

      对于主页:

      ![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)
      

      【讨论】:

      • 案件很重要。 repo.png 与 repo.png 不同
      • 如果您在 wiki 的主页上,这会略有变化。您需要删除 ../.该链接将是 (blob/master/Path/ToAsset/In/Repo.png?raw=true)
      • 托管图像的分支重要吗?
      • 我没有尝试过,但是通过查看示例中的 URL,我相信它会。在我的示例中,我假设一切都在 master 中。您大概可以将示例中的“master”一词更改为图像所在的任何分支。
      【解决方案11】:

      使用相对路径

      Wiki 位于[repositoryname]/wiki

      存储库中的文件位于[repositoryname]/raw/master/[file path in repository]

      所以只需使用相对路径:../raw/master/[file path in repository]

      【讨论】:

      • 我必须在子页面中使用../../,所以要注意它是相对于当前页面路径的
      • 如果你没有名为 master 的分支?
      【解决方案12】:

      我将图像和 PDF 都放在我的 wiki 中。我克隆了wiki并添加了imagesfiles目录,然后使用以下markdown嵌入图片链接并添加文件链接:

      图片:

      [[/images/path/to/image.ext|ALT TEXT]]
      

      如果您的 wiki 页面都位于根级别,则不需要前导斜杠,但我使用子目录并且绝对路径可以正确解析并保持简单。

      文件:

      [link text](files/path/to/file.ext "ALT TEXT")
      

      注意,wiki files 路径没有前导斜杠以正确解析为这种格式的链接。

      我在GitHub gist 中详细记录了这一点

      【讨论】:

        【解决方案13】:

        要嵌入外部图像缩略图,请使用以下命令, ![Image](<external link to the image>)

        【讨论】:

          【解决方案14】:

          @Drew Noakes 对原始问题的评论对我有用:

          我想要显示的图像的语法:

          [[/images/imageName.png]]
          

          此图片仅在重命名时显示:

          wikiPage.md --> wikiPage.wiki
          

          wiki 存储库中使用了以下文件夹结构:

          repository.wiki
             |--wikiPage.wiki
             |--images
                  |--imageName.png       
          

          但是:

          .wiki 中的语法与 .md 文件不同。

          【讨论】:

            【解决方案15】:

            许多答案对我不起作用,这就是最终起作用的方法:

            ![](../raw/master/Images/ImportantImage.png)
            

            使用“Markdown”编辑器模式和子页面如:

            https://github.com/project/repo/wiki/MyPage
            

            【讨论】:

              猜你喜欢
              • 2016-07-23
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2010-11-13
              • 2016-11-23
              • 2019-06-21
              • 2012-10-14
              相关资源
              最近更新 更多