Прочитайте эту статью в моем блоге, чтобы увидеть сноски в действии.

Я много лет являюсь поклонником и активным читателем PainScience.com. Одной из особенностей, которыми я давно восхищаюсь на специально созданном веб-сайте Пола Ингрэма, являются его фантастические сноски. При нажатии на номер сноски на страницу накладывается всплывающее окно для отображения ссылки и/или комментария. Это было задумано. Как он описывает:

Надежная библиография и хорошие сноски по-прежнему выделяют PainScience среди современных онлайн-публикаций. До сих пор редко можно увидеть эффективные сноски на веб-сайтах. На протяжении многих лет я много вкладывал в то, чтобы делать это правильно». 1

Несколько лет назад коллега и знакомый познакомил меня с Тимом Урбаном Погоди, а зачем?. Хотя он гораздо меньше полагается на сноски в своих письмах, сноски, которые он иногда использует, имеют аналогичную особенность.

Я уважаю хорошие сноски, потому что ценю ссылки на исходный материал. Но проблема с большинством сносок заключается в том, что они вытесняют вас из контента — вы попадаете в нижний колонтитул, где ряд сносок или ссылок накладываются друг на друга. Если вам повезет, веб-дизайнер добавил крошечную стрелку возврата в конце каждой заметки, которая вернет вас прямо к предложению, которое вы только что прочитали. То есть, если вы не отвлекались на все остальные сноски или пытались вернуться назад, многократно прокручивая.

Эти причудливые сноски на PainScience.com и «Подождите, но почему» полезны, потому что они не отвлекают вас от повествования.

Так что мне просто нужно иметь аналогичную настройку сносок для написания онлайн. Несмотря на множество неудач, я не мог оставить это, пока не нашел способ реализовать их в своем собственном блоге. Я искал в Интернете, просматривал форумы и проверял код страницы, чтобы найти решение, которое бы максимально приблизило меня к упомянутым мною примерам.

Я активно управляю 5 веб-сайтами на SquareSpace, поэтому в этом кратком руководстве будет рассказано об этом хостинге и платформе CMS. Я пытался использовать тот же набор инструментов на других платформах — Wordpress, Ghost.org, Wix и т. д. — но либо мне не повезло, либо я просто не знаю, что делаю. Squarespace (со всеми его ограничениями) кажется единственной платформой веб-хостинга с достаточным количеством обходных путей для реализации этой системы.2

бигфут.js

Это решение зависит от пакета с открытым исходным кодом под названием Бигфут. Технически это плагин jQuery, состоящий из 3-х частей:

  • bigfoot.css файл
  • bigfoot.js файл
  • код внедрения заголовка
  • (Если ничего из этого не имеет смысла, будьте терпеливы со мной. Надеюсь, скоро все получится.)

По сути, Bigfoot берет вашу статью со сносками, преобразует маленькие цифры в кнопки и говорит браузеру отображать их во всплывающем окне прямо там, где вы находитесь в статье.

Он делает это, полагаясь на определенный набор правил форматирования текста (синтаксис), называемый Markdown… но мы вернемся к этому чуть позже.

bigfoot.css

Этот файл каскадной таблицы стилей сообщает вашему веб-сайту, как должны выглядеть ваши сноски. Если у вас есть некоторые знания CSS, вы можете отредактировать это, чтобы сноски выглядели именно так, как вы хотите. Я просто оставил это как есть.

bigfoot.js

Этот файл JavaScript сообщает вашему веб-сайту, как должны работать ваши сноски. Есть 3 основных варианта, каждый из которых вы можете опробовать в этой отличной демонстрации.

  1. По умолчанию — эта опция дает вам сноски, которые представляют собой многоточие в пузырьке, всплывающем над текстом.
  2. Внизу — эта опция дает вам то же многоточие, но заметка появляется внизу страницы.
  3. Число — вместо многоточия ваша сноска будет представлять собой число в затененном пузыре, а заметка откроется во всплывающем окне.

Опять же, вы можете настраивать и комбинировать эти параметры, если знаете, как писать код на JavaScript. Или вы можете поиграть с демо, пока не найдете подходящую вам комбинацию, а затем скачать эту версию.

Header injection code

Это включает в себя несколько строк кода HTML, которые сообщают вашему браузеру, где найти bigfoot.css и bigfoot.js, чтобы он знал, как ваши сноски должны выглядеть и действовать.

Установка Bigfoot на Squarespace

Теперь, чтобы заставить его работать на Squarespace.

