Как мне заставить Jekyll копировать значки из подкаталога в корневой каталог при публикации? - PullRequest
Новая
       10

Как мне заставить Jekyll копировать значки из подкаталога в корневой каталог при публикации?

0 голосов
/ 07 сентября 2018

Я использую realfavicongenerator.net для генерации favicon.ico и всех других файлов, необходимых в настоящее время. Это много файлов (более 10) и, поскольку они рекомендуют , я храню их в корне сайта. Это выглядит довольно грязно и замедляет видеть важные вещи, такие как мои файлы конфигурации среди них.

Что я хотел бы сделать, это сохранить их все в подпапке _favicon, но иметь опцию конфигурации Jekyll, которая копирует содержимое подпапки в корень _site при публикации. Есть ли вариант, который сделает это?

Ответы [ 2 ]

0 голосов
/ 14 августа 2019

После столкновения с той же проблемой. Я немного покопался и наконец решил написать для этого плагин ruby. Это было бы лучшим решением, если бы некоторые из ваших файлов хранились в папке значков, а другие файлы, такие как browserconfig.xml и favicon.ico, должны были храниться в корне из-за Yandix. Это даст вам возможность хранить все файлы в одном месте и копировать их в папку _site при сборке. <- это то, что просили. Не какое-то "хакерское" решение. </p>

  1. Создайте в корне папку с именем _plugins. Jekyll автоматически использует плагины из этой папки во время сборки. Назовите файл как-то как copy-my-files.rb Итак: ./_plugins/copy-my-files.rb

код плагина ruby: 

#!/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.

  1. Включить сгенерированные ссылки в _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">
  1. Если вы создали отдельный файл с именем favicons.html, включите его в свою голову так: {% include favicons.html %}

{% include favicons.html%}

Так что это будет работать, потому что все файлы в _favicon fill копируются. Сайт.wbmanifest, manifest.json и все значки png, а что нет.

Как и в другом сообщении, вы можете разбить его на собственную html-часть, включающую {% include favicons.html %}, и затем вы добавите ссылку includes/favicons.html в свой файл header.html.

0 голосов
/ 10 сентября 2018

Я использую аналогичный генератор 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), но, вероятно, следование лучший ход.

Явное объявление всех путей favicons работает, которые будут загружены в частичный файл, как указано в рекомендованной Apple странице :

Чтобы указать значок для одной веб-страницы или заменить значок веб-сайта со значком веб-страницы, добавьте элемент ссылки на веб-страницу, как в:

  • По умолчанию Internet Explorer 11 ищет файл browserconfig.xml на корень веб-сайта.

Просто держите browserconfig.xml в корне и обращайтесь к значкам внутри него по правильному пути.

  • Несколько сервисов, таких как Яндекс, ищут favicon.ico в корне каталог.

То же, что и первая причина, просто держите favicon.ico в корне.

Если вы все еще хотите, чтобы они были в корне, используйте обертки для основных команд Jekyll: build и serve вместо их непосредственного использования:

Например, для сборки: 

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