Шаблон Hugo Ionic


Небольшое напоминание о пожертвованиях, поскольку Hugo говорит: «Hugo стоит на плечах многих великих библиотек с открытым исходным кодом», как и многие из моих руководств. Brew Hugo

Начало работы с Hugo

Просмотрите руководство на gohugo.io. Мои руководства всегда будут для Mac, но я всегда постараюсь дать ссылку для других операционных систем.

Шаги урока

  • Установите Hugo

  • Создайте новый сайт Hugo

  • Начать использовать шаблон AJonP

Урок 2 (требуется для Algolia)

Пожалуйста, ознакомьтесь с Уроком: Hugo Ionic для следующего набора функций 1. Victor Hugo 1. Развернуть

Установите Hugo

Brew

Если вы похожи на меня и только что купили новый Mac, вы, вероятно, воспринимаете brew как должное и думаете, что он находится прямо здесь ????! Для начала вы можете зайти в brew.sh, где вам будет предложено выполнить следующие действия

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Войти в полноэкранный режим Выйти из полноэкранного режима

Hugo

brew install hugo
Войти в полноэкранный режим Выйти из полноэкранного режима

Создание нового сайта Hugo

hugo new site 4-hugo-ionic cd 4-hugo-ionic
Войти в полноэкранный режим Выйти из полноэкранного режима

На этом этапе вы заметите, что проект остается довольно пустым в общем скелете.

В нем есть только два файла config.toml и archetypes/default.md

Если вы запустите hugo serve прямо сейчас, вы увидите пустой экран, поскольку нет никакого содержимого для отображения.

Index.html

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

layouts/Index.html

«простой текст
Вы можете создать здесь весь сайт, если захотите.




> Again if you run `hugo serve` right now, you will see a blank screen as there is no content to show.

## _index.md

`content/_index.md`

> I know this is getting a little frustrating! Again if you run `hugo serve` right now, you will see a blank screen as there is no content to show.

## Update Index.html

This will be the **first** page that will show anything in the browser!

layouts/index.html

Now run the command `hugo serve` and you will see a page that has

![](https://media.codingcat.dev/image/upload/v1657636636/main-codingcatdev-photo/8e510c84-be79-455b-a89e-d9aad1f608a1.png)

## Making a Point

Now I wanted to walk you through all of that to show 1. The steps really necessary to make a Hugo site 1. Prove that laying out a site from scratch is time consuming

# Start Using AJonP Template

## Theme Download Location

You can find the link on Hugo's Theme site [https://themes.gohugo.io/ajonp-hugo-ionic/](https://themes.gohugo.io/ajonp-hugo-ionic/)

## Git integraiton

### Clone (Easy, not updated)



```bash
git clone https://github.com/AJONPLLC/ajonp-hugo-ionic themes/ajonp-hugo-ionic
Вход в полноэкранный режим Выход из полноэкранного режима

Субмодуль (улучшенный, обновленный)

git submodule add https://github.com/AJONPLLC/ajonp-hugo-ionic themes/ajonp-hugo-ionic
Вход в полноэкранный режим Выход из полноэкранного режима

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

git submodule update --remote --merge
Войти в полноэкранный режим Выйти из полноэкранного режима

Преимущества темы

Теперь у вас должна появиться новая папка themes/ajonp-hugo-ionic. В ней находится вся тема, включая пример сайта, расположенный в папке themes/ajonp-hugo-ionic/exampleSite.

Особенности

Тематика Ionic

Делая шаг вперед, вы можете изменить любой из цветов на сайте с помощью генератора цветов Ionic.

Вот пример оформления в стиле Hugo.

Просто скопируйте созданные им CSS-переменные в static/css/custom.css

«`plain text
:root {
—ion-color-primary: #ff387d;
—ion-color-primary-rgb: 255, 56, 125;
—ion-color-primary-contrast: #ffffff;
—ion-color-primary-contrast-rgb: 255, 255, 255;
—ion-color-primary-shade: #e0316e;
—ion-color-primary-tint: #ff4c8a;
—ion-color-secondary: #0d171f;
—ion-color-secondary-rgb: 13, 23, 31;
—ion-color-secondary-contrast: #ffffff;
—ion-color-secondary-contrast-rgb: 255, 255, 255;
—ion-color-secondary-shade: #0b141b;
—ion-color-secondary-tint: #252e35;
—ion-color-tertiary: #2cb286;
—ion-color-tertiary-rgb: 44, 178, 134;
—ion-color-tertiary-contrast: #000000;
—ion-color-tertiary-contrast-rgb: 0, 0, 0;
—ion-color-tertiary-shade: #279d76;
—ion-color-tertiary-tint: #41ba92;
—ion-color-success: #10dc60;
—ion-color-success-rgb: 16, 220, 96;
—ion-color-success-contrast: #ffffff;
—ion-color-success-contrast-rgb: 255, 255, 255;
—ion-color-success-shade: #0ec254;
—ion-color-success-tint: #28e070;
—ion-color-warning: #ffce00;
—ion-color-warning-rgb: 255, 206, 0;
—ion-color-warning-contrast: #ffffff;
—ion-color-warning-contrast-rgb: 255, 255, 255;
—ion-color-warning-shade: #e0b500;
—ion-color-warning-tint: #ffd31a;
—ion-color-danger: #f04141;
—ion-color-danger-rgb: 245, 61, 61;
—ion-color-danger-contrast: #ffffff;
—ion-color-danger-contrast-rgb: 255, 255, 255;
—ion-color-danger-shade: #d33939;
—ion-color-danger-tint: #f25454;
—ion-color-dark: #222428;
—ion-color-dark-rgb: 34, 34, 34;
—ion-color-dark-contrast: #ffffff;
—ion-color-dark-contrast-rgb: 255, 255, 255;
—ion-color-dark-shade: #1e2023;
—ion-color-dark-tint: #383a3e;
—ion-color-medium: #989aa2;
—ion-color-medium-rgb: 152, 154, 162;
—ion-color-medium-contrast: #ffffff;
—ion-color-medium-contrast-rgb: 255, 255, 255;
—ion-color-medium-shade: #86888f;
—ion-color-medium-tint: #a2a4ab;
—ion-color-light: #f4f5f8;
—ion-color-light-rgb: 244, 244, 244;
—ion-color-light-contrast: #000000;
—ion-color-light-contrast-rgb: 0, 0, 0;
—ion-color-light-shade: #d7d8da;
—ion-color-light-tint: #f5f6f9;
}




# Theme updates

I used the theme for [AJonP](https://ajonp.com/) so it may change (you can always stay at a commit), but please contact me or Pull request on [Github](https://github.com/AJONPLLC/ajonp-hugo-ionic/pulls).
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий