Prowadzę bloga Jekyll na Github i piszę posty z Markdown. Dodając obrazy, robię to w następujący sposób:
![name of the image](http://link.com/image.jpg)
To pokazuje obraz w tekście.
Jak jednak mogę powiedzieć Markdown, aby dodał podpis, który jest przedstawiony poniżej lub powyżej obrazu?
site_root
nie jest akceptowana jako prawidłowa zmienna. Po renderowaniu kończy się jakosrc="{{ site.url_root }}...
.site.url
zmienną.<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
include image.html
? Próbuję z czymś takim,{% for image in page.images %}
ale bez sukcesu. Możesz mi pomóc?Wiem, że to stare pytanie, ale pomyślałem, że nadal podzielę się moją metodą dodawania podpisów do zdjęć. Nie będziesz mógł używać tagów
caption
lubfigcaption
, ale byłaby to prosta alternatywa bez użycia jakichkolwiek wtyczek.W swoim przecenie możesz zawinąć podpis w znacznik wyróżnienia i umieścić go bezpośrednio pod obrazem bez wstawiania nowego wiersza, jak na przykład:
Spowoduje to wygenerowanie następującego kodu HTML:
Następnie w swoim CSS możesz stylizować go za pomocą następującego selektora bez zakłócania innych
em
tagów na stronie:Zauważ, że nie możesz mieć pustej linii między obrazem a podpisem, ponieważ zamiast tego wygenerowałoby:
Możesz także użyć dowolnego tagu innego niż
em
. Po prostu upewnij się, że jest tag, w przeciwnym razie nie będziesz w stanie go stylizować.źródło
<link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">
więc po prostu dodaję własną definicję CSS na dole tego pliku:// My custom css img + em { display: block; text-align: center; } //image captions
Możesz do tego użyć tabeli. To działa dobrze.
Wynik:
źródło
Prawidłowe HTML do wykorzystania w przypadku zdjęć z podpisami, jest
<figure>
z<figcaption>
.Nie ma odpowiednika w Markdown, więc jeśli dodajesz tylko sporadyczny podpis, zachęcam Cię do dodania tego kodu HTML do dokumentu Markdown:
Specyfikacja Markdown zachęca do osadzania kodu HTML w takich przypadkach, aby wyświetlał się dobrze. Jest to również o wiele prostsze niż majstrowanie przy wtyczkach.
Jeśli próbujesz używać innych funkcji Markdown-y (takich jak tabele, gwiazdki itp.) Do tworzenia napisów, to po prostu hakujesz, w jaki sposób miał być używany Markdown.
źródło
Niewielki riff na górze głosował odpowiedź, którą uważam za nieco bardziej wyraźną, to użycie składni jekyll do dodania klasy do czegoś, a następnie stylowanie tego w ten sposób.
Więc w poście miałbyś:
A potem w swoim pliku CSS możesz zrobić coś takiego:
Wygląda dobrze!
źródło
Istnieją dwa poprawne semantycznie rozwiązania tego pytania:
1. Korzystanie z wtyczki
Wypróbowałem kilka wtyczek, które to robią, a moim ulubionym jest
jekyll-figure
.1.1. zainstalować
jekyll-figure
Jednym ze sposobów instalacji
jekyll-figure
jest dodaniegem "jekyll-figure"
do pliku Gemfile w grupie wtyczek.Następnie uruchom
bundle install
z okna terminala.1.2. Posługiwać się
jekyll-figure
Po prostu zawiń przecenę
{% figure %}
i{% endfigure %}
oznacz.Twój podpis pojawia się w otwierającym
{% figure %}
tagu, a nawet możesz go stylizować za pomocą przeceny!Przykład:
1.3. Styl to
Teraz, gdy twoje obrazy i podpisy są semantycznie poprawne, możesz zastosować CSS, jak chcesz:
figure
(dla obrazu i podpisu)figure img
(tylko dla obrazu)figcaption
(tylko do podpisów)2. Tworzenie dołączenia niestandardowego
Musisz utworzyć
image.html
plik w swoim_includes
folderze i dołączyć go za pomocą Liquid w Markdown .2.1. Utwórz _includes / image.html
Utwórz
image.html
dokument w swoim folderze _includes:2.2. W Markdown dołącz obraz za pomocą Liquid
Obraz
/assets/images
z podpisem:Obraz (zewnętrzny) używający bezwzględnego adresu URL: (zmień
src=""
nasrcabs=""
)Klikalny obraz: (dodaj
url=""
argument)Obraz bez podpisu:
2.3. Styl to
Teraz, gdy twoje obrazy i podpisy są semantycznie poprawne, możesz zastosować CSS, jak chcesz:
figure
(dla obrazu i podpisu)figure img
(tylko dla obrazu)figcaption
(tylko do podpisów)źródło
Możesz spróbować użyć
pandoc
jako konwertera. Oto wtyczka jekyll do zaimplementowania tego. Pandoc będzie mógł automatycznie dodać podpis do figury taki sam jak twójalt
atrybut.Ale musisz wypchnąć skompilowaną witrynę, ponieważ github nie zezwala na wtyczki na stronach Github ze względów bezpieczeństwa.
źródło
Odpowiedź Andrew @ andrew-wei działa świetnie. Możesz także połączyć kilka ze sobą, w zależności od tego, co próbujesz zrobić. Na przykład otrzymujesz obraz z alt, tytułem i podpisem z podziałem wiersza oraz pogrubieniem i kursywą w różnych częściach podpisu:
Z następującą
<img>
przeceną:źródło
To jest podstawowe użycie napisów. Nie ma potrzeby używania dodatkowej wtyczki.
źródło
Oto najprostsze (ale nie najładniejsze) rozwiązanie: ułóż tabelę wokół całości. Istnieją oczywiście problemy ze skalowaniem i dlatego podaję mój przykład z HTML, abyś mógł łatwo zmodyfikować rozmiar obrazu. To zadziałało dla mnie.
źródło