Загрузка hugo toigian - Загрузка исходного кода hugo toigian

hugo toigian

Другие категории

1.0.0

Скачать

Хьюго Тойгян

Минималистичная тема Hugo с Tailwind CSS.

Toigian - Tối giản (вьетнамский): Минималистский (английский)
Отказ от ответственности : я не фронтенд-разработчик, я просто парень, который любит что-то настраивать, поэтому мой код может быть некрасивым/чистым. Я пытаюсь изучить CSS Tailwind, и в результате получается очень-очень.

0. Витрина
1. Особенности
2. Предварительные условия
3. Установка
3. Конфигурация
- 3.1. Конфигурация сайта
- 3.2. Конфигурация страницы
4. Шорткоды
5. Кастомизация
6. Вклад
7. Кредиты

0. Витрина

Эти скриншоты могут быть устаревшими. Взгляните на демо-сайт, чтобы узнать новейшие версии.

Темный	Свет

1. Особенности

Минималистский дизайн ( tối giản ). Очень вдохновлен mellow.dev.
Используйте стильную минималистическую цветовую палитру Rosé Pine.
Настраиваемый.
Поддержка светлого/темного режима.
Вложенные счетчики для заголовка.
Боковое плавающее содержание.
Полезные короткие коды.
Поддержка комментариев.
Подсветка синтаксиса: используйте серверное решение (Chroma, встроенный Hugo), я добавил стили Rosé Pine в Chroma, так что все осталось по-прежнему.

2. Предварительные условия

git , npm установлен.
Минимальная «расширенная» версия Hugo v0.93.0 и выше.

snap install hugo --channel=extended

PostCSS от Hugo Pipe требует, чтобы в среде был установлен пакет JavaScript postcss-cli ( npm install -g postcss postcss-cli ) вместе со всеми используемыми плагинами PostCSS (например, npm install -g autoprefixer ). Если вы используете пакет Hugo Snap, PostCSS и плагины необходимо установить локально в каталоге вашего сайта Hugo, например, npm install postcss-cli без флага -g.

3. Установка

Перейдите в корневой каталог вашего веб-сайта Hugo или создайте новый сайт с помощью:

hugo new site hugo-example-site
cd hugo-example-site
git init

Добавьте тему.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Установите модули Nodejs.

 cd themes/hugo-toigian
npm install

Наконец, обновите тему в файле конфигурации config.toml в корневом каталоге вашего веб-сайта Hugo.

 theme = " hugo-toigian "

Запустите сервер, чтобы просмотреть его в реальном времени.

hugo server -DF --disableFastRender

Создавайте статические страницы

hugo --environment production --minify

3. Конфигурация

3.1. Конфигурация сайта

Есть несколько параметров конфигурации, которые вы можете добавить в файл config.toml.

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. Конфигурация страницы

Вы можете указать дополнительные параметры в начале отдельных страниц.

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. Шорткоды

Проверьте короткие коды.

5. Кастомизация

Partials: доступны партиалы макета, позволяющие легко переопределить компоненты темы в layouts/partials/ .

Пустой частичный	Размещение	Использование
`layouts/partials/custom/head.html`	Перед закрытием тега `<head>`	Добавить собственный CSS/JS
`layouts/partials/custom/content-before.html`	Перед содержанием страницы
`layouts/partials/custom/content-after.html`	После содержимого страницы
`layouts/partials/font.html`		Импортировать пользовательские шрифты

Дополнительная настройка:

Файл	Описание
`assets/css/custom.css`	Настроить или переопределить стили CSS

Например, вам не нравится выбранный шрифт (Inconsolata), и вы хотите использовать свой собственный выбор, выполните следующие действия:

Создайте layouts/partials/font.html для импорта шрифтов:

 <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>

Создайте assets/css/custom.css :

 // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. Вклад

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

Основные цели: