Hexo博客配置升级集合

  • hexo博客配置优化升级的坑坑洼洼

  • 博客变动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    19.02.15 Next 启用 MathJax 公式支持
    19.04.03 博文按更新时间排序
    19.10.10 升级Next7.4, 修正评论Disqus.
    19.11.16 增加utterances评论
    19.12.26 Blog 部署迁移到 Github Actions
    19.12.28 记录一些问题,待解决.
    19.12.30 解决update更新时间排序
    20.01.18 升级到Next 7.7,删除大量过时内容.
    20.01.19 优化博客速度.迁移评论,阅读统计等.
    20.01.20 重新整合内容.添加插件等配置.
    20.01.20 填站点优化的坑
  • 参考资料

    https://tding.top/
    https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/MATH.md
    https://www.zybuluo.com/codeep/note/163962#3%E5%A6%82%E4%BD%95%E8%BE%93%E5%85%A5%E6%8B%AC%E5%8F%B7%E5%92%8C%E5%88%86%E9%9A%94%E7%AC%A6
    https://blog.csdn.net/wgshun616/article/details/81019687

导语

  • 这一篇是折腾博客配置的集合贴.折腾多少记多少吧.

Logs

  • (19.10.10)

    • 升级到 Next 7.4
    • 速度提升非常明显: 博客搜索加载直接使用,不再需要等待.本地 hexo g 缩短了一半时间.
    • Next7的配置文件有更改.也许还有其他小BUG.
    • 目前 代码复制暂时失效,打赏暂时失效.
  • (20.01.18) 升级到Next 7.7,把改版的想法实践的差不多,以后升级应该不会这么麻烦了.

    • 彻底更改了一直延续的博客样式,比之前顺眼多了.
    • 打赏 代码复制 已经可以正常使用.代码块的样式更像 mac 了.
    • 启用了压缩的插件,加上懒加载,和 hexo next 更新版本的优化,打开速度有了提升.
    • 比较遗憾是背景图片加载还是比较慢.
    • 已经启用的 chatra 因为和 back2top 有位置冲突,没有找到更换位置的选项.只能暂时关闭.切换到了 Tidio 目前正常. (20.01.19) 已全部关闭.
    • 应该会稳定很长时间了
  • (20.01.19) 优化博客速度,测试下来 在 gitpages 国内半死不活的现状下,主体内容打开应该能控制在 5s 内.

    • 这次优化,把原来带年月的博文链接改成了一串字符的链接,方便外链.但是 blog 之前所有的外链全部失效.目前在 404 界面加上了有关公告.
    • 迁移 leancloud 到国际版 (早该进行了).基于 leancloud 的访问量统计因为博文链接的变化也全部失效,索性从零开始.
    • 评论系统 utterances 加载实在是太慢了,又增加了基于 leancloud 国际版的 valine,速度很满意,唯一的风险就是 leancloud 国际版被墙.
    • 重新整理了插件,估计这个要单独写一篇记录一下.
    • 这次的改版基本参考 小丁的个人博客
  • 待办

    • 搜索引擎索引更新.
    • pwa 支持.(hexo-pwa插件)
    • 图床迁移到 onedrive

Next

升级Next7.7

  • 这一次升级的过程比较复杂,需要点时间整理.

  • 非常多参考 Hexo-NexT 版本更新记录

  • Next 7.3 以后数据文件和配置文件可以分离.包括自定义样式.都可以放到 source/_data/ 下,这样升级时会非常方便,遗憾的是图片资源还是需要放在主题的文件夹中.

  • 从 Netx 7 以下升级的,就别想直接覆盖了,从头看配置吧.

配置

  • Next 7.3 以后推荐是主题配置文件使用 source/_data/next.ym 并且 override: true 这样主题配置文件无需修改.

  • next 的配置文件非常详细.基本的博客样式不再赘述.

