利用Hexo和Github Pages搭建自己的博客（2）

最新推荐文章于 2024-09-28 14:19:40 发布

LinuxWin232

最新推荐文章于 2024-09-28 14:19:40 发布

阅读量664

点赞数 12

分类专栏： Hexo 文章标签： github

本文链接：https://blog.csdn.net/2301_79144270/article/details/141647679

版权

Hexo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.准备工作

一个hexo博客
一个已经部署好hexo的github仓库
一个代码编辑器（推荐vscode）

2.安装hexo主题(以solitude为例)

2.1 安装主题

在[BlogRoot]输入以下命令：

git clone -b main https://github.com/everfu/hexo-theme-solitude.git themes/solitude

2.2 应用主题

在[BlogRoot]下的_config.yml把第99行的内容改成以下内容：

theme: solitude

除此之外还要安装Pug和Stylus的渲染器。

npm install hexo-renderer-pug hexo-renderer-stylus --save

然后把主题的配置文件复制到博客根目录下。

Linux/mac：

cp -rf ./themes/solitude/_config.yml ./_config.solitude.yml

windows:

copy .\themes\solitude\_config.yml .\_config.solitude.yml

3.配置站点和主题

具体可以去主题官方文档看看

3.1 站点配置

_config.yml:

# Site
title: # 博客标题
subtitle: '' # 博客子标题
description: '' # 博客简介
keywords: # 博客关键词
author: # 站点作者
language: # 站点语言（默认是en）
timezone: '' # 时区

_config.solitude.yml:

# 站点设置
# Site settings
site:
  # Logo
  name:
    # 显示类型 （i_class/text/img）
    # Display type (i_class/text/img)
    class: text
    # 具体内容 例如：solitude st-logo / Efu / /img/logo.png
    # Specific content, for example: solitude st-logo / Efu / /img/logo.png
    custom: Solitude
  # 网页 Icon
  # Web icon
  siteIcon: /img/pwa/favicon.ico
  # 页脚的Logo、加载动画默认的logo
  # Logo in the footer, default logo for loading animation
  icon: /img/pwa/favicon.ico

3.2 导航栏配置

左上角group：

# 导航栏左侧
# Left side of the navigation bar
group:
  # 分类名称: 链接地址 || 图标
  # Category name: link address || icon
  项目:
    # 子菜单名称: 链接地址 || 图标
    # Submenu name: link address || icon
    Solitude: https://github.com/everfu/hexo-theme-solitude || https://7.isyangs.cn/1/65eb200ee4dea-1.png

中间菜单：

  menu:
    Home: / # name: link
    Article: # name
      Archives: /archives/ || fas fa-folder-closed # item name: link || icon
      Categories: /categories/ || fas fa-clone
      Tags: /tags/ || fas fa-tags
    Friends:
      Moments: /moments/ || fas fa-wifi
      Links: /links/ || fas fa-user-group
      Treasure: javascript:travelling() || fas fa-gift
    Myself:
      Equipment: /equipment/ || fas fa-laptop
      Toobox: /tlink/ || fas fa-toolbox
      Music: /music/ || fas fa-music
    About: /about/

右上角按钮：

  right: # right button
    random: false # Random article
    custom:
    #  - name: Start # name
    #    url: https://www.travellings.cn/go.html # Jump link
    #    icon: fas fa-train # Icon
    #    onclick: # Click event
    #    id: travellings_button # id

3.3 首页顶部配置

# 首页顶部样式
# Home top style
hometop:
  enable: false # 是否打开 / if enable
  # banner display
  banner:
    # 左上角显示大文字
    # Large text displayed in the upper left corner
    # tip：可使用html标签
    # tip: html tags be used
    title: 宁静致远<br>热爱生活
    # 左上角显示小文字
    # Small text displayed in the upper left corner
    url: Hexo Theme Solitude
    # 轮播icon
    # Carousel icon
    # tip: 76x76 size
    icon:
      # HTML: # 名字 / Name
      #   img: https://7.isyangs.cn/34/65f2e42921677-34.png # 图片 / Image
      #   color: "#e9572b" # 背景色 / Background color
      # JS:
      #   img: https://7.isyangs.cn/34/65f2e43ceddda-34.png
      #   color: "#f7cb4f"
      # Docker:
      #   img: https://7.isyangs.cn/34/65f2e45462045-34.png
      #   color: "#57b6e6"
      # Flutter:
      #   img: https://7.isyangs.cn/34/65f2e47acbe98-34.png
      #   color: "#ffffff"
      # WebPack:
      #   img: https://7.isyangs.cn/34/65f2e488bf8ed-34.png
      #   color: "#2e3a41"
      # Git:
      #   img: https://7.isyangs.cn/34/65f2e499066fa-34.png
      #   color: "#df5b40"

  # 左下跳转按钮
  # Banner lower left jump button
  group:
    # 热门: /tags/热门/ || st-fire-fill || linear-gradient(to right,#f65,#ffbf37)
    # 教程: /tags/教程/ || st-book-mark-fill || linear-gradient(to right,#358bff,#15c6ff)
    # 精选: /tags/精选/ || st-star-smile-fill || linear-gradient(to right,#18e7ae,#1eebeb)

  # 右侧置顶列表（在文章的front matter中添加“recommend: true”）
  # Right top list (add "recommend: true" in the front matter of the article)
  recommendList:
    # 左上角显示文字
    # Large text displayed in the upper left corner
    sup: 置顶
    # 左下角大字
    # Large text in the lower left corner
    title: Solitude 主题文档
    # 点击跳转链接
    # Click the jump link
    url: https://solitude.js.org/
    # 显示背景图片
    # Display background image
    img: /img/default.png
    # 阴影颜色
    # Shadow color
    color: none

3.4 本地搜索

在`[BlogRoot]输入以下命令：

npm install hexo-generator-search --save

然后回车，在_config.yml最底端添加以下内容：

search:
  path: search.xml
  field: post
  content: true

然后在主题配置文件开启搜索功能。

# 搜索
# search
# warning：开启前需要安装搜索插件
# warning: You need to install the search plugin before turning it on
search:
  enable: true
  type: local # 选择local
  # 推荐标签
  # Recommended tags
  tags:
  # - Solitude
  # - Hexo
  algolia:
  # hits:
  # per_page: 6
  local:
    preload: false
    CDN: