Hexo博客配置升级集合

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

  • 博客变动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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 填站点优化的坑
    20.05.25 记录一个问题
    20.11.17 hexo 忽略指定文件/文件夹
  • 参考资料

    http://tding.top/
    http://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/MATH.md
    http://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
    http://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 国际版被墙.
    • 重新整理了插件,估计这个要单独写一篇记录一下.
    • 这次的改版基本参考 小丁的个人博客
  • (20.05.25) 基本半年都很稳定,没有再折腾,直到前几天一次莫名其妙的部署失败,到现在还没找到原因,无非是 hexo 版本等,但是没有时间去调试,仅记录.

  • 待办

    • 搜索引擎索引更新.
    • 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: http://chatra.io
    # Dashboard: http://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: http://chatra.io/help/api/#injectto

    # Tidio Support
    # See: http://www.tidiochat.com
    # Dashboard: http://www.tidiochat.com/panel/dashboard
    tidio:
    enable: false # 启用则 true
    key: # Public Key, get it from dashboard. See: http://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: http://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: http://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: http://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: http://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: # 需要排除的域名,不同的子域名视为不同的域名.
    - 'www.duipaigang.com'

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: http://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: http://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: http://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 http://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: www.duipaigang.com

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: http://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: http://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
    ---
  • 语法详情参考

    http://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 脚本中没有安装这个插件的过程.

一个坑

  • 突然收到邮件,action 失败,经过排查是一段代码引起的.原因不明,暂时只记录.

    1
    ${#varname} # 相同的代码段,如果写成 `${#varname}` 就会直接生成失败.

忽略指定文件/文件夹

目前写 blog 迁移到了 Obsidian,导致主文件夹下多了几个 Obsidian 的文件,结果推送后多出了一个乱码文章…

参考 配置 | Hexo.

在站点配置文件 skip_render 参数可以指定编译时忽略的文件/文件夹.支持通配符.

PS: 注意这里的文件都是 /source 下的相对路径

我需要忽略

  • _posts/obsidian.css
  • _posts/.obsidian/下所有文件.

所以对应的 skip_render 是

1
2
3
skip_render:
- _posts/obsidian.css
- _posts/.obsidian/**