hugo theme fiber

Тема Хьюго для минималистов. Fiber использует минимум JavaScript и CSS, чтобы ваш сайт загружался быстрее! Также имеется чистый пользовательский интерфейс, который отлично подходит для глаз!

Оглавление

• Установка
  • Использование подмодуля
  • Прямая загрузка темы
• Функции
  • SEO готов
  • Короткие коды
    • ASCIINema
    • Могу ли я использовать
  • Нажмите, чтобы скопировать код
  • Красивые заметки
• Скриншоты
• Настройка темы
  • Размещение контента на главной странице
    • Список блогов, заметок и т. д.
    • Листинг пользовательского контента
  • Выделение кода
  • Пункты меню
  • Название сайта
• Написание контента
  • Написание заметок
  • Фронтматтер

Установка

Есть два способа использования этой темы на любых сайтах, основанных на Hugo.

1. Использование подмодулей Git (рекомендуется)
2. Непосредственная загрузка темы в <hugo-site-root>/themes/

Использование подмодуля

1. Создайте свой сайт с помощью hugo new site SITE_NAME
2. cd на SITE_NAME
3. Инициализируйте репозиторий git: git init . Это необходимо, потому что нам нужно добавить подмодуль git.
4. Добавьте подмодуль, запустив git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
5. Теперь запустите сервер Hugo локально, используя hugo serve

Если в репозитории темы есть обновление, вы можете получить его с помощью git submodule update --remote

Прямая загрузка темы

Используйте этот метод, если по какой-то причине вы не можете использовать Git.

1. Загрузите это и извлеките его содержимое в SITE_ROOT/themes/hugo-theme-fiber/ .
2. Запустите Hugo локально, выполнив hugo serve с терминала.

Функции

SEO готов

Эта тема загружена базовым SEO, а также минимальным количеством данных JSON-LD с Schema.org.

Короткие коды

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

ASCIINema

Вставьте AsciiNema Cast. Шорткод для использования: {{< asciinema id="id of a public cast" >}}

Могу ли я использовать

Этот короткий код показывает последние данные с сайта caniuse.com. Полезно для веб-разработчиков. Пример:

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

Нажмите, чтобы скопировать код

Посетители сайта могут скопировать содержимое любого кодового блока одним щелчком мыши. Это не нарушит отступы кода!

Красивые заметки

Все, что вы поместите в content/notes , получит черновые аннотации. Это облегчает распознавание важных вещей из заметок.

Грубые аннотации контролируются с помощью таких тегов, как strong , em и strikethrough . Чтобы создать новую запись notes , сначала необходимо создать каталог content/notes . Затем используйтеhugo hugo new notes/file-name.md для создания заметки. Этот файл будет содержать информацию о том, как аннотировать объекты вышеупомянутыми тегами.

Скриншоты

Настройка темы

Размещение контента на главной странице

Домашнюю страницу можно настроить двумя разными способами. Вы можете указать свой любимый/самый важный раздел из каталога content .

Или разместите внутри него собственный контент.

Или вы можете сделать и то, и другое! Обязательно создайте файл content/_index.md , у которого внутри fromtmatter есть title свойства. Это свойство title полезно для SEO. Пример:

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

Список блогов, заметок и т. д.

Чтобы создать список контента на домашней странице, вам необходимо установить переменную mainSections в файле config.toml . Пример:

[ params ]
mainSections = [ " posts " ]

Листинг пользовательского контента

Чтобы перечислить пользовательский контент, просто поместите его в файл content/_index.md с соответствующим заголовком.

Выделение кода

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

Вам нужно запустить классы для кодовых блоков. Вот как вы это сделаете:

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

Пункты меню

По умолчанию в верхнем меню есть только один пункт. Чтобы добавить туда больше элементов, необходимо определить пункты меню внутри config.toml . Ниже приведен пример из config.toml моего сайта:

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

Название сайта

Название сайта контролируется следующими параметрами в config.toml :

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

Написание контента

Написание заметок

Notes — это особый вид, жестко запрограммированный в этой теме. Содержимое такого типа будет иметь черновые аннотации (что упрощает управление заметками).

Создайте страницу заметок с помощью командыhugo hugo new notes/your-filename.md чтобы узнать, как использовать приблизительные аннотации на странице заметок.

Включен архетип для добрых заметок.

Фронтматтер

Эта тема использует frontmatter для обработки пользовательского описания сообщения и метаизображения для SEO. Если он не может найти meta.image и meta.description , он вернется к /images/default-meta-image.png и .Summary соответственно.

Используйте эти два поля во фронтовой теме следующим образом:

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->