hexo从入门到优化手册

发布于: 2018-08-05
更新于: 2023-07-18

文章目录

hexo

快速安装

执行下面安装指令
下载package.json 然后执行命令npm install或者yarn add安装相关的插件

需要安装

软件
- Node.js
- hexo

安装指令【必须执行】

通过 yarn 或者 npm 安装，推荐使用 yarn，下载速度比 npm 稳定而且快太多了

npm install hexo-cli -g
yarn global add hexo-cli

让 hexo 变得更好用

设置新建文件模板

|--scaffolds
|______draft.md
|______page.md
|______post.md

创建时执行命令 hexo new/n post/page "post_name"即可

# 注意这里要保证---、---的解析格式，不然的话会解析报错的。
---
tags:
author:
---

### hexo插件

> 同样通过npm或者yarn下载安装即可，当然要有选择性地安装，不然插件太多时，也会占据和产生大量资源的。

``` code
"dependencies": {
    "hexo": "^3.3.9",
    "hexo-deployer-git": "^0.3.1",
    "hexo-deployer-rsync": "^0.1.3",
    "hexo-filter-flowchart": "^1.0.4",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-json-content": "^3.0.1",
    "hexo-generator-json-feed": "^1.0.0",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-git-backup": "^0.1.2",
    "hexo-helper-qrcode": "^1.0.2",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.2.2"
  }

hexo 上传备份

deploy:
    type: git
    repo: [email protected]:xxx/Blog.git
    branch: master
    message: update blog

设置文章密码

下载安装 hexo-blog-encrypt 插件后

在标题前栏目中设置 password： xxx 即可启用加密

设置文章的概述

在文章的栏目中设置类似内容

abstract: This is a encrypted blog, you need password to access it.
message: This is a encrypted blog, you need password to access it.

设置 ssh

设置 ssh key 后可以通过走 git 协议，而不用走 http 协议，更加稳定快速一点
请参考文章

ssh设置详细过程

引用其他文章内容

  {% post_link xxxx description %}

流程图展示【flow-chart 插件】

<div id="flowchart-0" class="flow-chart"></div>

mermaid 编写

官方文档戳此

流程图

{% mermaid %}    graph TD
    root[根节点]-->子节点
    子节点-->| 补充说明 | 结果
    title[标题]{% endmermaid %}

类间关系

组合：指生命周期绑定的，比如人和他的心脏就是组合，人不在了，心脏也就不在了
聚合：指聚合的东西不依赖于对象的，比如打工人和公司，打工人不在了，对公司毫无影响（狗头）

{% mermaid %}classDiagram

class Interface{
    注释
    <>
}

=========  <|..  实现 =========================
Class01 <|.. Class02: 实现接口

=======    <|--  继承  ========================
Class01 <|-- AveryLongClass : Cool

=======    *--   组合 =========================
Class03 *-- Class04

=======    o--   聚合 =========================
Class05 o-- Class06

=======    ..     链接 虚线 ===================
Class07 .. Class08

Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label{% endmermaid %}

背景图

/* 引入图片，no-repeat 代表在这个container中，不会重复展示图片  0和0代表离左和离上的百分比地方展示，cover代表即便超过container也要完整的展示 */
.left-col {
  background: linear-gradient(rgba(36, 34, 34, 0.5), rgba(49, 45, 45, 0.5)),
    url("/images/leftcol.jpg") no-repeat 0% 0% / cover;
  width: 300px;
  position: fixed;
  opacity: 1;
  transition: all 0.2s ease-in;
  height: 100%;
  z-index: 999;
  &.show {
    @extend %shadow;
  }
  .overlay {
    width: 100%;
    height: 180px;
    position: absolute;
  }

  .intrude-less {
    width: 76%;
    text-align: center;
    margin: 112px auto 0;
  }

  #header {
    width: 100%;
    height: 300px;
    position: relative;
    border-bottom: 1px solid color-border;
    a {
      color: #aa9898;
      &:hover {
        color: #ceb1c2;
      }
    }
    .header-subtitle {
      text-align: center;
      color: #999;
      font-size: 14px;
      line-height: 25px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .header-menu {
      font-weight: 300;
      line-height: 31px;
      text-transform: uppercase;
      float: none;
      min-height: 150px;
      margin-left: -12px;
      text-align: center;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      li {
        cursor: default;
        a {
          font-size: 14px;
          min-width: 300px;
        }
      }
    }
    .header-smart-menu {
      font-size: 12px;
      margin-bottom: 20px;
      a {
        &:after {
          content: "/";
        }
        &:last-child {
          &:after {
            content: "";
          }
        }
      }
    }
    .profilepic {
      text-align: center;
      display: block;
      border: 5px solid #fff;
      border-radius: 300px;
      width: 128px;
      height: 128px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      background: #88acdb;
      -webkit-transition: all 0.2s ease-in;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      text-align: center;
      img {
        border-radius: 300px;
        opacity: 1;
        -webkit-transition: all 0.2s ease-in;
        &.show {
          width: 100%;
          height: 100%;
          opacity: 1;
        }
      }
    }
    .header-author {
      text-align: center;
      margin: 0.67em 0;
      font-family: Roboto, "Roboto", serif;
      font-size: 30px;
      transition: 0.3s;
    }
  }
}

注意事项

deploy 不保留源文件

deploy 后提交的只是生成后的网页文件,而真正的源文件仍然在你的主机上,所以假如你有可能丢失文件的话,最好将你的源文件进行备份

文章的标签栏

tags:
- sdd
- ddd

序列图

  <div id="sequence-1"></div>

添加域名服务器

可以参考写的另外一篇文章域名解析点我进行跳转

diagram插件（支持plantuml等语法）

npm install --save hexo-filter-kroki

kroki:

  # the kroki free service server, you may switch to your self-hosted sever.
  server: "https://kroki.io/"
  # Available values 
  # "inline": <svg>xxx<svg/>
  # "inlineUrlEncode": <img src='data:image/svg+xml;> 
  # "inlineBase64": <img src='data:image/svg+xml;base64> 
  # "localLink": <img src="/assert/puml/xxxx.svg">
  # "externalLink": <img src="https://kroki.io/plantuml/svg/xxx">
  link: "inline"

  # common options: svg/png
  outputFormat: "svg"
  # the generated img will have a default class name.
  className: 'kroki'

  # append some fragment per diagram, used for the theme or else config
  inserts:
    - diagram: plantuml
      after: 1
      # see https://plantuml.com/en/theme
      fragment: '!theme sketchy-outline'
    - diagram: mermaid
      after: 0
      # see https://mermaid-js.github.io/mermaid/#/theming
      fragment: "%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%"
```<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12,"theme":"simple"}  Alice->Bob: Hello Bob, how are you?
  Note right of Bob: Bob thinks
  Bob-->Alice: I am good thanks!{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12,"theme":"simple"}<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js"></script>st=>start: eval `ssh-agent -s`(开启ssh-agent)
