关于java:简直神器一键生成靓丽的博客网站真香

27次阅读

共计 6735 个字符，预计需要花费 17 分钟才能阅读完成。

作为程序员，如果你喜爱输入技术文章的话，肯定有过搭建集体博客网站的想法。比照了好多博客框架之后，我发现 Hexo+hexo-theme-matery主题搭建的博客网站，不仅界面丑陋，而且功能强大。明天带大家应用 Hexo 搭建一个靓丽的博客网站，心愿对大家有所帮忙！

SpringBoot 实战电商我的项目 mall（50k+star）地址：https://github.com/macrozheng/mall

Hexo 是一个疾速、简洁且高效的博客框架。咱们能够应用 Markdown 写文章，而后通过 Hexo 生成动态网站，Hexo 的主题十分丰盛，很多你见过的博客都是用它生成的。

应用 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-theme-matery。

首先下载主题，并解压到我的项目的 themes 目录下，下载地址：https://github.com/blinkfox/h…

批改我的项目根目录下的配置文件 _config.yml，该文件为 Hexo 的整体配置，将theme 属性改为hexo-theme-matery；

theme: hexo-theme-matery

批改胜利后，咱们重新启动我的项目，再看下首页，果然页面丑陋了很多，拜访地址：http://localhost:4000/

当然 _config.yml 文件不仅能够改主题，还有很多网站配置也是能够更改的，比方网站配置、网址配置、首页配置等。

# 网站配置
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 中的个人信息进行配置；

# 首页 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 生成网站既疾速又简略，一个命令生成动态文件，而后搁置到 Nginx 的 html 目录下即可。

在命令行应用 hexo generate 命令能够将我的项目打包成动态文件，输入文件目录为public；

接下来把 public 目录下的所有文件复制到 Nginx 的 html 目录下即可实现部署，部署后显示内容如下。

应用 Hexo 搭配 hexo-theme-matery 来搭建博客网站，不仅界面丑陋，而且功能强大。如果你想搭建本人的博客网站，这是个很好的抉择！

hexo-theme-matery 主题官网：https://github.com/blinkfox/h…
hexo 官网：https://hexo.io/zh-cn/

https://github.com/blinkfox/h…

本文 GitHub https://github.com/macrozheng/mall-learning 曾经收录，欢送大家 Star！

正文完

java

发表至： java

2021-09-23

0

关于java:如何集成开源图表及报表到自研项目中

Android90AudioPolicy之audiopolicyconfigurationxml解析一

线程处理二三事一

关于java:泛型的介绍

关于python:Python函数式编程系列001无副作用

关于java:简直神器一键生成靓丽的博客网站真香

Hexo 简介

hexo-theme-matery 主题

成果演示

搭建

配置

Hexo 整体配置

增加固定页面

主题配置

编写文章

部署

总结

参考资料

我的项目地址

站内搜索