【前端】打造自己的hexo博客_hexo一本通

今日更新完毕，建议关注收藏点赞！

打造自己的hexo blog

#需要安装git node.js 这里略

#安装hexo
npm install -g hexo-cli
npm install hexo
hexo help

#<folder>必须是空的
hexo init <folder>
cd <folder>
npm install

#文件结构如下
.
├── _config.yml #Site configuration file
├── package.json #Application data markdown默认安装
├── scaffolds #Scaffold folder.有各种脚手架
├── source #your site’s content 命名前有下划线的会被忽略 除了_posts
|   ├── _drafts #可渲染的文件如markdown html被放在public文件夹中
|   └── _posts
└── themes #主题

• _config.yml文件
  这里可以配置网站的名字、描述、语言、网址url，如果是中文则把en改为zh
  对应的文件放在对应的文件夹中
  
• 操作

#layout默认有三种
#post 文章
#draft 草稿
#page 静态页面

hexo new [layout] <title> #layout为空表示默认布局 draft为草稿布局
#title不可空 
#默认情况将会创建一个标题名称的文件夹以及里面有index.md
#可以指定path
hexo new page --path about/me "About me" #source/about/me.md

#用脚手架
hexo new photo "My Gallery" #使用脚手架layout名为photo，这个是在scaffords/photo.md

hexo generate #生成静态文件
hexo deploy #部署到网站
hexo server #开启本地服务器 默认是http://localhost:4000/

hexo list <type> #列出所有路由

hexo migrate <type>#从别的博客系统移植内容过来

hexo publish [layout] <filename> #发表一份草稿 将草稿从_drafts->_posts文件夹
hexo --draft#显示source/_drafts中的草稿 默认不显示草稿

#支持iframe image link 链接到其他本站帖子 也支持html渲染
#也支持EJS (Embedded JavaScript)渲染
{% iframe url [width] [height] %}
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

{% link text url [external] [title] %}

{% post_path filename %}
{% post_link filename [title] [escape] %}

• Categories & Tags 分类与标签
  分类 和 标签 都是通过文章的 Front Matter（文章头部信息）来设置的。你可以在每篇文章的 Markdown 文件中定义这些信息。

---
title: "My Post"
date: 2025-02-08 10:00:00
categories: 
  - Programming
tags: 
  - JavaScript
  - Hexo
---
This is the content of my post.

在主题模版中显示分类和标签，你可以在文章页的模板文件（比如 themes/your-theme/layout/_partial/post.ejs）中添加以下内容来显示分类和标签：

<!-- 含EJS (Embedded JavaScript) 模板语言 -->
<p class="categories">Categories: <%= page.categories.join(', ') %></p>
<p class="tags">Tags: <%= page.tags.join(', ') %></p>

• 代码块 2种写法
  [url]部分会显示在代码块右上角

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}
or
`` [language] [title] [url] [link text] code snippet ``

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

• 主题
• • 使用一个其他主题，步骤：
    进入hexo项目/themes下，git clone 相应的主题，更改项目根目录下的_config.yml中的theme设置为新的名称，更改themes对应主题下的_config.yml，更改后不需要server重启,之后执行命令安装依赖、生成站点、启动本地服务器

npm install
hexo generate
hexo server  #http://localhost:4000
hexo deploy #部署到github pages

#安装部署插件hexo-deployer-git可以简化流程，自动化
npm install hexo-deployer-git --save
# Hexo 项目的根目录下，打开 _config.yml
deploy:
  type: git
  repo: https://github.com/your-username/your-username.github.io.git  # 你的 GitHub 仓库地址
  branch: main  # 或者 gh-pages
  message: "Update site"  # 提交信息，可以自定义
#每次更新后generate->deploy即可

#手工部署 新版的主题很多不支持这种方法【不推荐】
#使用 hexo generate（或 hexo g）命令生成静态文件，文件会放在 public/ 目录下。
# 把public/ 目录中的文件手动推送到 GitHub 仓库的main 分支。

现成的主题
现成的插件插件基本上都是js实现的，自己也可以试试，自己尝试指南
推荐>>这个github打卡墙插件

• 全站变量
• helpers
  辅助函数帮助您在模板中快速插入内容。 建议您把复杂的代码放在辅助函数而非模板中。辅助函数不能从 source 的文件中访问。自定义 helper 应该放在哪里？请放在 scripts/ 或 themes/< yourtheme>/scripts/ 目录中。

hexo.extend.helper.register(name, function () {
  // ...
});

hexo.extend.helper.register("js", function (path) {
  return '<script src="' + path + '"></script>';
});

#在我的自定义 helper 中使用另外一个已经注册的 helper
#所有的辅助函数都在同一个上下文中执行。 例如，在一个自定义的辅助函数中使用 url_for()
hexo.extend.helper.register("lorem", function (path) {
  return '<script src="' + this.url_for(path) + '"></script>';
});

#在另一个扩展（例如过滤器、注入器）中使用注册的helper
#hexo.extend.helper.get 会返回一个指定名字的 helper，但是你还需要一个 bind(hexo)
const url_for = hexo.extend.helper.get("url_for").bind(hexo);

• 如果我每次的帖子都遵循一个格式->使用scaffolds
  Hexo 提供了 Scaffolds 功能，它允许你为创建新帖子定义一个模板。当你通过 hexo new post 命令创建新文章时，Hexo 会自动应用这个模板。
  设置 Scaffolds：在 Hexo 项目的根目录下，进入 scaffolds/ 文件夹。这里有默认的文件模板（post.md）。
  你可以修改或创建新的模板。
  修改或创建模板文件scaffolds/post.md，如

---
title: {{ title }}
date: {{ date }}
tags:
  - example-tag
categories:
  - example-category
draft: true
---

## 介绍

这里是你的内容。

## 其他部分

你可以继续在这里添加你文章的其他内容。

{{ title }}：这将是你为文章输入的标题。
{{ date }}：这是文章创建的时间，Hexo 会自动替换成当前日期和时间。
tags 和 categories：你可以预定义一些常用的标签和分类。
draft: true：这个参数让文章处于草稿状态，只有在你发布时它才会显示在博客上。
创建新帖子时，使用命令hexo new post "Post Title"，Hexo 会自动使用这个模板。

#自定义字段 比如如下
summary: {{ summary }}  # 自定义字段：文章摘要
#当你创建新文章时，summary 字段会作为自定义字段自动生成，提示你输入摘要内容
#在 Hexo 的模板文件（如 layout/index.ejs 或 layout/post.ejs）中，使用 EJS 模板语法来引用这些自定义字段。
 <!-- 显示自定义字段 summary -->
 <p><strong>摘要：</strong> <%= page.summary %></p>

#如果你想手动输入或替换某些内容，在命令行执行时传入自定义变量，在命令后加上-- 选项
hexo new post "My New Post" --tags "hexo, blog" --category "tutorial"

设置完之后要hexo clean 重启一下hexo

自定义scaffold:js自动加载checkbox选中与否

scaffolds文件夹下新增report.md

---
title: {{ title }} #front-matter
date: {{ date }}
Catefories: daily_report
exercise: false
algorithm_p: false
algorithm_l: false
review: false
coding: false
knowledge: false

---

Checkbox `` markdown unfinished -[] finished -[x]``

# {{ title }}

- exercise 30min:<input type="checkbox" id="exercise" checked="{{ exercise }}">
- Algorithm:<input type="checkbox" id="algorithm_p" checked="{{ algorithm_p }}"> P <input type="checkbox" id="algorithm_l"  checked="{{ algorithm_l }}"> L
- Review:  <input type="checkbox" id="review" checked="{{ review }}">
- coding: <input type="checkbox" id="coding" checked="{{ coding }}">
- Knowledge:  <input type="checkbox" id="knowledge" checked="{{ knowledge }}">



<script> // 从 Hexo front-matter 中传递值 
  var exercise = '{{ exercise }}'; 
  var algorithm_p = '{{ algorithm_p }}'; 
  var algorithm_l = '{{ algorithm_l }}'; 
  var review = '{{ review }}'; 
  var coding = '{{ coding }}'; 
  var knowledge = '{{ knowledge }}'; 
  // 根据传递的值判断复选框是否选中 
  document.getElementById('exercise').checked = (exercise==='true') ; 	   
  document.getElementById('algorithm_p').checked = (algorithm_p==='true');
  document.getElementById('algorithm_l').checked = (algorithm_l==='true');
  document.getElementById('review').checked = (review === 'true'); 
  document.getElementById('coding').checked = (coding === 'true'); 
  document.getElementById('knowledge').checked = (knowledge === 'true'); 
</script>

hexo clean
hexo new report test --exercise true --review true
hexo g
hexo s
hexo delopy

挂载到自己的github主页

创建一个项目，命名为username.github.io（ username是github账号名），上传hexo博客文件，项目->settings->GitHub Pages->选择除了none的branch（不是main就是master 旧版仓库的主分支），这样username.github.io就可以加载网页了。

同时挂载其他仓库代码，设置如下：
编辑_config.yml，将url: 值改成to https://username.github.io/repository仓库名
Settings > Pages > Source到这个仓库里改成 GitHub Actions
提交到主分支，完成部署，访问username.github.io/repository就是这个项目的代码实现

