Просто артефакт! Один щелчок, чтобы создать красивый веб-сайт блога, действительно ароматный!

Как программист, если вы любите публиковать технические статьи, у вас, должно быть, была идея создать личный веб-сайт блога. Сравнив множество фреймворков для блогов, я обнаружил, что Hexo+hexo-theme-materyСайт-блог, созданный на основе темы, имеет не только красивый интерфейс, но и мощные функции. Сегодня я покажу вам, как использовать Hexo для создания красивого веб-сайта блога, надеюсь, это будет вам полезно!

Адрес фактического центра электронной коммерции SpringBoot (50k+star):GitHub.com/macro-positive/…

О Хексо

Hexo — это быстрый, лаконичный и эффективный фреймворк для ведения блогов. Мы можем использовать Markdown для написания статей, а затем создавать статические веб-сайты с помощью Hexo.Темы Hexo очень богаты, и многие блоги, которые вы видели, создаются с его помощью.

hexo-theme-matery тема

При использовании Hexo мы обычно используем его со сторонней темой, здесь мы рекомендуем тему, основанную на Material Design.hexo-theme-matery, интерфейс простой и красивый, а содержание статьи красивое и легко читаемое. Адаптивный дизайн, блог хорошо отображается на десктопах, планшетах, мобильных и других устройствах. Встроенные богатые плагины, мощный.

Демонстрация эффекта

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

Строить

Мы начнем с создания простого сайта блога с помощью Hexo, а затем перейдем кhexo-theme-materyтема.

• Сначала установите с помощью следующей командыhexo-cli, вы можете сказать по названию, что это инструмент Hexo CLI;

npm install -g hexo-cli

• После успешной установки инициализируйте каталог блога, войдите в каталог, а затем установите зависимости;

# 初始化博客目录
hexo init website-hexo
# 进入博客目录
cd website-hexo
# 安装博客相关依赖
npm install

• Такой базовый блог-сайт был создан.Можно ли создать блог-сайт за считанные секунды, а затем использовать следующую команду, чтобы запустить блог-сайт;

hexo server

• После успешного запуска мы можем посетить домашнюю страницу.Друзья, которые использовали Hexo, должны знать, что Hexo следует использовать с темой, иначе это будет действительно уродливо.Посетите адрес:http://localhost:4000/

настроить

Чтобы создать веб-сайт блога, необходимо настроить некоторые конфигурации.Далее давайте поговорим об общей конфигурации и настройке Hexo.hexo-theme-materyнастройка темы.

Общая конфигурация Hexo

Есть много тем, поддерживающих Hexo, вот эта мне кажется более красивойhexo-theme-matery.

• Сначала скачайте тему и извлечь ее в проектthemesкаталог, адрес загрузки:GitHub.com/blink buddha/и…

• Измените файл конфигурации в корневом каталоге проекта._config.yml, этот файл является общей конфигурацией Hexo,themeсвойство изменено наhexo-theme-matery;

theme: hexo-theme-matery

• После успешной поправки перезапускаем проект, смотрим дома, много действительно красивых страниц, заходим Адрес:http://localhost:4000/

• Конечно_config.ymlФайл может не только изменить тему, но и многие конфигурации веб-сайта, такие как конфигурация веб-сайта, конфигурация URL-адреса, конфигурация домашней страницы и т. д.

# 网站配置
title: macrozheng # 网站标题
subtitle: 'macrozheng 的个人博客' # 网站副标题
description: 'Justice may be late, but will never be absent.' # 网站描述
keywords:
author: macrozheng # 网站作者
language: zh-CN # 网站使用的语言，可以设置为中文
timezone: ''

# 网址配置
url: http://localhost:4000 # 网址，会影响文章页的原文链接地址
permalink: :year/:month/:day/:title/ # 文章的永久链接格式

# 首页配置
index_generator:
  path: ''
  per_page: 12 # 分页设置，该主题设置6、12、18比较好
  order_by: -date # 按时间倒序排列

# 分页配置
per_page: 12
pagination_dir: page

Добавить закрепленные страницы

• В верхней части главной страницы есть некоторые кнопки навигации, такие как теги, категории, архивы и т. д., если мы не создадим соответствующую страницу, она будет недоступна;

• использоватьhexo new page "categories"Команда для создания новой страницы категории, страница категории содержит как минимум следующее содержимое;

---
title: categories
date: 2021-09-06 10:19:56
type: "categories"
layout: "categories"
---

• использоватьhexo new page "tags"Команда для создания новой вкладки, страница вкладки содержит как минимум следующее содержимое;

---
title: tags
date: 2021-09-06 10:25:04
type: "tags"
layout: "tags"
---

• использоватьhexo new page "about"Команда для создания новой страницы сведений, страница сведений содержит как минимум следующее содержимое;

---
title: about
date: 2021-09-06 10:28:56
type: "about"
layout: "about"
---

• использоватьhexo new page 404Команда для создания новой страницы 404, 404 содержит как минимум следующий контент;

---
title: 404
date: 2021-09-06 10:32:48
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

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

Конфигурация субъекта

Нам нужно не только изменить конфигурацию Hexo, нам также нужно изменитьhexo-theme-materyКонфигурация темы, такая как навигация по меню вверху и страница «О программе», настраивается в теме. Примечание. Конфигурацию темы необходимо изменить./themes/hexo-theme-matery/_config.ymlдокумент.

• Можем настроить меню навигации, например я добавил项目это навигационное меню;

# 配置菜单导航的名称、路径和图标icon.
menu:
  Index:
    url: /
    icon: fas fa-home
  项目:
    icon: fas fa-project-diagram"
    children:
      - name: mall
        url: https://github.com/macrozheng/mall
      - name: mall-admin-web
        url: https://github.com/macrozheng/mall-admin-web
      - name: mall-tiny
        url: https://github.com/macrozheng/mall-tiny
  Tags:
    url: /tags
    icon: fas fa-tags

• После успешного добавления появится меню навигации项目Это меню и может отображать вторичное меню;

• Мы можем настроить и изменить введение домашней страницыdreamСледующая конфигурация может быть;

# 配置首页显示"梦想"的语句.
dream:
  enable: true
  showTitle: true
  title: 关于本站
  text: 本站是macrozheng的个人博客网站，初衷是为了分享和记录自己平时所学到的技术。作者Github开源项目mall（50K+Star），欢迎关注我的公众号「macrozheng」。

• После успешной настройки домашняя страница отображается следующим образом;

• Мы можем настроить личную информацию в баннере на главной странице;

# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github: https://github.com/macrozheng # https://github.com/xxx
  email: macrozheng@126.com # xxx@xxx.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: # 123456789
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  juejin: https://juejin.im/user/5cf7c1d7f265da1bc07e28b7
  jianshu: https://www.jianshu.com/u/9bdcaae6d6b7
  rss: false # true、false

• Поскольку мы настроили две ссылки,掘金и简书, также необходимо изменить каталог темы/layout/_partial/social-link.ejsфайл, добавьте следующий контент, иначе он не будет отображаться;

<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">掘</i>
    </a>
<% } %>

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注我的简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">简</i>
    </a>
<% } %>

• После успешной настройки домашняя страница отображается следующим образом;

• Мы можем настроить страницу «О нас», настроить личную информацию, мой проект ниже и закрыть технический дисплей;

# 在”关于”页面中配置个人信息，包括头像、职业和个人介绍.
profile:
  avatar: /medias/avatar.png
  career: Java 开发工程师
  introduction: 专注Java技术分享，涵盖SpringBoot、SpringCloud、Docker、中间件等实用技术，Github开源项目mall（50K+Star）。

# 在“关于”页面配置"我的项目"信息，如果你不需要这些信息则可以将其设置为不激活或者将其删除.
myProjects:
  enable: true
  data:
    mall:
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall
      desc: mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现。
    mall-admin-web:
        icon: fab fa-vuejs
        iconBackground: 'linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)'
        url: https://github.com/macrozheng/mall-admin-web
        desc: mall-admin-web是一个电商后台管理系统的前端项目，基于Vue+Element实现。
    mall-tiny:
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall-tiny
      desc: 基于SpringBoot+MyBatis的单应用项目骨架。

# 在“关于”页面配置"我的技能"信息，如果你不需要这些信息则可以将其设置为不激活或者将其删除.
mySkills:
  enable: false
  data:
    Java:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 85%

