Question

我使用realfavicongenerator.net生成favicon.ico以及当今所需的所有其他文件。这是a lot of files（超过10个），当它们为recommend时，我将其保留在站点根目录中。这看起来很杂乱，使查看重要内容（例如我的配置文件）的速度变慢。

我想做的就是将它们全部保留在_favicon子文件夹中，但是有一个Jekyll配置选项，可以在发布时将子文件夹的内容复制到_site的根目录中。有一个选项可以做到这一点吗？

Answer 1

我使用了类似的favicon生成器，但是将生成的文件放在子文件夹中以保持干净，然后用部分{% include favicons.html %}和includes/favicons.html加载它们：

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{ 'assets/favicons/apple-touch-icon-57x57.png' | absolute_url }}" />
....

真正的问题是，它们真的需要放在根文件夹中吗？我不这么认为。这些是他们扎根的原因以及如何处理它们：

Internet Explorer在网站的根目录下查找favicon.ico。答：这是因为我们要求您不要声明favicon.ico。

然后，您只需要在根目录下保留一个图标图标即可，即favicon.ico，其余所有图标都可以位于子目录中。

iOS设备在以下位置查找诸如apple-touch-icon-144x144.png的文件网站的根目录，如Apple所述。这个问题可以是通过在HTML代码中声明图标来缓解这种情况（这是必要的适用于Android），但遵循Apple惯例可能是最好的举动。

按照推荐的苹果page所述，明确声明所有favicons路径均有效，即将被加载到部分文件中的路径：

为单个网页指定图标或替换网站图标使用特定于网页的图标，将链接元素添加到网页，如下所示：在：

默认情况下，Internet Explorer 11在以下位置查找browserconfig.xml：网站的根目录。

只需将browserconfig.xml保留在根目录下，并在其中引用收藏夹图标即可。

诸如Yandex之类的一些服务会在根目录中查找favicon.ico。目录。

与第一个原因相同，只需将favicon.ico保留为根。

如果您仍然希望从根本上使用它们，请对Jekyll主要命令使用包装器：build和serve，而不是直接使用它们：

例如构建：

mkdir _finalsite
cp -r * _finalsite/
cp _favicons/* _finalsite/  
jekyll build -s _finalsite

Answer 2

遇到相同问题后。我做了一些挖掘，最后决定为此编写一个ruby插件。最好的解决方案是将某些文件存储在图标文件夹中，但由于Yandix的原因，必须将诸如browserconfig.xml和favicon.ico之类的其他文件保留在根目录中。这将为您提供一种将所有文件保存在一个位置，然后将其复制到构建中的_site文件夹中的一种方法。 <-这就是所要的。没有一些“ hacky”解决方案。

在根目录中创建一个名为_plugins的文件夹。 Jekyll在构建过程中自动使用此文件夹中的插件。将该文件命名为copy-my-files.rb 因此：./_plugins/copy-my-files.rb

红宝石插件代码：

#!/usr/bin/env ruby
require 'fileutils'

module Jekyll
  Jekyll::Hooks.register :site, :post_write do |post|
    Dir.glob('_favicon/*.*') do |file|
      sourcePath = file
      outputPath = File.join('_site', File.basename(file) )
      FileUtils.cp(sourcePath, outputPath)
    end
  end
end

此操作将是在每次构建站点时将其从_favicon复制到_site文件夹中。

将生成的链接包括在_includes/head.html中要么编写一个包含所有名为favicons.html

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta nam

e="theme-color" content="#ffffff">

如果您制作了一个名为favicons.html的单独文件，请在文件中添加以下内容：{% include favicons.html %}

{％include favicons.html％}

所以这将起作用，因为_favicon填充中的所有文件都会被复制。 site.wbmanifest，manifest.json和所有png图标以及其他内容。

就像另一篇文章所说，您可以将其分解为自己的html部分包含{% include favicons.html %}，然后在您的header.html文件中链接includes/favicons.html。

发布时，如何让Jekyll将图标从子目录复制到根目录？

2 个答案: