Hexo中如何创建使用主题Pug布局的内容及迁移模板块？

嘿，作为Hexo新手能折腾Pug模板已经超棒啦！我来一步步帮你搞定这两个需求：

一、把themes/bootstrap4-starterkit的内容迁移到source目录 #

Hexo的资源加载优先级是根目录source > 主题目录source，所以迁移的核心是把主题里需要自定义的内容复制到根目录source，具体步骤如下：

• 复制主题静态资源：将themes/bootstrap4-starterkit/source/下的所有文件（比如css、js、images、favicon.ico这类静态文件），直接复制到Hexo根目录的source/文件夹中。这样后续你修改静态资源时，直接在根目录操作即可，Hexo构建时会优先使用这里的内容。
• 迁移自定义页面：如果主题的source文件夹里有about.pug、tags.pug这类页面文件，也一起复制到根目录source。之后你对这些页面的修改就不用再去主题文件夹里找了。
• 可选：迁移布局文件（按需）：如果你想完全自定义主题的布局逻辑，把themes/bootstrap4-starterkit/_layouts/下的Pug布局文件（比如layout.pug、page.pug、post.pug）复制到根目录的source/_layouts/文件夹。Hexo会优先加载根目录的布局文件，覆盖主题默认布局。

注意：主题文件夹本身不要删除，因为主题的核心配置和部分默认逻辑还是依赖它的。

二、创建使用主题Pug布局的Pug内容 #

不管是做页面还是写文章，核心都是通过Front-matter指定布局，再编写Pug内容，具体分两种场景：

1. 创建Pug格式的页面（Page） #

• 先用Hexo命令生成Pug页面：

  hexo new page --pug "about"
  

  这会在source/about/下生成index.pug文件。
• 打开这个文件，在顶部添加Front-matter指定主题布局，然后写Pug内容：

  ---
  layout: page  // 这里的`page`对应主题_layouts里的page.pug布局文件（不带.pug后缀）
  title: 关于我
  ---
  // 下面写你的Pug页面内容
  .container
    .row
      .col-md-8.offset-md-2
        h1= page.title
        p 这是我用Pug写的关于页面，是不是很简洁？
  

2. 创建Pug格式的文章（Post） #

• 用Hexo命令生成Pug文章：

  hexo new --pug "我的第一篇Pug博客"
  

  这会在source/_posts/下生成对应的.pug文章文件。
• 同样在文件顶部添加Front-matter指定布局，再写内容：

  ---
  layout: post  // 对应主题_layouts里的post.pug布局
  title: 我的第一篇Pug博客
  date: 2024-05-20 16:00:00
  tags: [Hexo, Pug, Bootstrap4]
  ---
  // 文章的Pug内容
  article.post
    h2= page.title
    .post-meta= page.date.format('YYYY-MM-DD')
    .post-content
      p 这是用Pug语法写的博客内容，配合Bootstrap4主题，排版超省心！
      p 你可以在这里自由嵌套Pug的标签和类名，Hexo会自动渲染成HTML。
  

小提示 #

如果你自己写了layout.pug这类全局布局文件，把它放到根目录source/_layouts/后，就可以在页面/文章的Front-matter里指定layout: layout来使用自定义布局啦。另外，用hexo server -w启动本地服务，它会自动监听所有文件变化并重新构建，比单独用pug -w index.pug更高效哦！

内容的提问来源于stack exchange，提问作者Michael Cole