В 2020 году у вас должен быть свой собственный веб-сайт блога (середина)

JavaScript
В 2020 году у вас должен быть свой собственный веб-сайт блога (середина)

в предыдущем урокеВ 2020 году у вас должен быть собственный блог-сайт (часть 1), мы разработали набор блогов с помощью Hexo и успешно развернули его на github-страницах с помощью travis-ci,адрес предварительного просмотра.

Это руководство как второе место в серии, в основном о том, как настроить создание и использовать тему Hexo.

На официальной странице есть тематическая коллекцияhexo.io/themes/, на странице представлено большое количество тем на выбор каждого. Но это не может удовлетворить все вкусы.К счастью, конфигурация темы Hexo не ограничивается официально предоставленными.На самом деле, к вашему блогу можно применить любую стороннюю тему, и вы даже можете настроить стиль.Это гибкость темы Hexo .

Чтобы доказать это, мы не используем тему с официальной страницы, мы находим ее на github.hexo-theme-nextтема, эта тема выглядит освежающей:адрес

Скачать темы

Все наши темы размещены в корневом каталоге/themesпапка, теперь есть только одна тема по умолчанию/themes/landscape. мы сейчасnextЗагрузите исходный код темы наthemes/next

# 执行
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

Иногда скорость сети github очень низкая.Мы также можем упаковать и загрузить напрямую, а затем разархивировать в themes/next.В конце концов, ваш каталог тем выглядит так:

|-themes
|--landscape
|--next

Теперь, когда код темы загружен в проект, следующим шагом будет изменение_config.ymlфайл для примененияnextтема, этот файлhexoКоллекция всех конфигураций в файле , мы будем часто иметь дело с ней в будущем.

# _config.yml
# ...
# 中文
language: zh-CN
# 应用next主题
theme: next

После настройки запустите блог локально:

hexo serve
# 或者简写 hexo s

Это работает отлично.

Обновления в теме

Позже, если выйдет новая версия этой темы, обновление будет очень простым делом:

cd themes/next
git pull

Изменить дополнительную конфигурацию по умолчанию

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

# _config.yml
# ...
title: 欢迎来到德莱联盟
subtitle: '这是你歇脚的地方'
author: 迈克尔

Это немного похоже на сейчас

Мы также можем скрыть драйвер питания и тему нижнего колонтитула.Эти конфигурации относятся кnext, поэтому нам нужно изменить/themes/next/_config.ymlдокумент

  powered:
    # Hexo link (Powered by Hexo).
    enable: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false

Начните писать свою первую статью

Начнем творческое путешествие и напишем нашу первую статью. Написание в Hexo используетmarkdown, так что прежде чем писать, давайте кратко рассмотрим синтаксис уценки:

Выполните следующую команду, чтобы сгенерировать статью

# hexo new [layout] <title>
hexo new welcome-lol

hexo автоматически сгенерировал для нас файл .md:/source/_posts/welcome-lol.md, давайте начнем редактировать этот файл:

# welcome-lol.md
---
title: 欢迎大家一起来玩LOL
date: 2020-02-24 21:56:12
tags: games
---

### 什么是英雄联盟?
英雄联盟(League of Legends)是由美国Riot Games开发,腾讯游戏运营的全新英雄对战网游。英雄联盟的主创团队由各著名游戏公司的核心美术、策划、程序人员组成,他们打造了游戏中风格特色各异的英雄,加入更加丰富的物品合成系统、地图玩法、天梯匹配机制,以及独创的“召唤师”技能、符文、天赋组合,让玩家感受不一样的英雄对战网游。

在游戏中,玩家将扮演一位召唤者,并选择你所信任的联盟国进入这个游戏的正义领域,为了控制瓦罗然的权利而奋战。在这个联盟中只有一条规则:胜者就是一切!

### 全新英雄对战网游
英雄联盟中拥有的海量英雄及皮肤让人印象深刻——这些英雄不仅在外观上风格迥异,甚至个个都有自己独特的性格和脾气,例如:正气凛然的无畏先锋军团领袖—德玛西亚之力盖伦、意志坚强的弗雷尔卓德部族领袖—寒冰射手艾希、乐于钻研的魔法学者—流浪法师瑞兹……除此之外,你还可以在英雄联盟中看到代表不同地域文化特色的角色或皮肤,其中包括中国武术大师、北欧冰雪巨人、日本忍者、古埃及神话角色等。

在游戏中,身为召唤师的玩家在每局游戏中都将召唤一位英雄帮助自己进行战斗。目前已经有许多英雄协助他们达成目标,在英雄联盟中完成各自心中的正义之战!我们也深信,在英雄联盟超过100位英雄中,总有一个是合适你的!

英雄,为你而战!

注:英雄联盟每周有13位免费英雄可供使用

### 初识《英雄联盟》
首次进入游戏的玩家,系统会提示他选择自己的游戏水平,目前共分为4个等级,分别为
- 我是新手
- 我玩过英雄对战游戏
- 我是高手
- 我是大湿
> 我们强烈建议新手玩家选择等级 `我是新手` 通过游戏中的新手教程来了解基础操作。

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

Включить дополнительные функции

Можно сказать,_config.ymlФайл, несущий все блог, этот шаг мы добавляем более интересные функции, такие как ссылка GitHub, значки GitHub и т. Д. На моей странице:

Отправить код

Последний шаг — отправить код на Github, запустить автоматическую сборку travis-ci, снова проверить адрес нашего блога, произошли новые изменения! ! !Адрес предварительного просмотра блога

Следующий

Пожалуйста, продолжайте обращать внимание на эту серию, следующую статью: Автоматическое развертывание блогов на собственном сервере и доменном имени на основе Jenkins.