Встраивание изображений в репозиторий GitHub wiki (gollum)?


87

Вики-сайты Github поддерживаются отдельным репозиторием git, а затем основным репозиторием проекта.

В этом сообщении команды Github звучит так, будто вы должны иметь возможность ссылаться на изображения, хранящиеся в репозитории вики, внутри разметки вики.

Изображения и папки

Теперь вы можете ссылаться на изображения, размещенные в репозитории Git.

Я проверил репозиторий своей вики и вставил в него папку ресурсов и изображение. У меня вопрос, как мне использовать это изображение ?

Возможно ли это вообще, или я что-то неправильно понял?


Есть github-faq о добавлении-изображений-в-вики, но в нем нет информации о коротких относительных URL-адресах изображений, обсуждаемых здесь
k3b

Ответы:


57

Чтобы использовать относительные пути:

[[foo.jpg]]

Для получения дополнительной информации см . Страницу демонстрационной вики с изображениями .


Это предпочтительнее, чем жесткое программирование пути. Единственное, чего я не мог понять, это как создать замещающий текст с помощью этого метода. Да, и изображения в этой демонстрации мне не загружаются.
Джеймс МакМахон

Если вы клонируете git: //github.com/mojombo/gollum-demo.git, а затем запустите gollum, вы увидите их. :)
Бенджамин Оукс

4
Возможно, мне что-то не хватает ... но [[wiki syntax]]работы в этой вики, с которыми я помогаю: github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 Возможно, вы пытаетесь это сделать с помощью README?
Бенджамин Оукс,

2
Синтаксис вики определяется расширением файла. .wikiиспользует стиль mediawiki. .mdиспользует стиль уценки (ответ RyanQ).
Дрю Ноукс

3
Этот ответ больше не работает, см. Ответ @ Werner ниже (вкратце, используйте! [Text] (images / someimage.png) и сохраните - не будет отображаться в предварительном просмотре)
edmofro

97

Для зрителей, желающих просматривать изображения на вики-сайте github, я обнаружил, что работает следующий метод:

  • Перейдите на вкладку «Git Access» на вики-странице вашего репозитория и получите путь SSH, который должен выглядеть примерно так: git@github.com: USER / REPO.wiki.git, где USER - это имя вашей учетной записи, а REPO - это имя вашей учетной записи. имя репозитория.
  • На вашем локальном компьютере используйте любой инструмент командной строки Git, который вы хотите перенести в свой локальный каталог по выбору, и получите репозиторий через

    git clone git@github.com: ПОЛЬЗОВАТЕЛЬ / REPO.wiki.git

  • Теперь в этом репозитории создайте каталог изображений, я назову его «изображениями» и помещу в него любые изображения, которые вы хотите.

  • А затем переместите свой каталог git вики на github
  • Вы не сможете физически увидеть изображения, скажем, на вкладке «Страницы», но если вы просто сделаете ссылку на изображения в локальной ссылке, вы сможете их увидеть. Пример с Markdown ниже:

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

  • Вы также можете встроить изображение как ссылку, обернув его так:

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

Вы также можете добавить подкаталоги в свою локальную копию, чтобы упорядочить вики, поскольку вкладка «страницы» просто перечисляет их. Однако имейте в виду, что даже когда новый каталог перемещается, на вкладке «страницы» каталог не отображается.


31

Ни один из ответов не работает при добавлении изображения readme.md. Но у меня есть решение:

Если URL-адрес изображения:

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

Теперь вы должны встроить изображение, используя обычную уценку:

![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


Замечательно ... это позволило мне разместить ссылку на изображение прямо в комментарии GitHub. :) github.com/mccalltd/AttributeRouting/issues/…
Leniel Maccaferri 03

1
у меня сработало спасибо. жаль, что он не работает с относительными путями
Элвис Чиотти

26

Относительный путь для меня работает так:

домашняя страница вики:

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

дополнительная страница вики:

![text](images/someimage.png)

Обратите внимание, что при предварительном просмотре изображение не отображается, я сохранил его.


3
Этот совет от @Werner очень важен. (Большое вам спасибо!) По какой-то причине домашняя страница вашей вики отличается от всех остальных, поэтому на домашней странице вам нужен wiki / path / foo.ext, где все остальные страницы используют path / foo.ext . Относительные ссылки на ваше собственное репо намного лучше, чем абсолютные ссылки. Если вы переместите, клонируете свой проект или измените его в автономном режиме, все будет работать независимо от того, где находится репо. Также обратите внимание, что этот синтаксис! [Текст] (ссылка) подходит для большинства целей, но если вам нужно выровнять изображение, вы должны использовать стандартный тег HTML IMG.
TonyG