Во-первых, вам нужно скачать исходные файлы с bigfootjs.com или с GitHub.

Добавьте код плагина

Нам нужно загрузить файлы CSS и JavaScript. Но, подожди. Известно, что Squarespace не обеспечивает никакого управления файлами.

Ага! Но они… вроде.

Вы действительно можете загружать документы, но эта функция скрыта в конструкторе ссылок текстового блока. Вот как я это сделал.

Создать скрытую страницу

  • В навигаторе страниц добавьте новую страницу без ссылок. Выберите макет пустой страницы. Я назвал свой plug-ins, так как это только для того, чтобы помочь мне добавить файлы bigfoot.
  • Добавьте текстовый блок.
  • Загрузить файлы
  • Добавьте текст, с которым вы создадите ссылку. Я только что набрал Bigfoot.js.
  • Выделите текст, нажмите кнопку «Ссылка», затем нажмите значок шестеренки, чтобы открыть дополнительные параметры.
  • Выберите «Файл» на левой боковой панели, затем нажмите «Загрузить файл».
  • Перейдите к загруженному файлу bigfoot.js, нажмите «Открыть».
  • После завершения загрузки убедитесь, что в списке выбрано bigfoot.js, затем нажмите Сохранить.
  • Нажмите «Применить» в конструкторе ссылок.

Теперь вы повторите те же шаги, но для bigfoot.css.

  • Добавьте bigfoot.css в качестве текста на новой строке.
  • Выделите текст, нажмите кнопку «Ссылка», затем нажмите значок шестеренки, чтобы открыть дополнительные параметры.
  • Выберите «Файл» на левой боковой панели, затем нажмите «Загрузить файл».
  • Перейдите к загруженному файлу bigfoot.css, нажмите «Открыть».
  • После завершения загрузки убедитесь, что в списке выбрано bigfoot.css, затем нажмите Сохранить.
  • Нажмите «Применить» в конструкторе ссылок.

Нажмите Сохранить на странице.

Обратите внимание на новое расположение этих двух файлов подключаемых модулей, поскольку их путь необходимо обновить в коде внедрения заголовка.

Squarespace хранит файлы в каталоге /s. Если вы следовали приведенным выше инструкциям, пути должны выглядеть так:

bigfoot.js: /s/bigfoot.js

bigfoot.css: /s/bigfoot.css

Щелкните правой кнопкой мыши каждую из только что созданных текстовых ссылок и выберите «Копировать ссылку», чтобы получить правильный путь.

Изменить код внедрения заголовка

Перейдите в настройки Squarespace. Выберите Расширенный. Выберите «Внедрение кода».

В поле HEADER вставьте следующий код:

<!-- jQuery for Bigfoot.js --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js" ></script> <script type="text/javascript" src="/s/bigfoot.js"></script> <link rel="stylesheet" type="text/css" href="/s/bigfoot.css"> <script type="text/javascript"> $.bigfoot(); </script> <!-- End bigfoot.js -->

Примечание. Если URL ваших файлов подключаемых модулей отличается, вы можете заменить его на /s/bigfoot.js и /s/bigfoot.css соответственно. например если вы выбрали сноски в виде чисел, ваша 4-я строка может выглядеть так:

<link rel="stylesheet" type="text/css" href="/s/bigfoot-number.css">

Нажмите Сохранить в левом верхнем углу.

Поздравляем! Вы установили плагин Bigfoot на Squarespace.

И что теперь?

Создание сносок в Markdown

Markdown — это синтаксис форматирования открытого текста, который работает с типами документов и во множестве разных приложений. Созданный Джоном Грубером (?), он быстро приобрел популярность как способ написания богато отформатированного текста, не отрывая рук от клавиатуры и, что более важно, не отвлекаясь от текста.

Вместо того, чтобы вводить заголовок, тянуться к мыши, выбирать Edit->Bold и настраивать размер шрифта, Markdown позволяет отформатировать заголовок всего несколькими нажатиями клавиш.

Символ # используется для обозначения заголовка с несколькими ##, соответствующими подзаголовкам. то есть уценка:

# This is a main header (H1)
## This is a second header (H2)
### This is a third header (H3)

Будет отформатирован так:

Это основной заголовок (H1)

Это второй заголовок (H2)

Это третий заголовок (H3)

Синтаксис сноски немного сложнее, но все же достаточно прост, если к нему привыкнуть.

Чтобы обозначить сноску, используйте квадратную скобку, за которой следует морковь, затем номер сноски, а затем закрывающую скобку. то есть:

I'll include the first footnote at the end of this sentence.[^1]

Будет означать сноску номер 1 и будет выглядеть так:

Я включу первую сноску в конце этого предложения. 1

Но эта сноска должна на что-то ссылаться. Таким образом, чтобы добавить фактический текст в сноску, используйте тот же синтаксис скобка-морковь-номер-скобка, за которым следует двоеточие, например:

[^1]: This is the note that is referenced by footnote #1.

По соглашению текст сноски помещается в конце документа, то есть там, где могут появиться концевые сноски или библиография. Но на самом деле вы можете

Более подробную информацию и пояснения по Markdown, включая сноски, можно найти на MarkdownGuide.org.

Добавление Markdown к сообщениям блога на Squarespace

Проблема в том, что для Bigfoot требуется расширенный синтаксис Markdown, а Squarespace поддерживает только стандартный синтаксис.

Работа вокруг? Экспортируйте Markdown в HTML.

Это довольно легко с помощью приложения для письма, которое я использую (iA Writer), потому что я могу скопировать весь документ в HTML одним нажатием клавиши 3, а затем вставить HTML в блок кода на Squarespace.

Сохраните блок, сохраните страницу, затем обновите и, вуаля, сноски предстанут во всей своей великолепной красе.

Одно предостережение в отношении этого метода заключается в том, что блоки кода не могут быть разделены так же, как блоки текста или уценки. Поэтому, если вы хотите добавить изображение, цитату или какой-либо другой элемент между абзацами, вам фактически придется вырезать HTML-код для следующих абзацев и вставить его в другой блок кода. Хорошая новость заключается в том, что Bigfoot достаточно умен, чтобы находить сноски на странице, а не только внутри того же блока. Таким образом, если вы пометите сноску 1 в одном блоке кода, добавите изображение, а затем включите HTML-код для ссылки на сноску 1 во втором блоке кода внизу страницы, сноска будет работать, как и ожидалось, т. е. текст ссылки появится во всплывающей сноске в первом абзаце.

Обновление:

Littlefoot.js

После написания этого пошагового руководства 4 я обнаружил немного более современный и простой в установке фрагмент кода под названием Littlefoot. Это по-прежнему JavaScript, но он не требует jQuery 5, а также не требует загрузки файлов JavaScript и CSS. 6

Чтобы установить Littlefoot.js, просто скопируйте и вставьте этот код в Footer Injection Code в разделе Advanced Settings на панели управления Squarespace.

<!-- Littlefoot.js -->
<script
  src="https://unpkg.com/littlefoot/dist/littlefoot.js"
  type="application/javascript"
></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/littlefoot/dist/littlefoot.css">
<script type="application/javascript">
  littlefoot.default()
</script>
<!-- End Littlefoot.js -->

Единственное ограничение Littlefoot по сравнению с Bigfoot заключается в том, что я еще не понял, как заставить работать нумерованные ссылки вместо эллипсов по умолчанию. 7 Это определенно возможно, но для этого требуется изменить некоторый код в файле JavaScript (и поэтому также требуется загрузка пользовательского файла JS в Squarespace), и я недостаточно изучил JavaScript и CSS, чтобы реализовать его на том же уровне, что и Bigfoot.8 Я близок, поэтому, если у вас есть какие-либо советы, дайте мне знать !

  1. Конечно, даже у этой цитаты есть сноски на исходной странице, описывающие его безумно спроектированную библиографическую систему для ссылок: Библиография боли и терапии ↩︎
  2. Это пошаговое руководство в значительной степени основано на старых сообщениях в блогах Энтони Крейга и Стивен Хакетт, объясняющих, как они заставили Bigfoot.js работать на своих сайтах Squarespace. ↩︎
  3. CMD + Shift + C ↩︎
  4. и в приступе технической скуки и желания чего-то более упорядоченного, чем необходимое копирование и вставка HTML в Squarespace ↩︎
  5. который явно выходит из моды? А может просто не в стиле? ↩︎
  6. Вместо этого он ссылается на JavaScript и CSS в CDN (сети доставки контента, то есть на чужом сервере), которые на самом деле могут работать и с Bigfoot, если вы знаете его общедоступный список в CDN. ↩︎
  7. он же три точки ↩︎
  8. Если вы знаете, как — или, точнее, где — отредактировать код buttonTemplate, чтобы нумерованные сноски работали, пожалуйста, дайте мне знать! ↩︎