如果需要提交之后自动部署 ：项目->settings->GitHub Pages->source->github actions选择
创建.github/workflows/pages.yml，并将下方代码放入内容，注意将nodejs版本20替换成你的node --version

name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
          # Ref: https://github.com/actions/setup-node#supported-version-syntax
          node-version: "20"
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

git push -u origin main #或者是master 总之是主分支

/public/文件夹默认不会被上传，确保.gitignore文件中包括public/行，整个文件结构应该近似于这个repo

设计自己的theme

Hexo 是一个基于 Node.js 的静态博客框架，它允许你自定义主题以便让你的博客看起来独特。设计一个主题需要一些前端开发的基础知识，尤其是 HTML、CSS 和 JavaScript。

theme的文件结构
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

layout文件夹中放的是主题的模版文件，决定了网站的样式
Templates决定了你网站的每一页的样式，详细了解
Scripts文件夹中hexo自动加载这里所有js文件，这也是plugins的基础
source文件夹放置CSS and JavaScript 等文件，忽略前面带_的文件和文件夹。
Hexo将处理并保存所有可渲染文件到public/文件夹，不可渲染的将直接copy到public/。
最后记得拿theme unit test工具测试一下是否全部都可以正常工作，创作好后可以看一下贡献提交部分

• 创建一个主题文件夹，在 Hexo 的 themes 文件夹下创建一个新的主题文件夹
  设计主题的基本结构，主题文件夹的基本结构大致如下：

mytheme/
├── _config.yml  # 主题的配置文件
├── layout/      # 页面布局模板文件
├── source/      # 静态资源（如图片、字体、CSS、JS）
├── languages/   # 多语言支持
├── package.json # 主题的包管理文件
└── scaffolds/    # Hexo 页面的模板文件

_config.yml：你可以在这里配置主题的参数，比如站点的名称、颜色方案、社交媒体链接等。
layout/：包含页面布局模板（如首页、文章页、404 页面等）。
source/：包含你主题的静态资源（如 CSS、JavaScript、图片等）。
scaffolds/：包含 Hexo 自动生成页面时所用的模板。

• 编辑 _config.yml 文件
  打开 mytheme/_config.yml，你可以设置一些基础的主题参数。

# 主题名称
name: My Theme

# 站点标题和描述
title: My Awesome Blog
subtitle: A blog built with Hexo

# 配置社交媒体链接
github: https://github.com/yourprofile
twitter: https://twitter.com/yourprofile

• 设计页面布局（HTML + EJS）
  Hexo 使用 EJS（Embedded JavaScript）模板引擎来生成页面，因此你需要在 layout/ 目录下创建 EJS 文件。比如，layout/_partial/ 文件夹通常包含了头部、尾部、导航栏等公共部分。
  示例：layout/index.ejs（首页模板）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= config.title %></title>
  <link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
</head>
<body>
  <header>
    <h1><%= config.title %></h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <%= body %>
  </main>
  <footer>
    <p>© 2025 My Awesome Blog</p>
  </footer>
</body>
</html>

<%= config.title %>：会渲染 _config.yml 中定义的站点标题。
<%= body %>：会渲染页面内容（文章、首页列表等）。

• 添加样式和交互功能
  在 source/css/ 中创建你的 CSS 文件（例如 style.css），然后在模板文件中引用它。

/* source/css/style.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}

header {
  background: #333;
  color: #fff;
  padding: 10px;
}

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

在 layout 中链接 CSS：

<link rel="stylesheet" href="<%= url_for('/css/style.css') %>">

开发其它页面和功能：除了首页，你可能还需要为不同的页面（如单篇文章、归档、标签等）设计模板。你可以在 layout/ 中添加对应的 EJS 文件，例如：
layout/post.ejs：单篇文章页面模板。
layout/404.ejs：404 错误页面。

• 调试和预览主题
  完成主题设计后，你可以在 Hexo 根目录运行以下命令来启动本地服务器，预览你的博客：hexo server，打开http://localhost:4000
• 部署到线上
  一旦你设计好了主题并测试通过，可以将主题与内容一起发布到你的博客托管平台（例如 GitHub Pages、Netlify、Vercel 等）。
  你可以在 Hexo 配置文件 _config.yml 中设置 deploy 部分：

deploy:
  type: git
  repo: https://github.com/yourusername/yourblog.git
  branch: gh-pages

hexo deploy

• tips
  模块化设计：尽量将 CSS 和 JavaScript 模块化，这样可以方便后续修改和维护。
  响应式设计：确保你的主题在不同屏幕大小下都能良好显示，使用媒体查询（media queries）来处理不同设备的布局。
  优化性能：尽量压缩 CSS 和 JavaScript，减少图片体积，提升页面加载速度。
  调试工具：你可以使用 Chrome DevTools 或其他调试工具来调试你的主题和页面样式。