Nobody の 博客

Appearance

Hexo 框架 ​

介绍 ​

使用 ​

快速搭建 ​

  • 快速搭建（以 butterfly 主题为例）
bash
# 安装 hexo
npm install -g hexo-cli

# 初始化
hexo init hexo-project & cd $_  # 方式 1
mkdir hexo-project & cd $_ & hexo init  # 方式 2

# 安装依赖
npm i

# 安装主题
# 非 butterfly，建议将 theme 中的 .git 删除
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 安装主题依赖
npm i hexo-theme-butterfly --save

# 将 CNAME 文件放入 source 目录，以解析域名
  • 目录结构
    • source/_posts/: post 文件夹；md 文档可直接全部放于此，也可归类成子目录再放于此
text
├── _config.yml   # 配置文件
├── package.json  # 应用信息
├── scaffolds/    # 模板文件夹
├── source/       # 源文件夹
|   └── _posts/   # post 文件夹
└── themes/       # 主题文件夹

  • 配置文件

    • _config.yml
    • themes/XXX/_config.yml

  • _config.yml 修改内容：

    • title：网站标题
    • subtitle：副标题
    • description：网站描述
    • keywords：网站关键词
    • author：作者
    • language：语言
    • timezone：时区
    • url：网址；https://username.github.io/repo（project page）
    • theme：主题；butterfly、hexo-theme-matery 等

  • _config.theme.yml 修改内容：自定义修改

常用命令 ​

Hexo 命令

bash
# 构建
hexo g  # hexo generate; npm run build
hexo g --watch  # 监视文件变动
hexo g --debug  # debug

# 实时预览
hexo s  # hexo server; npm run server
hexo s -p 5000  # 更改端口

# 部署
hexo d  # hexo deploy; npm run deploy
hexo g -d  # 构建后部署

# 清除缓存文件 db.json 和静态文件 public/
hexo clean  # hexo cl

部署 ​

  • 设置 _config.yml 中 deploy 选项（需安装 hexo-deployer-git 插件）
yaml
deploy:
  type: git
  # repo public private 都可以
  repository: [email protected]:username/repo.git
  branch: main
  • Github Actionsi：示例如下
yaml
name: Hexo deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - name: Use latest Node.js
        uses: actions/setup-node@v4
        with:
          node-version: latest
      - 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: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

插件 ​

hexo 使用记录 - 鹤翔万里的笔记本

  • hexo-generator-index/archive/category/tag：初始化 hexo 项目会自动安装；生成主页 / 归档 / 分类 / 标签文件夹

  • hexo-abbrlink：生成短链接，而非 post 中的 md 文件名

yml
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
  • hexo-blog-encrypt：文章加密，只需要在 md 的文件 Front Matter 加上：
yml
password: ...
  • hexo-generator-feed：生成 RSS 订阅 xml 文件
yml
feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  • hexo-generator-index-pin-top：文章置顶，只需要在 md 的文件 Front Matter 加上：
yml
top: true

  • hexo-algoliasearch 或 hexo-algolia：algolia 搜索；更美观（hexo butterfy，docusaurus 支持，mkdocs 将支持）

  • hexo-generator-search/searchdb：本地搜索设置

  • hexo-tag-publications：由 bib 文件生成论文统计与信息展示网页（可单个、全部论文）。

    • 在页面添加论文概要图片，在 bib 文件中的对应条目下添加 image 参数

主题相关设置 ​

  • butterfly 主题文章置顶 front-matter 参数：sticky，数值越大，置顶优先级越大
  • matery 主题文章置顶 front-matter 参数：top，数值为 true 或 false

butterfly ​

Butterfly - A Simple and Card UI Design theme for Hexo

  • 菜单栏 menu（分类、标签、存档；友链、关于、音乐、视频、相册等暂无必要）
  • 网站 logo、个人头像、social 相关信息
  • 代码
  • 目录
  • banner 图片
  • 文章封面（front-matter 中 cover 选项不填参数）
  • 评论系统
  • 搜索系统
  • 页面加载效果
  • post 元信息（分类、标签、时间、字数统计、需阅读时间等）
  • 侧边栏（butterfly）
  • Footer
  • 内容复制时、文章底部版权相关信息
  • 图片懒加载
  • 相册（暂无必要）
  • 右下角功能按钮（深/浅色切换，直达页面顶部等功能）
  • 添加音乐、视频页面（音乐可全局吸底）

matery ​

闪烁之狐

已解决/实现：

html
<!-- markdown 中插入 B 站视频语法格式 --> 
<div 
     style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe 
            src="//player.bilibili.com/player.html?aid=984726281&bvid=BV1Nt4y1n7hv&cid=807808976&page=1"
            scrolling="no" 
            border="0" 
            frameborder="no" 
            framespacing="0" 
            allowfullscreen="true" 
            style="position: absolute; width: 100%;height: 100%; left: 0; top: 0;"> 
    </iframe>
</div>

待解决/实现

版权所有 © 2024-2024 Nobody