聊天模块

  • next7.7 的 chat 支持 chatra 和 tidio. 还可以在侧边栏启用 chat 图标.

  • 测试

    • 借助 chatra 和 tidio 可以实时的收到通知,即使离线也可以收到邮件通知.可以一定程度上替换评论系统.
    • chatra 在国内的访问速度要更好.但是聊天框自定义少.
    • tidio 国内也能加载,但是还是不够快.好处是自定义很多.
  • 启用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # 侧边栏
    chat:
    enable: true # 启用
    #service: chatra # 选择那个服务
    service: tidio
    icon: comment # Icon name in Font Awesome, set false to disable icon.
    text: Chat # Button text, change it as you wish.

    # Chatra Support
    # See: https://chatra.io
    # Dashboard: https://app.chatra.io/settings/general
    chatra:
    enable: false # 启用则 true
    async: true
    id: # Visit Dashboard to get your ChatraID
    embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

    # Tidio Support
    # See: https://www.tidiochat.com
    # Dashboard: https://www.tidiochat.com/panel/dashboard
    tidio:
    enable: false # 启用则 true
    key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer
  • next 对 chat 的支持还没有到尽善尽美,启用后测试与右下的小部件有冲突.目前暂定关闭

其他配置

  • 书签: 支持返回时仍然回到相同位置,我是禁用了….

    1
    2
    3
    4
    5
    6
    7
    8
    # Bookmark Support
    bookmark:
    enable: false # 启用则 true
    # Customize the color of the bookmark.
    color: "#222"
    # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
    # If manual, only save it by clicking the bookmark-icon.
    save: manual
  • Follow me on GitHub: 右上角的 Github ,为了这个把书签禁用了.

    1
    2
    3
    4
    5
    # `Follow me on GitHub` banner in the top-right corner.
    github_banner:
    enable: true
    permalink: https://github.com/Jasper-1024
    title: Follow me on GitHub
  • 图片浏览器: 有 fancybox 和 mediumzoom 两种,个人偏爱 fancybox,两者不能同时启用.

    1
    2
    3
    # FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
    # For more information: https://fancyapps.com/fancybox
    fancybox: true
  • 盘古 pangu: 别误会这个名字,这是在每个英文和数字前后加空格的 js. 因为个人习惯性加上空格,所以不启用

  • quicklink: google 出品,判断空闲即加载视窗内url.貌似不太用得着.

样式

  • source/_data/next.ym 文件中取消 variable: source/_data/variables.stylstyle: source/_data/styles.styl 的注释.

languages.yml

  • 因为添加了一些自定义界面,需要添加对于的翻译

  • languages.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    zh-CN:
    menu:
    guestbook: 留言

    state:
    pages: 页面

    page:
    totally: 共有
    tags: 标签

styles.styl

  • pc主页文章添加阴影效果

    1
    2
    3
    4
    5
    6
    7
    article {
    margin-top: 0px;
    margin-bottom: 50px;
    padding: 25px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
  • 文章内容的透明度设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //博客内容透明化
    //文章内容的透明度设置
    .content-wrap {
    opacity: 0.87;
    }

    //侧边框的透明度设置
    .sidebar {
    opacity: 0.87;
    }

    //菜单栏的透明度设置
    .header-inner {
    background: rgba(255,255,255,0.9);
    }

    //搜索框(local-search)的透明度设置
    .popup {
    opacity: 0.87;
    }
  • 博客背景图片,需要将对应图片放在主题文件夹 source/images 下,推荐使用 webp 格式,分辨率在1080p尚可.

    1
    2
    3
    4
    5
    6
    7
    body {
    background:url(/images/back.webp);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover; //填充
    background-position:50% 50%;
    }

variables.styl

  • 调整默认显示样式间距等.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // Font size
    // $font-size-large = 1.125em;
    $font-size-large = 1em;
    // $font-size-larger = 1.25em;
    $font-size-larger = 1.125em;
    // $font-size-largest = 1.375em;
    $font-size-largest = 1.25em;

    // Headings font size
    $font-size-headings-step = .125em;
    // Custom font-size
    // $font-size-headings-base = 1.875em;
    $font-size-headings-base = 1.6em;
  • 圆角设置(+1)

    1
    2
    3
    // 圆角设置
    $border-radius-inner = 20px 20px 20px 20px;
    $border-radius = 20px;

评论

  • Disqus 很久之前就被墙了,一直都是半残的使用这,期间查找了不少基于github issues 的评论系统,但是不是权限过大(这是github api限制),就是已经停止更新.
  • 最近翻到了 utterances 基于github app ,权限可以控制到某一个仓库.目前暂时迁移到 utterances .计划以后和域名一块,考虑在服务器上自建 isso,但是服务器的安全性又成新问题.
  • 目前大致是 Disqus 可以匿名评论,但是需要科学上网. utterances 无需科学上网,但是需要github帐号,而且加载速度比较慢.
  • 评论系统这样要维持很长一段时间了.基本满足需要. 增加了 valine 可以匿名评论,加载速度还可以,目前全部保留.

utterances评论

  • utterances 有新的插件 hexo-next-utteranc 部署异常的简单.

  • 选定仓库,授权 utterances .

    • 你可以新建,或者直接现有仓库.
    • 授权 ,可以控制到具体的仓库.
  • 安装插件

    1
    npm install --save github:theme-next/hexo-next-utteranc
  • 添加配置文件,在主题/站点的配置文件中添加都可. 仅修改repo即可.

    1
    2
    3
    4
    5
    6
    7
    8
    # Demo: https://utteranc.es/  http://trumandu.github.io/about/
    utteranc:
    enable: true
    repo: #Github repo such as :TrumanDu/comments
    pathname: pathname
    # theme: github-light,github-dark,github-dark-orange
    theme: github-light
    cdn: https://utteranc.es/client.js
  • 之后重新生成,部署hexo.

valine 评论

  • valine 是基于 LeanCloud 的无后端评论系统, Next 对 valine 支持良好

  • 配置过程参考 Hexo博客进阶:为Next主题添加Valine评论系统

  • 还有更高级的的 Valine Admin 可以实现主要实现评论邮件通知、评论管理、垃圾评论过滤等功能. 参考 Valine Admin 配置手册

插件

  • 升级 Next7.7 的过程,也顺带把插件整理了一遍,有的插件与 blog 优化有关,内容在下一节.
  • 默认情况下文章生成的是年月日+文章名的带汉字的链接.但是这样非常不方便分享.一些论坛也不能正常识别总是会截断.

  • hexo-abbrlink 会生成一个字符串代表文章的链接,这样方便分享.而且生成后即使修改标题也不会影响外链.

  • 坏处是原来的外链全部失效….额….只能在404界面提醒了…

  • 在站点配置文件中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 原来按照年/月/日/标题生成 # permalink: :year/:month/:day/:title/
    permalink: :author/:abbrlink/ # 作者/字符串
    permalink_defaults: #默认参数可自定义
    author: jasper
    # 永久链接
    abbrlink: # 生成
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex
    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-cake-moon-menu 右下按钮

  • Next 主题自带了指示进度和返回最上的按钮,但样式不太好看.

  • hexo-cake-moon-menu 正好符合需要.

  • 安装后,即使不在文件中配置,已经生效.配置文件中可配置细节.

  • 站点配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # 右下按钮
    moon_menu:
    back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
    back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2

hexo-filter-nofollow 外链优化

  • hexo-filter-nofollow 是 hexo 官方插件之一.自动在博文引用的外链添加 rel="external nofollow noreferrer"

  • rel="external nofollow noreferrer" 大意是告诉搜索引擎的爬虫不需要爬取这个外链,并且这个外链不计入站点权重, noreferrer 防止钓鱼??

  • 建议加上

  • 站点配置文件

    1
    2
    3
    4
    5
    nofollow:
    enable: true
    field: site # site 处理全部页面 post 只处理文章页面
    exclude: # 需要排除的域名,不同的子域名视为不同的域名.
    - 'jasper-1024.github.io'

hexo-filter-optimize

  • 见站点优化

hexo-generator-sitemap 站点地图

  • 生成 sitemap.

  • 站点配置文件

    1
    2
    3
    # 站点地图
    sitemap:
    path: sitemap.xml
  • 与之相对的还有一个生成百度站点地图的 hexo-generator-baidu-sitemap ,但是 github 屏蔽了百度的爬虫,所以无所谓了.

hexo-generator-searchdb 本地搜索

  • 这个非常实用.

  • 站点配置文件

    1
    2
    3
    4
    5
    6
    # 本地搜索
    search:
    path: search.xml # 默认生成的search.xml 在站点根目录
    field: all # 索引全部页面
    format: html
    limit: 100
  • 然后在 next 的主题配置文件中启用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
    enable: true #启用
    # If auto, trigger search by changing input.
    # If manual, trigger search by pressing enter key or search button.
    trigger: auto
    # Show top n results per article, show all results by setting to -1
    top_n_per_article: -1
    # Unescape html strings to the readable one.
    unescape: false
    # Preload the search data when the page loads.
    preload: false

hexo-neat 静态内容压缩

  • 见站点优化

hexo-next-utteranc utteranc评论

  • 见 utteranc 评论
  • 根据标签和分类,在每篇博文的末尾推荐相关的博文. next 集成,就开启了.

  • 主题配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Related popular posts
    # Dependencies: https://github.com/tea3/hexo-related-popular-posts
    related_posts:
    enable: true # 启用
    title: 相关文章 # Custom header, leave empty to use the default one
    display_in_home: false
    params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

hexo-service-worker 静态化

  • 见站点优化

hexo-symbols-count-time 字数和阅读时间统计

  • 与 Next 深度集成.

  • 站点配置文件

    1
    2
    3
    4
    5
    6
    #hexo-symbols-count-time 时间统计
    symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true
  • 主题配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: false
    awl: 4
    wpm: 275

hexo-generator-feed RSS

  • 生成 rss 用于 rss 订阅.现在还在使用 rss 的人 可能到入土都会继续使用 rss.

  • 具体参数见: hexo-generator-feed

  • 站点配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    feed:
    type: atom
    path: atom.xml
    limit: 0
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
    order_by: -dated
    icon: icon.png
    autodiscovery: true
    template:

站点优化

  • 参考

    • 加速 Hexo 博客的方法及遇到的问题
    • Hexo博客优化与加速
  • 这个说起来比较玄幻,本身对前端接触不多,大致只是按照一些博客文章进行的.

  • G家的 pagespeed 评价网站速度.优化前 50 到优化后 85 分.还算没白折腾吧.

  • 另一个网站测速 PageSpeed

压缩静态资源 hexo-neat

  • 原理是移除 md 转 html 的过程中的大量空白符(?)

  • 这插件会增加编译的时间.

  • 使用很简单,直接安装,在站点配置文件中配置.

    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
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
    enable: true
    exclude:
    # 压缩css
    neat_css:
    enable: true
    exclude:
    - '**/*.min.css'
    # 压缩js
    neat_js:
    enable: true
    mangle: false
    output:
    compress:
    exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/fireworks.js'
    - '**/pisces.js'
    - '**/utils.js'
    - '**/next-boot.js'
    - '**/local-search.js'
    - '**/algolia-search.js'
    - '**/bookmark.js'
    - '**/schemes/muse.js'
  • 压缩 js 时候比较坑,来回生成测试才排除了这几个文件.

PJAX

  • 通常用户点击标签切换页面,会请求一个新的 url 然后页面重新渲染加载一次.但是大部分页面只是文字变化,整体布局 css 等都不变,每点击一次刷新一遍太慢了. 而 ajax 可以做到局部刷新,整个页面不需要重新渲染一次. 但是使用 ajax 局部刷新不会改变页面的 url 这样破坏了用户前进后退的体验.

  • pjax 克服了 ajax 不改变 url 的缺点,每次点击后 url 都会改变,但是整体的布局不会重新刷新.大大加快了加载速度.

  • Next 7.x 已经整合了 pjax .so 能启用就启用吧.

  • 相关的库 theme-next-pjax

  • 进入主题文件夹

    1
    git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
  • 每次升级即 git pull

  • 在主题配置文件中 pjax: true 完毕.

  • 我的 blog 只是在 gitpages 上,如果你的 blog 接入了 cdn 还需要在主题配置文件中配置一下.

    1
    2
    3
    vendors:
    ...
    pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js

hexo-service-worker

  • hexo-service-worker 可以把站点的静态资源包括 html 缓存起来,大大加快以后的访问速度(恩,和第一次加载无关).

  • 注意别把 blog 主页加进去了,否则其他人访问过你的 blog 没有清除缓存,就悲剧了.(我瞎写的)

  • 把 origin 配置成 blog 的域名.

  • 站点配置文件

    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
    # 博客离线
    service_worker:
    maximumFileSizeToCacheInBytes: 5242880
    staticFileGlobs:
    - public/about/*
    - public/archives/*
    - public/categories/*
    - public/css/*
    - public/images/*
    - public/jasper/*
    - public/js/*
    - public/lib/*
    - public/page/*
    - public/tags/*
    - public/404.html
    - public/search.xml
    - public/sw-register.js
    - public/sw.js
    stripPrefix: public
    verbose: false
    runtimeCaching:
    - urlPattern: /**/*
    handler: cacheFirst
    options:
    origin: jasper-1024.github.io

hexo-filter-optimize(有坑)

  • 这插件就比较纠结了,有效 但是造成的坑有点多.

  • 原理不太理解.

  • 站点配置文件

    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
    filter_optimize:
    enable: true
    # remove static resource query string
    # - like `?v=1.0.0`
    remove_query_string: true
    # remove the surrounding comments in each of the bundled files
    remove_comments: true
    css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    # - only support the full path
    # - default is ['css/main.css']
    inlines:
    excludes:
    js:
    # bundle loaded js file into the one
    bundle: false # 启用后造成 mathjax 失效,或许换 Katex 有效.
    excludes:
    #- '**/*.js'
    # set the priority of this plugin,
    # lower means it will be executed first, default is 10
    priority: 12
  • mathjax 失效

    • 只能关闭对 js 的过滤.或许以后换到 Katex 可以避免.
  • Font Awesome 图标无法加载

    • 换到 CDN 加载.

    • 主题配置文件

      1
      2
      3
      4
        # Internal version: 4.7.0
      # fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
      fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
      #fontawesome:
  • 如果你使用了更多的样式,音乐播放器,更多的动画等,或许还会遇到更多 Bug .

图片懒加载

  • 写 blog 时候经常会用到大量图片,而图床越来越少也越来越慢.图片懒加载提上日程.

  • 其实很简单 next 已经集成了.

  • 主题配置文件

    1
    2
    3
    # Vanilla JavaScript plugin for lazyloading images.
    # For more information: https://github.com/ApoorvSaxena/lozad.js
    lazyload: true

其他

NEXT 数学公式支持

编写数学公式

  • 官方文档

  • Next主题内置了对数学公式的支持,主要有 MathJax 和 Katex 两种.

  • MathJax 是一个JavaScript引擎,用来显示数学公式,支持大部分的主流浏览器,但毕竟是 JS 渲染,有一定的性能损失,目前大部分的数学公式都是基于 MathJax.

  • Katex 比 MathJax 快的多,即使禁用 JS 也可以正常渲染.但是支持的语法有限,等待进一步完善.

  • 这里还是选择了 MathJax .

  • 在Next7.x及以后 ,不再需要复杂的配置.

启用数学公式支持

  • Next7.3 及以下版本,主题配置文件 next/_config.yml 中配置.7.3及以上,建议在 source/_data/next.yml 中修改.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    math:
    # Default (true) will load mathjax / katex script on demand.
    # That is it only render those page which has `mathjax: true` in Front-matter.
    # 如果设置为 false 每篇博文都会加载 mathjax 或 katex
    per_page: true

    # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
    mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true
  • 正常显示数学公式还需要更换 hexo 的默认渲染引擎.

更换渲染引擎 完整Mathjax支持 (可选)

  • hexo的默认渲染引擎与MathJax有语法冲突,故只能更换. (20.01.19) Mathjax 在Next 7.x 在默认引擎上已经可以渲染.如果需要完整的 Mathjax 支持 才需要更换渲染引擎.有 hexo-renderer-pandochexo-renderer-kramed

  • hexo-renderer-pandoc 很好的照顾了 MathJax 语法,但是非常遗憾的是 Pandoc 和 markdown 的语法有一些不兼容,截至17年底之前的博文,没有按照 markdownlint 的标准来,都没有办法正常渲染.建议新博客可以选择 hexo-renderer-pandoc .(20.01.19) 目前还遇到了一个提示为 null 的错误,没有找到有关信息,只能暂时弃用.

  • hexo-renderer-kramed 是基于hexo默认的渲染引擎小改,修补bug而来,因此很好的保持了兼容性,但是不支持 emoji 和插件.

  • 在hexo的文件夹下进入终端

    1
    2
    3
    4
    5
    6
    # 卸载原版
    npm un hexo-renderer-marked --save
    # hexo-renderer-kramed
    npm install hexo-renderer-kramed --save
    # hexo-renderer-pandoc
    npm install hexo-renderer-pandoc --save
  • next/_config.yml 中将 math 的 enable 打开,并选择 mathjax 作为渲染引擎。

  • hexo-renderer-kramed 有一点瑕疵.Markdown 的 `` 行内程序代码 和 mathjax 的 $$ 行内公式,还是有冲突.有两种办法.

  • 直接使用 `$ $` 的语法进行,作者语.

  • 修改渲染器,解决冲突.

    • 找到hexo文件夹下\node_modules\kramed\lib\rules\inline.js

    • 第11行 escape 变量的值做相应的修改:

      1
      2
      //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
      escape: /^\\([`*\[\]()#$+\-.!_>])/,hexo
    • 第20行的em

      1
      2
      //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  • 这样兼容性问题基本处理完毕.

  • 执行

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    可以预览效果了

MathJax语法

  • 每篇博文需要在标题栏手动启用 mathjax: true 才能正常渲染.(可能是处于性能考虑),例如

    1
    2
    3
    4
    5
    6
    7
    ---
    title: test
    date: 2019-01-15 00:00:00
    categories:
    - test
    mathjax: true
    ---
  • 语法详情参考

    https://www.zybuluo.com/codeep/note/163962#3%E5%A6%82%E4%BD%95%E8%BE%93%E5%85%A5%E6%8B%AC%E5%8F%B7%E5%92%8C%E5%88%86%E9%9A%94%E7%AC%A6

  • 不再赘述.

vscode 预览 MathJax

  • 找这个支持费了好大经历,最后直接搜索vscode官方的插件库,第一个….
  • vscode 搜索安装 Markdown+Math 插件,即可在预览 MD 时,看到对应公式效果.不影响 markdownlint 的提示.
  • ps: 最新版的 vscode 插件安装完成后无需重启了.

博文按更新时间排序

  • 在升级 next6 后,添加了博文更新时间,但默认的排序还是博文的创建时间.

  • 其实在 hexo 内部 updated 参数是存在的,按照更新时间排序,只需要调整一下主配置文件 /Hexo/_config.yml

  • 添加

    1
    2
    3
    4
    index_generator:
    path: ''
    per_page: 10
    order_by: -updated
  • (12.28) 切换到Github Actions 后,每次部署都是全新的 git clone MD 文件.这样文件更新时间不准确,引起排序混乱.只能暂时回退.

  • (12.30) 因为 Github Actions 原理问题,干脆在模板上附加上 updated 标签解决.不知为何, update 混乱的博文只有几篇.

  • (20.01.18) 因为升级到 7.7 的过程中,加入了博文的唯一标识模块,导致每篇文章都增加了一个 abbrlink 的标记,目前只能写了一个脚本,每篇上增加了 updated 标签.

博文更新更新 RSS

  • 之前一直没太在意,最近翻了翻配置,就该一个参数..

  • 站点配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    feed:
    type: atom
    path: atom.xml
    limit: 0
    hub:
    content: true # 设置为 true 则 rss 是全文输出.
    content_limit: 140 # content 为空 或 false 则限制每篇的长度
    content_limit_delim: ' '
    order_by: -updated # 按照更新时间排列
    icon: icon.png
    autodiscovery: true
    template:

Github Actions 部署

  • 原本是打算有时间把 hexo 扔进 docker 里面,部署到那个服务器上.突然遇到了 GIthub Actions.

  • 至此 Blog 基本实现了自己的期望,写作完成即发布.

  • 详情见 Github Actions 部署 Hexo

  • 过程其实不难,只是 utterances 那里有个小坑,或许 utterances ,在 Actions 的脚本中要附加上安装插件的命令.应该是引用的安装 node 脚本中没有安装这个插件的过程.