Hexo & Markdown 配置 | ܤ

Hexo & Markdown 配置

发布
更新

Hexo通用技能加点

前言

本来是跟 Ocean 主题配置 合起来写的 但后面主题配置的东西越来越多 且这两节跟主题也没有太大的关联 所以拆成两篇缩短篇幅 后面拓展写起来也不臃肿

Hexo

将已有的Hexo配置到另一条电脑

我的意思是拷贝已有的 不是从零开始搭建

  • 比较无脑的方式是
    安装完 git bash 和 Node.js 后
    拷贝整个博客文件夹到新电脑
    然后再配置一下ssh授权就可以了
    但这种方式配置需要打包再传或者需要用到u盘
    而且如果是很久以前的文件夹可能会有些版本上的问题
    还有杂七杂八的问题…所以不太推荐…

  • 直接同步库

  1. 安装 git
    git
    一直点下一步就好了
  2. 安装 node.js
    Node.js
  3. 设置SSH key
    看一下 路径 C:\Users\你的用户名.ssh (中文下Users会显示为’用户’)
    下有没有一个 id_rsa.pub 文件
     如果有则进行下一步 没有则点开

    git bash 中输入
    ssh-keygen -t rsa -C "email" # email为你在github上注册的邮箱

    中途会让你输入东西
    这是以后push的时候需要输入的密码
    如果留空直接回车的话 以后push就不用输入密码了

  4. 去 github 配置下ssh
    在右上角头像 => Settings => SSH and GPG keys => New SSH key
    Title 随便填
    Key 填 id_rsa.pub 文件里的全部内容
    最后点击 Add SSH key确定
  5. 拉取仓库
    先在你想要存博客的文件夹下右键 bit bash 打开
    先初始化一下
    git init
    再添加 远程仓库的链接 (点进你的git仓库 再点击绿色的code按钮 点SSH 里面有个git开头的链接)
    git remote add origin git@github.com:XXXXXXXXX.git
    最后拉取
    git pull
  6. 安装相关npm插件
    替换成淘宝镜像源
    在你的博客文件夹下右键打开 git bash 输入命令
    npm config set registry https://registry.npmmirror.com
    更新 -d 参数是为了能显示进度 不然看不到进度可能会以为出啥毛病了(是的 第一次会比较慢)…
    npm -d update
  7. 安装 hexo
    npm install hexo-cli -g
    试试hexo s应该可以了

坑

  • git bash 推送及可能遇到的相关问题
    如果遇到错误
    ‘’’
    ssh: connect to host github.com port 22: Connection refused
    fatal: Could not read from remote repository.

    Please make sure you have the correct access rights
    and the repository exists.

    ‘’’
    可以开启代理试试
    普通全局代理无法代理到终端 建议开虚拟网卡TUN模式 或者用命令让终端代理

  • Hexo 修改完配置文件需要输入下指令 hexo clean 后才能生效

  • 永久链接

    • 数字永久链接
      有个问题是 不直观 在网站统计时不知道是指哪篇文章
    • 自定义链接
      缺点是 每次需要自己想和输入 url 这个我感觉是问题不大
    1. 修改 hexo 配置文件
      找到 permalink 将其改为
    permalink: :url/
    1. 修改文章模板
      在 Hexo/scaffolds/post.md 里增加 url 项
    ---
title: {{ title }}
url:
---

  • 微软输入法快捷输入当前时间
    打开自带输入法选项 => 词典和自学习 => 添加和编辑自定义短语
    添加拼音 time (或者其他你喜欢的)
    短语 %yyyy%-%MM%-%dd% %HH%:%mm%:%ss%
    然后输入法输入 time 就能快捷得到当前时间了
    (有个BUG是如果之后再加入其他自定义短语,这个就会失效,在加入其他自定义短语之后,再重新添加一遍上面这个)

进阶

Markdown

基本使用

介绍及使用 官方教程 教程一 教程二

emoji网站

插入图片的三种方法

VSCode

非常单纯地使用Markdown的话 建议使用simplenote
简约 有 Markdown 预览 可以专注写作
移动端用来记录笔记也是不错 且启动快速比备忘录快

电脑端主要推荐用 VSCode
分栏输入和预览，你可以直观的看到自己输入的代码渲染后的效果
能快速提交git 不用打命令行了
能在里面的终端使用 git bash 更方便
相关配置
All in one 插件介绍
Markdown 快捷键插件

更换 Markdown 渲染器

  • Markdown 渲染器种类
    更快的渲染 和 更多的插件支持

  • Markdown it 功能演示

  • hexo-renderer-markdown-it 的配置与插件配置

  • Markdown 详解

  • @upupming/hexo-renderer-markdown-it-plus

     这个渲染器的插件启用 好像只能用这种写法
    plugins:
  - plugin:
      name: markdown-it-something
      enable: true
      options:

    markdown 提示块
    觉得有点麻烦的话可以用Hexo-admonition 插件

     markdown-it-container 配置

    在主题配置文件中的
    加入markdown-it-plus中加入

    plugins:
  - plugin:
        name: markdown-it-container
        enable: true
        options: tip
  - plugin:
        name: markdown-it-container
        enable: true
        options: warning 
  - plugin:
        name: markdown-it-container
        enable: true
        options: danger
  - plugin:
        name: markdown-it-container
        enable: true
        options: success

    还需要在 article.styl 中加入

    .tip {
padding-left: 20px;
background-color #f3f5f7;
border-left 6px solid rgb(112, 175, 34);
color: darken(rgb(230, 230, 235),20%);
}
.success {
    padding-left: 20px;
    background-color #f3f5f7;
    border-left 6px solid rgb(66, 185, 131);
    color: darken(rgb(66, 185, 131),20%);
}
.warning {
    padding-left: 20px;
    background-color rgba(255, 247, 208, .3);
    border-left 6px solid rgb(231, 192, 0);
    color: darken(rgb(197, 175, 117),20%);
}
.danger {
    padding-left: 20px;
    background-color rgba(255, 230, 230, .3);
    border-left 6px solid rgb(231,76,60);
    color: darken(rgb(153, 0, 0),20%);
}
看板娘
欢迎阅读「Hexo & Markdown 配置 | ܤ」