• После успешной настройки личная страница выглядит следующим образом;

• Есть также некоторые другие полезные конфигурации, такие как конфигурация ссылки Github, конфигурация перепечатки, конфигурация общего доступа, конфигурация субтитров пишущей машинки и конфигурация номера записи и т. д.

# 配置是否在 header 中显示 fork me on github 的图标，默认为true，你可以修改为你的仓库地址.
githubLink:
  enable: true
  url: https://github.com/macrozheng
  title: Fork Me

# 转载声明
reprint:
  enable: true
  default: cc_by_nc_nd
  
# sharejs文章分享模块.
# 支持顺序，可选项目为twitter, facebook, google, qq, qzone, wechat, weibo, douban, linkedin.
sharejs:
  enable: true
  sites: qq,wechat,weibo,douban
  
# 打字效果副标题.
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub:
    - Justice may be late, but will never be absent.

# ICP备案信息尾部显示
icp:
  enable: false
  url: # 备案链接
  text: # 备案信息

Написать статьи

Чтобы написать статью, мы можем использовать Markdown, чтобы написать ее напрямую, а затем добавить в голову.Front-matterВы можете настроить его, и статьи будут размещены вsource/_postsПод содержанием.

• Здесь мы уже_postsПосле добавления статьи в каталог перезапустите сайт блога, чтобы увидеть ее;

• Мы должны добавить к каждой статьеFront-matter,Front-matterЕго можно использовать для настройки заголовка, категории, ярлыка и другой информации о статье.Простая конфигурация выглядит следующим образом;

---
title: mall整合SpringBoot+MyBatis搭建基本骨架
date: 2021-08-21 16:30:11
permalink: /pages/c68875/
categories:
  - mall学习教程
  - 架构篇
tags:
  - SpringBoot
  - MyBatis
---

• Front-matterКонфигураций много, поэтому я не буду их здесь описывать, просто обратимся к таблице ниже;

• Если вы хотите, чтобы определенные статьи рекомендовались на главной странице, вы можете добавитьtop: trueнастроить;

• Если вы скопируете изображение напрямую, вы обнаружите, что изображение не может быть отображено, нам нужно изменить относительный путь изображения статьи на абсолютный путь, прежде чем его можно будет отобразить;

![相对图片路径](../images/springcloud_arch.png)
![绝对图片路径](/images/springcloud_arch.png)

• Если в вашей статье есть код, то будут проблемы с отображением по умолчанию, вам нужно модифицировать конфигурацию Hexo_config.ymlНеполноценныйhighlightДавать возможностьprismjsможет отображаться нормально;

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

• Если это не работает здесь, вы можете использоватьhexo cleanКоманда для очистки кеша и повторной попытки со сравнительной таблицей стиля блока кода;

• Кроме того, плагин поиска не работает по умолчанию, нам нужно использовать следующую команду, чтобы сначала установить плагин поиска;

npm install hexo-generator-search --save

• Затем измените файл конфигурации Hexo в корневом каталоге._config.yml, добавьте следующую конфигурацию;

search:
  path: search.xml
  field: post

• После того, как поиск вступит в силу, эффект отображения выглядит следующим образом.

развертывать

Hexo быстро и легко создает веб-сайт.Одна команда создает статические файлы и помещает их в каталог html Nginx.

• использовать в командной строкеhexo generateКоманда может упаковать проект в статический файл, а каталог выходного файлаpublic;

• Следующий поставитьpublicСкопируйте все файлы в каталоге в NginxhtmlРазвертывание может быть завершено в каталоге, и после развертывания отображается следующее.

Суммировать

Пара с Hexohexo-theme-materyЧтобы создать блог-сайт, нужен не только красивый интерфейс, но и мощный. Если вы хотите создать свой собственный блог-сайт, это отличный выбор!

использованная литература

• Официальный сайт темы hexo-theme-matery:GitHub.com/blink buddha/и…
• официальный сайт hexo:hexo.io/zh-cn/

адрес проекта

GitHub.com/blink buddha/и…

Эта статьяGitHubGitHub.com/macro-positive/…Он был записан, приветствую всех на Star!