2015-04-16 3 views
2

Я довольно новичок в Jekyll, но я пытаюсь создать свой собственный технический блог. Я хочу добавить к каждому сообщению нижний колонтитул, содержащий список кнопок (значков), чтобы делиться в социальных сетях статьей. Поиск вокруг решения, я видел, что такие кнопки реализованы с использованием изображений SVG.Добавить в Jekyll кнопки для социальных сетей

Таким образом, внутри файла post.html, я добавил включают в share.html файл, в котором для обозначения этих кнопок акций.

Проблема в том, где я должен поставить значки SVG? Я видел через Интернет, что во многих файловых системах jekyll blogs нет файла SVG вообще. Что, черт возьми, происходит?

EDITED Я знаю, что можно встраивать иконку SVG с помощью svg тега. Но это не то, что я имел в виду. Я отправляю здесь пример, который я нашел

<a href="https://twitter.com/share?url={{ site.url }}{{ page.url }}&amp;text={{ page.title | cgi_escape }}" 
    title="Share on Twitter" class="button"> 
     <span class="count count-twitter">0</span> 
      <i class="icon icon-twitter notranslate" aria-hidden="true"></i> 
</a> 

Я искал icon-twitter класса во все хранилище Git, но я не считаю, что в любом месте.

+0

Возможно, я ошибаюсь, но вы просто спрашиваете, как отображать файлы '.svg' в Jekyll? –

+0

Я спрашиваю, какие из лучших практик для просмотра значков SVG. Я не могу понять то, что я дал в качестве примера. –

ответ

1

Наконец я Я нашел ответ на мой вопрос. В Интернете есть несколько интересных сайтов, которые дают вам возможность связать свои значки SVG, размещенные на каком-то CDN.

Например, взгляните на Font Awsome. Как указано в разделе Get Started, вы можете связать свои ресурсы на вашем сайте:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

Я поставил link команду в файл head.html. Затем вы можете добавить один из их AWSOME значок SVG на свой сайт, используя некоторые CSS и <i> элемент, например:

<i class="fa fa-stack-overflow"></i> 

Эта команда добавляет значок в stackoverflow логотип, который вы можете стиле, как вы хотите.

3

В базовой установке jekyll социальные иконки являются встроенными svg. Посмотрите на _includes/footer.html.

+0

Спасибо за ответ. Я обновил свой вопрос, добавив некоторые недостающие детали. –

+0

Я отправляю мертвую ссылку. –

1

Я спрашиваю, какие самые лучшие методы для просмотра SVG иконки

У вас есть каждый значок в качестве фактического .svg файла изображения?

Если да, просто относиться к ним так же, как и любой другой файл изображения (.jpg, .png, любой другой).
Поместите их в папку по вашему выбору (например /images) и использовать <img> тег, чтобы показать им:

<img src="/images/icon.svg" /> 

Или, если вы используете Markdown:

![alt text](/images/icon.svg) 
Смежные вопросы