一、说在前面
1. 内容:
- Hexo文件夹结构。
- Yaml编写配置文件
- markdown编写博客文章。
2. 表现:
- Hexo模板引擎生成工具。
- 独立的个性化Theme。
3. 发布&访问:
- Git版本控制。
- Github Pages。
- 绑定自已域名。
二、内容
1. Hexo文件架构。
.
├── node_modules:#依赖包-安装插件及所需nodejs模块。
├── public #最终网页信息。即存放被解析markdown、html文件。
├── scaffolds #模板文件夹。即当您新建文章时,根据 scaffold生成文件。
├── source #资源文件夹。即存放用户资源。
| └── _posts #博客文章目录。
└── themes #存放主题。Hexo根据主题生成静态页面。
├── _config.yml #网站的配置信息。标题、网站名称等。
├── db.json:#source解析所得到的缓存文件。
├── package.json # 应用程序信息。即配置Hexo运行需要js包。
2. Yaml配置文件
- Yaml是专门用来写配置文件。即:一种通用的数据串行化格式。
- 基本规则
大小写敏感。
使用缩进表示层级关系。
缩进时不允许使用Tab键,只允许使用空格。
缩进的空格数目不重要,只要相同层级的元素左侧对齐即可。
- Hexo配置文件:
- 根目录:站点基本信息、写作格式、Github部署等。
- 主题目录:站点导航、插件等信息。
3. Markdown
- 优势:记住简单几个语法,无需关注排版。
- 相关参考:
三、表现
1. Hexo模板引擎生成工具
- 作用:界面同数据分离,模板内容替换指定地方数据,实现业务和逻辑代码分离。
- 模板:Hexo默认用ejs,其他工具swig,jade等。
- 解析:md文件、layout布局调用其他文件。高代码复用性,最终生成Html页面。
2. 独立的个性化Theme
- hexo g
- 遍历主题下source目录,即css/fonts/js等文件,建立索引。
- 根据索引把主题文件生成到public中,即html文件,网页根目录。
- hexo d
- 将public中html通过git方式push到github上指定分支。也可部署到自己服务器。
- node_modules中对hexo各类页面渲染
- markdown到html示例
渲染过程 | 输入 | 模板引擎 | 输出 |
---|---|---|---|
First | source目录下文件 | yml和markdown | article对象, article:{title:date:tags:categories:...} |
Second | 第一次渲染生成article对象,themes目录下文件 | ejs/jade/等取决于themes/layouts目录下格式 | public目录及下的文件 |
网友评论