Re:从零开始的Hexo搭建个人博客(二)

本章主要讲博客的个性化,譬如站点的基本配置(语言、头像、站点图标等)、安装新的Hexo主题(Next主题)以及主题的配置。

1. 修改站点配置

打开站点配置文件 ,找到:

# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone:

根据自己的需要去修改上边的配置,这些配置的注释如下:

# Site
# 站点标题
title: Hexo
# 站点副标题
subtitle:
# 站点描述
description:
# 站点关键词
keywords:
# 站点主人
author: John Doe
# 站点语言
language:
# 站点时区
timezone:

1.1 language

目前 NexT 支持的语言如下:

语言 language
English en
简体中文 zh-Hans
Fran?ais fr-FR
Português pt或者pt-BR
繁體中文 zh-hk或者zh-tw
Русский язык ru
Deutsch de
日本語 ja
Indonesian id
Korean ko

1.2 timezone

Hexo 默认使用电脑的时区,也可以自己配置,比如:

UTC+8

2. 安装新主题

Hexo有很多大佬开发的主题,很多人使用的是Next主题,该主题也确实挺简洁好看的,新版本的Next主题还可以选择四个主题。

那么怎么安装新的Hexo主题呢?

在我们的Hexo项目路径下,可以看到有个 themes 文件夹,这个文件夹就是用于存放主题文件的。

2.1 下载 Next 主题

首先在Hexo项目的路径下打开命令窗口,如果你没有配置好Git的环境变量,请使用Git Bash。

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

注意,当前路径是你的Hexo项目根目录,使用上边的命令才能正确地将 Next 主题clone到themes文件夹下的next文件夹里。

接下来你会看到 themes 下多了个 next 文件夹,点进去你会看到个.git文件夹,将该文件夹删掉,否则到时候你无法将整个完整的Hexo项目push到GitHub上。

2.2 启用 Next 主题

在Hexo项目中,有两个重要的配置文件 _config.yml;这两个配置文件一个在项目根目录下,一个在主题目录下。

前者是站点配置文件,后者是主题配置文件,顾名思义,一个是Hexo项目的配置选项,一个是主题文件的配置选项。

打开站点配置文件,用Windows自带的笔记本是无法打开该文件的,请使用其他的编辑器来打开,常见的编辑器有Notepad++,UltraEdit,EditPlus等。

在站点配置文件中,找到:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

默认的博客主题就是这个,我们将其修改为next;这里的主题是指在 themes 文件夹下的对应主题的文件夹名字。

注意,在配置文件中所有的属性的值,都必须和前边的 : 之间留一个空格。比如下边的写法就是错误的,不加上空格的话会出错。

theme:landscape

2.3 选择对应主题的外观 Scheme

打开主题配置文件,找到下边的选项:

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

默认会使用Muse作为Next主题的外观,通过将某个scheme前边的#去掉来启动某个外观,如下:

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2.4 验证新主题

依然是老操作——启动调试模式服务器:

hexo s --debug

启动成功后,使用浏览器访问http://localhost:4000/,看看博客能否访问成功。

3. 修改 Next 主题配置

主题配置文件 _config.yml 位于 themes\next 之下。

3.1 头像设置

打开主题配置文件,找到如下:

# 侧边栏头像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
# 头像的路径可以放在主题对应文件夹的source里,也可以放在站点根目录的source里,建议放在站点路径上
#avatar: /images/avatar.gif

将avatar前边的#去掉,接着配置图片的路径即可。

3.2 网站图标

打开主题配置文件,找到如下:

# 将你的网站图标放到`{站点根目录}/source/` (推荐)或者`hexo-site/themes/next/source/images/`目录下
# 默认的Next主题的网站图标放在`{站点根目录}/themes/next/source/images/`目录下
# 如果你想将自己的网站图标放到`{站点根目录}/source/`根目录下,必须将`/images`从路径中去掉
# 如果你将网站图标放到了`{站点根目录}/source/images`路径下,需要令网站图标的名字和`{站点根目录}/themes/next/source/images/`路径下的网站图标不同,否则网站图标会使用后者的同名图标
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

这里需要注意的是,网站图标一般是.ico或者.gif的类型,而且图标的大小一般只有几k而已,可以使用下边的网站制作个人的网站图标,建议先将原本的图标弄成正方形的。

在线制作ico图标

3.3 菜单设置

打开主题配置文件,找到如下:

# 如果该站点是运行在子目录之下(比如:domain.tld/blog;这里的blog就是指我们的博客,前边的是上一级的域名),需要将路径前的斜杠去掉(/archives -> archives;即是将原本的绝对路径改成了相对路径)。
# 用法:`Key:/link/ || 菜单图标`
# Key就是菜单名,如果对该菜单名进行了国际化,即将其翻译放到对应的languages文件夹中,将会根据你设置的语言进行加载对应的菜单名翻译;如果没有设置翻译,则会使用这里的Key作为菜单名。这里的Key是大小写敏感的。
# 在`||`分隔符之前的值是该菜单对应的路径
# 在`||`分隔符之后的值是FontAwesome的图标(不懂的请百度什么是FontAwesome以及其用法),如果不指定图标,将会自动使用question这个图标。

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