op1=>operation: chmod 600 id_rsa(允许基本读写,提高文件权限)
op2=>operation: ssh-add id_rsa(添加)
e=>end: ssh -T git@github.com(选择yes即可,如果不行去掉-T命令)

st->op1->op2->e{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12,"theme":"simple"}st=>start: eval `ssh-agent -s`(开启ssh-agent)
op1=>operation: chmod 600 id_rsa(允许基本读写,提高文件权限)
op2=>operation: ssh-add id_rsa(添加)
e=>end: ssh -T git@github.com(选择yes即可,如果不行去掉-T命令)

st->op1->op2->e{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12,"theme":"simple"}

hexo从入门到优化手册

/archives/75c31e69/

作者

tyrantqiao

发布于

2018-08-05

更新于

2023-07-18

许可协议

CC BY-NC-SA 4.0

hexo从入门到优化手册

hexo

快速安装

需要安装

安装指令【必须执行】

让 hexo 变得更好用

设置新建文件模板

hexo 上传备份

设置文章密码

设置文章的概述

设置 ssh

引用其他文章内容

流程图展示【flow-chart 插件】

mermaid 编写

流程图

类间关系

背景图

注意事项

deploy 不保留源文件

文章的标签栏

序列图

添加域名服务器

diagram插件（支持plantuml等语法）

作品与友邻

关于我