Qi

Cogito ergo sum

0%

hexo自定义菜单

发表于 更新于 分类于 1.2k 5 分钟

nodejs 版本

需要考虑主题支持的版本范围，最好应大于10 小于 15，推荐使用12

参考官方文档 安装前提

安装hexo

1
2
3
npm install -g hexo-cli
npm install -g hexo 
环境变量配置 全局安装的目录

启动一个blog项目

1
2
3
4
5
6
7
8
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo new "postName"
hexo new page "pageName"
hexo generate
hexo server

主题配置

菜单项配置

新增页面

source 目录下新建 tags、categories、about文件夹

1
2
3
hexo new page "tags"
hexo new page "categories"
hexo new page "about"

博文的头部

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hello World
date: 2022/3/26 00:00:00
categories:
	- Java
tags: # 标签
	- Web
	- Server
---

摘要
正文

修改主题配置文件

theme/next/_config.yml

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

定制页面

Hexo的scripts目录下新增customcategory.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pagination = require('hexo-pagination');

const filteredCategory = '分析';

hexo.extend.generator.register('customcategory', function(locals){
  var analysisPosts = locals.posts.filter(function(x) {
    return x.categories.data[0].name == filteredCategory;
  });

  return pagination('analysis', analysisPosts, {
    perPage: 10,
    layout: ['customcategory']
  });
});

参考 hexo-pagination 的使用方式

定制模板

theme/next/layout 下新增 customcategory.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template with context %}
{% import '_macro/sidebar.swig' as sidebar_template with context %}

{% block title %}{{ __('title.category') }}: {{ page.category }} | {{ title }}{% endblock %}

{% block class %}category{% endblock %}

{% block content %}

  {######################}
  {### CATEGORY BLOCK ###}
  {######################}
  <div class="post-block">
    <div class="posts-collapse">
      <div class="collection-title">
        <h2 class="collection-header">
          {{- page.category }}
          <small>{{ __('title.category') }}</small>
        </h2>
      </div>

      {{ post_template.render(page.posts) }}
    </div>
  </div>
  {##########################}
  {### END CATEGORY BLOCK ###}
  {##########################}

  {% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

hexo常用命令

1
2
3
4
5
6
hexo init
hexo clean
hexo generate
hexo server
hexo deploy
(新版本支持首字母缩写命令，如 hexo g -> hexo generate)

hexo常用插件

插件地址: https://hexo.io/plugins/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"hexo": "^5.4.2",
"hexo-cake-moon-menu": "^2.5.0",
"hexo-abbrlink": "^2.2.1",
"hexo-asset-image": "^1.0.0",
"hexo-auto-category": "^0.2.1",
"hexo-calendar": "^1.0.6",
"hexo-cli": "^4.3.0",
"hexo-deployer-git": "^0.3.1",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-baidu-sitemap": "^0.1.9",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-search": "^2.4.3",
"hexo-generator-searchdb": "^1.4.1",
"hexo-generator-sitemap": "^3.0.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-marked": "^0.3.2",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-swig": "^2.0.0",
"hexo-server": "^0.3.3",
"hexo-theme-next": "^8.14.0",
"hexo-word-counter": "^0.1.0"

hexo note用法

https://hexo.io/zh-cn/docs/tag-plugins

配置部分

theme/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true #false时PC端不显示图标，但移动端仍会显示，故需要在标签语句中手动no-icon进行标注
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

执行模板

1
2
3
4
5
6
7
note.js
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.
All parameters are optional.

example

1
2
3
4
{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

hexo tabs用法

配置部分

theme/next/_config.yml

1
2
3
4
5
6
7
next/_config.yml
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0

执行模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

example

1
2
3
4
5
6
7
8
9
10
11
{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

hexo pdf用法

配置部分

theme/next/_config.yml

1
2
3
4
5
next/_config.yml
pdf:
  enable: true
  # Default height
  height: 500px

执行模板

1
2
3
4
pdf.js
{% pdf url [height] %}
[url]    : Relative path to PDF file.
[height] : Optional. Height of the PDF display element, e.g. 800px.

example

1
{% pdf https://example.com/sample.pdf %}

hexo video用法

执行模板

1
2
video.js
{% video url %}

example

1
2
{% video /path/to/your/video.mp4 %}
{% video https://example.com/sample.mp4 %}

hexo Group-pictures用法

执行模板

1
2
3
4
5
group-pictures.js
{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}
[group]  : Total number of pictures to add in the group.
[layout] : Default picture under the group to show.

example

1
2
3
4
{% grouppicture 7-5%}
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160720_192243_AO_HDR.jpg)
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160817_185254_AO_HDR.jpg)
{% endgrouppicture %}

hexo 写作模板

https://www.bas369.com/more/learning_notes/2020/03/14/Markdown%E5%86%99%E4%BD%9C%E6%A8%A1%E6%9D%BF/

hexo 资源文件夹

https://hexo.io/zh-cn/docs/asset-folders.html

github svg corner

https://tholman.com/github-corners/

githubPage访问地址问题

repository名称需要与githubPage名称保持一致
域名在github repository setting中配置，每次上传被覆盖
需要配置cname文件

GithubPage

cname 重定向

hexo 站点配置文件 _config.yml中设置url为域名
githubPage 重定向机制 source目录新建CNAME文件，添加域名地址
如果你的 CNAME 文件为 example.com，那么 www.example.com 会定向到 example.com。
如果你的 CNAME 文件为 www.example.com，那么 example.com 会定向到 www.example.com

阿里DNS配置

hexo配置文件说明

https://hexo.io/zh-cn/docs/configuration

hexo 语言

站点配置文件 language: zh-Hans // 这里设置语言 简体中文
对应主题语言目录中的 文件名 需要保持一致

hexo 问题处理

https://hexo.io/docs/troubleshooting.html

访问页面直接显示未经过渲染的模板

hexo在5.0版本以上移除了swig

1
npm i hexo-renderer-swig --save

参考

https://blog.eson.org/categories/