hexo的目录结构及作用

今天来整理一下hexo的目录结构,了解hexo每个目录的作用,并且设置全局配置文件_config.yml的相关参数,初步定义属于你自己的博客。我们开始吧!

1.主目录结构

主目录,简洁明了

|-- _config.yml
|-- package.json
|-- scaffolds
|-- scripts
|-- source
   |-- _drafts
   |-- _posts
|-- themes

2.主目录介绍

_config.yml

全局配置文件,网站的很多信息都在这里配置,诸如网站名称,副标题,描述,作者,语言,主题,部署等等参数。这个文件下面会做较为详细的介绍。

package.json

hexo框架的参数,如果不小心把它删掉了,没关系,新建一个文件,讲内容写入文件,保存就OK了。里面的参数基本上是固定的,如下:

{
  "name": "hexo",
  "version": "2.4.5",
  "private": true,
  "dependencies": {}
}

参数也很容易理解,一看就明白,该文件基本上也不需要操作,就不多解释了。

scaffolds

scaffolds是“脚手架、骨架”的意思,当你新建一篇文章(hexo new 'title')的时候,hexo是根据这个目录下的文件进行构建的。基本不用关心。

scripts

脚本目录,此目录下的JavaScript文件会被自动执行。

source

这个目录很重要,新建的文章都是在保存在这个目录下的,有两个子目录:_drafts_posts。需要新建的博文都放在_posts目录下。

_posts目录下是一个个markdown文件。你应该可以看到一个hello-world.md的文件,文章就在这个文件中编辑。

_posts目录下的md文件,会被编译成html文件,放到public(此文件现在应该没有,因为你还没有编译过)文件夹下。

themes

网站主题目录,hexo有非常好的主题拓展,支持的主题也很丰富。该目录下,每一个子目录就是一个主题,我的子目录如下:

|-- landscape
   |--
|-- light
   |--

我装了两个主题,landscape是我这个hexo版本的默认主题,我自己下载了一个light主题。其实light也是之前版本的默认主题。我使用的的light主题。

你也可以自己下载主题放到该文件下,hexo主题传送门

主题目录下我们可以进行很多自定义的操作,诸如,给网站添加微博秀、添加评论组件、添加分享组件、添加统计等等,让自己的博客网站更丰富、有趣、实用。

themes目录结构及优化自己的博客,这些内容我会在下一篇博文中介绍。

3._config.yml文件

_config.yml文件的作用上面已经讲过了,下面先呈现以下_config.yml文件中的内容,并对主要参数做简单的介绍

# Hexo Configuration
## Docs: http://zespia.tw/hexo/docs/configuration.html
## Source: https://github.com/tommy351/hexo/

# Site    #站点信息配置
title: 浪花一朵朵        #网站标题
subtitle: 技术是海,深不见底;生活是洋,广不着边;而我如浪花,清澈透明并且舞动双手,仰望天空。        #网站副标题
description: 浪花一朵朵        #网站描述,网站上不会显示出来,但搜索引擎会用到改字段
author: 员员        #作者
email: syxiaqj@gmail.com    #联系邮箱
language: zh-CN        #语言,简体中文当然用zh-CN

# URL    #部署到公网,信息配置,后面介绍如何将网站部署到git上时介绍此信息
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://syxiaqj.github.io    
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

# Directory
source_dir: source
public_dir: public

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination        #启用分页
## 1: Disable pagination    #不启用分页
## 0: Fully Disable            #完全不可见
archive: 1
category: 1
tag: 1

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus
disqus_shortname:
# Extensions
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: light        #使用的主题名称
exclude_generator:
plugins:            #插件列表
- hexo-generator-feed
- hexo-generator-sitemap

# Markdown
## https://github.com/chjj/marked
markdown:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

# Deployment        #部署到公网配置,后面介绍部署到git上时再详细介绍
## Docs: http://zespia.tw/hexo/docs/deployment.html
deploy:
  type: github
  repository: https://github.com/syxiaqj/syxiaqj.github.io.git    

先不要急于修改其他参数,我们文件中的第一部分Site(站点信息),很容易改,还有主题,在Extensions中的theme:参数,这个参数的值就是hexo主目录中themes(主题目录)下子目录文件夹的名称(主题)。

建议先设置成light,因为我都会以light主题为例做较为详细的介绍

4.后记

好了,本地运行一下

1
hexo server

浏览器访问localhost:4000/,网站的标题,副标题等信息是不是都已经更改了!恭喜你,对自己的博客网站的简单的全局设置已经成功了。

下一篇会详细介绍一下light主题,主题的目录结构,文件关联,并对网站添加更多有意思、并且也很实用的功能。