添加到 Jekyll 社交分享按钮

Question

我对 Jekyll 还很陌生，但我正在尝试在其基础上建立自己的技术博客。我想为每个 post 添加一个包含按钮（图标）列表的页脚，以将文章分享到社交网络。在寻找解决方案时，我发现此类按钮是使用 SVG 图像.

实现的

因此，在 post.html 文件中，我添加了一个包含到 share.html 文件的内容，用于引用这些 共享按钮 。

问题是：我应该把 SVG 图标放在哪里？我在网上看到很多 jekyll 博客的文件系统中根本没有 SVG 文件，这到底是怎么回事？

已编辑 我知道可以使用 svg 标签内嵌 svg 图标。但这不是我的意思。我 post 这里是我找到的一个例子

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

我在所有 Git 存储库中搜索了 icon-twitter class，但我没有在任何地方找到它。

Answer 1

在基本的 jekyll 安装中，社交图标是内联 svg。看看 _includes/footer.html.

Answer 2

I am asking which are the best practices to view SVG icons

每个图标都有实际的 .svg 图像文件吗？

如果是，就像对待任何其他图像文件一样对待它们 (.jpg, .png, whatever).
将它们放入您选择的文件夹中 （例如 /images） 并使用 <img> 标签显示它们：

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

或者，如果您使用的是 Markdown：

![alt text](/images/icon.svg)

Answer 3

我终于找到了问题的答案。互联网上有一些很酷的网站，让您有机会 link 他们的 SVG 图标，托管在一些 CDN 上。

例如，看看 Font Awsome. As stated in the Get Started 部分，您可以 link 他们在您站点中的资源：

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

我已将 link 指令放入 head.html 文件中。然后您可以使用一些 CSS 和 <i> 元素将他们的 awsome svg 图标之一添加到您的站点，如下所示：

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

此说明添加了一个 Whosebug 徽标图标，您可以根据需要设置样式。

添加到 Jekyll 社交分享按钮

Add to Jekyll social share buttons

javascript

svg

jekyll

share-button