在寻找Hexo主题时, 发现了一款极其简洁的主题apollo, 这款主题代码量不多, 视图引擎使用的是pug(原名jade), 本文主要讲述进行Hexo主题开发和对主题的理论部分

主题下载和环境配置

git clone https://github.com/achjqz/hexo-theme-apollo.git apollo
cd apollo
npm install
npm install --global gulp-cli

主题用到的所有依赖包都是gulp相关的, gulp可以使开发者更方便的编写css文件

主题目录结构介绍

catalog

docs文件夹

这个文件夹是自己新建的, 存放主题的配置文档说明, 可有可无

languages文件夹

根据Hexo官网的说明, 在此文件夹下配置多语言文件,可以让网站以不同语言呈现

例如, 配置en.ymlzh-Hans.yml文件可以支持英语和中文

# en.yml
more: ...more
# zh-Hans.yml
more: ...阅读更多

在模板中, 使用 __ 或 _p 辅助函数, 即可取得翻译后的字符串, 前者用于一般使用;而后者用于复数字符串

a.read-more(href= url_for(item.path))!= __('more')

layout文件夹

该文件夹存放的就是博客页面的布局文件, 根据需求, 至少存在index, post, archive 三个页面

模板 用途 回退
index 首页
post 文章 index
page 分页 index
archive 归档 index
category 分类归档 archive
tag 标签归档 archive

source文件夹

该文件夹下主要存放css文件, js文件, 图片资源等

_config.yml文件

主题配置文件, 其中定义的变量在模版中可通过theme.xxx获取

Hexo博客目录下也有同样的配置文件, 可以覆盖主题中定义的变量

gulpfile.js 文件

执行gulp命令后执行的脚本, 可以将scss打包成css并监控文件变化, 后文会详细讲解

布局语法和样式语法

pug语法了解

  1. html标签, 注意缩进

    div
    p Hello, world!
    p Hello, pug.
  2. 定义class或id

    h1.title Test class title
    h1#title Test id title
  3. 标签属性, 存放于括号内

    img#name.class1.class2(src="/test.png" alt="test")
  4. 包含,方便代码复用

    doctype html
    html(lang='en')
    include _partial/head.pug
  5. 继承, 方便模块化编写

    //- base.pug
    html
    head
    block title
    body
    block content
    //- index.pug 使用extends继承以上模板,通过block覆盖或替换原有块block
    extends base.pug

    block title
    title "Test title"

    block content
    h1 Hello world!
    block article
  6. 定义变量

    //- 通过`- var`定义
    - var intData = 100
    - var boolData = false
    - var stringData = 'Test'
    //- 通过`=`引用
    p.int= intData
    p.bool= boolData
    p.stringData= stringData
    //- 通过`#{}`连接其他字面量
    p #{stringData} is so good!
  7. 条件结构

    if A
    ...
    else if B
    ...
    else
    ...
  8. 迭代

    ol
    each item in ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
    li= item
  9. Mixin 用于编写函数

    //- 定义函数
    mixin menu-item(href, name)
    li
    span.dot ●
    a(href=href)= name
    //- 调用函数
    +menu-item('/About','About')
  10. Javascript

    script(type='text/javascript').
    var data = "Test"
    var enable = true
    if enable
    console.log(data)
    else
    console.log('nothing')

scss介绍

scsscss关系
scss 是 css的预处理器, 它的优势在于开发效率高, 对于一些样式复杂的站点, 用 scss 之类的工具生成代码比手写 css 快得多

在这里我们通过gulpscss转化为压缩的css, 即我们只用维护几个碎片的scss文件, 而不是直接修改css文件

Hexo的变量

在模版中为了渲染出具体的内容需要使用Hexo中的变量

变量非常多, 建议看官方文档按需使用

Hexo的函数

在模版中也可以使用Hexo提供的函数, 可进行一些判断或作为工具

函数也非常多, 建议看官方文档按需使用


至此, 理论部分已经讲解完成, 下一篇实践篇将利用这些知识以实际例子讲述如何开发和修改主题

转载申请

知识共享许可协议

本文知识共享署名 4.0 国际许可协议进行许可,转载时请注明原文链接