hugo theme charlolamode

Charlola.mode

Эта тема веб -сайта основана на фреймворках Hugo. Это модификация шаблонов Papermod и Hugo-Paper. Он быстро и прост в использовании с минимальным дизайном и самыми основными функциями.

Проверьте мой сайт, чтобы увидеть аналогичный пример: www.cmart1n.com

Ссылка на тему Hugo: https://themes.gohugo.io/themes/hugo-teme-charlolamode/.

Функции

1. Настройте свою домашнюю страницу с ...

   • Название страницы
   • Ваше имя
   • Описание
   • Социальные иконки
   • Кнопки

2. Измените цвет всех элементов, таких как фон, текст, значки ...

3. Если вы нажмете на вкладку, вы увидите список сообщений.

   • Сообщения могут быть визуализированы с изображениями
   • post может привести к внешней ссылке

Быстрый старт

1. Установите Hugo
2. Установить git

Откройте свой терминал или командную строку

1. Создайте новую папку 'QuickStart'

 hugo new site quickstart

2. Зайдите в эту папку

 cd quickstart

3. Инициализировать пустой репозиторий GIT в текущем каталоге

 git init

4. Клонировать этот репозиторий в свою папку

 git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

5. Удалить config.toml

 rm config.toml

6. Добавить тему в новый файл config.yml

 echo "theme: charlolamode" >> config.yml

7. Начните сервер разработки Hugo, чтобы просмотреть сайт локально.

 hugo server

Как только локальный сервер запустится, вы сможете увидеть свой сайт. Если ваш WebBrowser не появляется автоматически, откройте свой браузер и введите http: // localhost: 1313. Теперь вы можете начать изменять эту страницу в каталоге. Если вы сохраните новые изменения, этот сайт автоматически обновляет и сделает модификацию.

Откройте код Visual Studio для редактирования вашего блога

3. Откройте свой любимый редактор, как код Visual Studio

Базовая конфигурация

Config.yml - ваш лучший друг. Вы можете изменить и добавлять информацию, например ...

• Название страницы
• Ваше имя
• Описание
• Социальные иконки
• Кнопки

Посмотрите на Charlolamode/config.yml для справки. Есть прокомментированные примеры, которые показывают, как легко добавлять вкладки и социальные значки, такие как LinkedIn, Twitter, YouTube, Instagram. Скопируйте контент в вашем config.yml, который будет перезаписать config.yml темы.

Изменить изображение профиля

Чтобы добавить рисунок профиля, замените Profile.png в папке Static/Images . Убедитесь, что вы сделаете изображение с счастливым лицом :)

Добавить вкладки

В config.yml вы можете добавить новые вкладки рядом с «статьями» и «контактом». Неудобная «категория», чтобы проверить это.

Примечание, если вы добавите новую вкладку в config.yml, вы должны сделать следующее:

1. Добавьте новую папку в каталог «Контент» с тем же именем, что и новая вкладка.
2. Скопируйте _index.md из статей в новую папку.

Добавить новый контент

Если вам нравится нажимать новый контент, создайте новый файл Markdown в новой папке. Найдите пример в Content/Strates/article.md .

Изменить цвета

Посмотрите на активы/CSS/Core/Theme-Vars.css, чтобы играть с цветами.

Отключить режим профиля '

Чтобы отобразить содержимое статьи на домашней странице, а не информацию о профиле, установите следующее в соответствии с параметрами: в config.yml

 profileMode: 
    enabled: false

С содержимым статьи, перенесенным на домашнюю страницу, может быть желательным удаление основного меню для статей :

 menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

Спасибо!

Я вложил свое время, чтобы построить это, и это полностью бесплатно. Если этот шаблон сэкономил вам время, не стесняйтесь поддерживать эту страницу с пожертвованием кофе :)

Я хотел бы получить отзыв, отправить сообщение через LinkedIn!

Онлайн -сайт

Чтобы выдвигать свой веб -сайт онлайн, используйте Azure Static Web или Netflify. Я использую Azure Static Web.