使用方法很简单,依然是将需要展示的菜单的前边的#去掉就行,更加具体的操作信息我已经在上边的注释中给出了。

3.4 标签分类

首先我们需要新建页面,在站点根目录打开命令窗口,分别输入命令:

hexo n page "categories"
hexo n page "tags"
hexo n page "about"

接着你会发现在根目录的 source 目录下多出了上边的三个文件夹,里面各自有一个 index.md 文件。如果之前我们将menu里的categories,tags,about三个菜单解开了封印,那么在创建好这三个页面后就可以成功访问到,否则会报404请求错误。

3.5 社交链接

# 如果不指定图标,会默认使用globe图标
#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:[email protected] || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

老规矩,去掉#注释就可以启动。

原文地址:https://www.cnblogs.com/yulinlewis/p/hexo-blog-2.html

时间: 2024-08-02 22:50:05

Re:从零开始的Hexo搭建个人博客(二)的相关文章

Re:从零开始的Hexo搭建个人博客(三)

本章讲的是如何将本地的个人项目远程部署到 GitHub Pages,涉及到GitHub的项目仓库.Git的使用,以及Hexo的远程部署等. 1. 安装 hexo-deployer-git 插件 想要将Hexo项目部署到 GitHub上,需要先安装一个插件.在Hexo项目的根目录打开命令窗口,输入: npm install hexo-deployer-git --save 2. GitHub上创建一个仓库 仓库的名字可以随便起,不过这个仓库是作为我们的博客仓库的,所以尽量将名字以 {usernam

使用Hexo搭建GitHub博客(2018年Mac版)

关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Github Pages和Hexo简明教程 - Ryane的个人页面 - 开源中国 GitHub+Hexo 搭建个人网站详细教程 ※ 为了更优质的排版视觉效果,欢迎移步到简书浏览:使用Hexo搭建GitHub博客(2018年Mac版) 十万个为什么 什么是Hexo 度娘谷歌搜索了Hexo各种资料解说,个人感觉

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护.但是该主题的原生态,可能或多或少不满足我们当前的需求,因此需要我们对其进行优化,达到我们想要的效果. 因此这篇文章和下篇文章主要就是针对主题的优化进行书写的. 注意事项 1.优化完毕或者新建博客后需要 hexo g 生成静态文件: 2.然后重新启动服务,使用命令 hexo s -p 80 3.浏览器

Linux下使用 github+hexo 搭建个人博客04-next主题优化

上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功能和所想的风格. 可参考网站 http://theme-next.iissnan.com/getting-started.html 主题设定 选择 Scheme 修改 next 主题配置文件. 1 [[email protected] next]# pwd 2 /app/softinsall/hex

Hexo搭建个人博客(一)— 前期准备

最近几个月自学python的过程中,搜索爬虫资料的时候关注了xlzd的博客,为我开启了一片新世界,之后慢慢收藏了各方高人的博客.搭建一个自己博客的萌芽也悄然种下,也许是命运使然,在逛知乎的时候偶然间看到如何使用10个小时搭建出个人域名而又Geek的独立博客?,得到了浇灌的萌芽开始茁壮生长.经过几天不懈的没日没夜的努力,解决了各种问题(ps:因为一个bug曾让我一度对自己感到绝望),终于把自己的博客搭建成功.接下来我就把我走过N多弯路后的经验传授给大家,让大家少走弯路轻松愉快地搭建自己的Hexo博

GitHub与Hexo搭建个人博客

GitHub与Hexo搭建个人博客 安装node.js ? 自己百度 安装Git ? 自己百度 创建GitHub仓库 安装hexo ? npm install -g hexo-cli 新建文件夹 初始化文件夹 ? hexo init 安装依赖包 ? hexo install 安装hexo-deployer-git ? npm install hexo-deployer-git --save 在 _config.yml 文件中配置如下 把项目部署到github中的lsqstudy.github.i

基于Hexo搭建个人博客网站

## 准备工作 首先下载[nodejs](https://nodejs.org/en/download/),一路next安装即可.验证是否安装成功: ```bash node -v # 输出 v10.15.1 npm -v # 输出 6.8.0 ``` 接下来更改npm的安装源,这能大大加快安装包的速度. ```bash npm get registry # 输出默认源 https://registry.npmjs.org/ npm config set registry http://regi

github page 和 hexo 搭建在线博客

目录: 安装node.js与git 常用git命令 安装hexo 配置hexo hexo发布到github 1.安装node.js和git工具 https://nodejs.org/en/ 直接下载安装Node.js,有的IDE自带node.js,比如vs2015. 控制台中输入npm查看node.jd是否安装完成 https://git-for-windows.github.io/ windows版的git https://desktop.github.com/ github for wind

hexo 搭建静态博客 + Next 主题配置

参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g 或者可以局部安装 hexo npm install hexo -S 初始化博客 hexo init xxx 或者进入到一个空文件夹里,执行:hexo init 网站配置文件详解 # Hexo Configuration ## Docs: https://hexo.io/docs/configurat