Кажется, это более актуальный ответ
albfan

Какая здесь ветка?
Джонни

15

Если вы хотите быстро загрузить изображение с помощью перетаскивания, вы можете выполнить следующее (хоть и хакерское):

Создайте фиктивную задачу; перетащите туда свое изображение; скопируйте / вставьте загруженный код изображения уценки в свою вики;

Создав проблему один раз, вы можете использовать ее для этого любое количество раз.

Надеюсь, это поможет любому, кто ищет быстрое исправление, без необходимости хранить изображение в репозитории.


8

Вот практический способ сделать это:

  • Перейти к любому вопросу на github
  • В разделе комментариев вы можете прикреплять файлы, просто перетащив их, выберите или вставьте свое изображение.
  • Скопируйте код / ​​ссылку, отображаемую в текстовом поле
  • Вставьте это в вики
  • Прибыль!

Вам даже не нужно создавать или изменять какую-либо проблему по сравнению с решением @tiby!


2
Спасибо! Интересно, почему github не поддерживает эту функцию на своих вики-сайтах.
Sven

6

Догадаться.

URL-адрес отформатирован следующим образом

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

pathtoimage необязательно


3
Это работает, но тесно связано с тем, как GitHub хранит файлы. Если они изменят свой путь, это сломается. Он также может сломаться при локальном запуске вики через gollum.
Бенджамин Оукс


2

Наконец, получил изображения в репозиторий, используя метод, описанный nerdwin, и заставил их отображать в вики, используя ![test](test.jpg)


1

Следующая уценка будет ссылаться на изображении в GitHub репо из вашей соответствующего GitHub вики

![My Alt Text](../blob/master/Path/ToAsset/In/Repo.png?raw=true)

В приведенном выше примере предполагается, что в вашем репо есть следующая файловая структура

  • Путь
    • ToAssets
      • В
        • Repo.png

Для реального примера, если бы я хотел сослаться на это изображение в github из соответствующей вики, я бы использовал эту уценку

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

Предостережения

  1. Дело имеет значение
  2. Если вы находитесь на специальной домашней странице вики, вам не нужно подниматься на уровень выше ../ В моем примере выше правильная ссылка будет

Для домашней страницы:

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

Дело имеет значение. Repo.png - это не то же самое, что repo.png
Джош

Если вы находитесь на домашней странице вики, это немного изменится. Вам нужно сбросить ../. Ссылка будет (blob / master / Path / ToAsset / In / Repo.png? Raw = true)
Джош

Имеет ли значение ветвь размещенного изображения?
Джонни

Я не пробовал, но, глядя на URL-адреса в моем примере, думаю, что да. В моих примерах я предполагаю, что все в мастер. Предположительно, вы могли бы просто заменить слово «master» в моем примере на любую ветку, в которой находится изображение.
Джош

1

Используйте относительный путь

Вики находится по адресу [repositoryname]/wiki

Файлы в репозитории расположены по адресу [repositoryname]/raw/master/[file path in repository]

Так что просто используйте относительный путь: ../raw/master/[file path in repository]


Мне пришлось сделать ../../на подстранице, так что будьте осторожны, это относительно текущего пути к странице
tutuDajuju

Если у вас нет ветки с именем master?
Джонни

1

Я помещаю в свои вики и изображения, и PDF-файлы. Я клонирую вики и добавляюimages и в filesкаталог, а затем с помощью следующей уценки , чтобы вставлять графические ссылки и ссылки Добавить файл:

Картинки:

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

Начальная косая черта не нужна, если все ваши вики-страницы находятся на корневом уровне, но я использую подкаталоги, и абсолютный путь разрешается правильно и упрощает работу.

Файлы:

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

Обратите внимание, в вики нет ведущей косой черты files в этом формате пути чтобы правильно преобразовать его в ссылку.

Я задокументировал это более подробно в GitHub gist


0

Чтобы встроить эскиз внешнего изображения, используйте следующее: ![Image](<external link to the image>)


0

Комментарий @ Drew Noakes к исходному вопросу сделал это для меня:

Синтаксис изображения, которое я хотел отобразить:

[[/images/imageName.png]]

Это изображение отображалось только при переименовании:

wikiPage.md --> wikiPage.wiki

В вики-репозитории использовалась следующая структура папок:

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

НО:

Синтаксис в .wiki отличается от .md файлов.


0

Многие ответы не сработали для меня, вот что в итоге сработало:

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

Использование режима редактора «Markdown» и подстраницы, например:

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

-Джон

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.