Hexo常用插件分享

Verose
185 阅读5分钟

Hexo中插入图片

  1. 安装图片插件hexo-renderer-marked

    npm install hexo-renderer-marked --save

  2. 根目录的_config.yml文件中配置：

    post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

  3. 创建文章，此时会在source/_posts生成同名文件夹，放置文章资源

    hexo n "xxx"

  4. 配置Typora

    打开typora的偏好设置，点击图像，更改为如下设置

image.png

  1. 图片引入

    注意：在typora中图片引入的格式：（引入第六步的插件以后，typora图片格式的文字不能显示了）

image.png 在hexo中图片引入的格式：

image.png

  1. 安装插件hexo-image-link解决typora与hexo路径不一致问题，这样在typora和hexo都可以显示图片了

    npm install hexo-image-link --save

  2. typora中的图片在进行缩放的时候，会自动转为html格式，此时img的src不会发生自动转换，针对这种情况，暂时的解决办法是将图片上传到图床，把图片链接变为绝对路径，作者使用的图床是SMMS

Hexo-Next支持数学公式

  1. 卸载原有渲染器hexo-renderer-marked，安装hexo-renderer-kramed

    npm uninstall hexo-renderer-marked
npm install hexo-renderer-kramed

  2. 配置Next的_config.yml文件

    math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  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: false
​
  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

  3. 解决语义冲突

    取消反斜杠\和下划线_的转义，/node_modules/kramed/lib/rules/inline.js修改如下：

    //escape: /^\([\`*{}[]()#$+-.!_>])/,
escape: /^\([`*[]()#$+-.!_>])/, //第11行
  
//em: /^\b_((?:__|[\s\S])+?)_\b|^*((?:**|[\s\S])+?)*(?!*)/,
em: /^*((?:**|[\s\S])+?)*(?!*)/, //第20行

    注意：em中对下划线进行了转义，但是对latex中的*没有处理，所以latex中*需要全部用\ast代替。

  4. 在需要使用LaTeX渲染的博文中，在文章的Front-matter里打开mathjax开关：

    mathjax: true

  5. 使用

    • 行内公式

      $lim_{1\to+\infty}P(|\sum_i^nX_i-\mu|<\epsilon)=1, i=1,...,n$

      lim_{1\to+\infty}P(|\sum_i^nX_i-\mu|<\epsilon)=1, i=1,...,n

    • 行间公式

      $$lim_{1\to+\infty}P(|\sum_i^nX_i-\mu|<\epsilon)=1, i=1,...,n$$

      lim_{1\to+\infty}P(|\sum_i^nX_i-\mu|<\epsilon)=1, i=1,...,n

    • 公式编号

      \begin{align}
a+b\
b+c\
a+c\
\end{align}
\label(52)

      \begin{align} a+b\ b+c\ a+c\ \end{align}

  6. 搭配typora

    偏好设置 \Rightarrow MarkDown \Rightarrow 内联公式开启 \Rightarrow 重启Typora

    点击段落，公式块可以输入公式

Hexo生成唯一永久文章链接

hexo的文章链接默认的生成规则是：:year/:month/:day/:title，标题如果是中文，会变得特别冗长。同时修改标题后文章链接会发生变化，URL层级深，不利于SEO，因此安装如下插件。

  1. 安装hexo-abbrlink

    npm i hexo-abbrlink --save

  2. 修改根目录的_config.yml配置：(posts/可以舍去)

    permalink: posts/:abbrlink/

  3. 清除hexo缓存

    hexo clean

Hexo文章添加评论

  1. 登录Github，点击右侧头像，点击Setting选项

  2. 左侧菜单选择Developer setting，进入开发者页面

  3. 选择OAuth创建应用

  4. 设置应用的相关信息

    • Application name 应用名称
    • Homepage URL 博客主页
    • Authorization callback URL 授权回调页面（同 Homepage URL）

  5. 保存 Client ID 和 Client secrets

  6. 配置主题_config.yml文件

    gitalk:
  enable: true
  github_id: jin-lin0 # GitHub repo owner
  repo: jin-lin0.github.io # Repository name to store issues
  client_id: xxx # GitHub Application Client ID
  client_secret: xxx # GitHub Application Client Secret
  admin_user: jin-lin0 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN
    • 设置enable为true
    • github_id填入github帐号
    • repo填入github仓库名（仓库名不是仓库地址），评论以issues形式保存在该仓库下
    • client_id填入注册生成的值
    • client_secret填入注册生成的值
    • admin_user填入github帐号，初始化评论账户

  7. 隐藏评论功能，在front matter中添加：

    comments: false

  8. Github登录后访问文章，即可自动初始化gitalk的issues

Hexo字数统计与阅读时长

  1. 根目录安装插件hexo-symbols-count-time

    npm install hexo-symbols-count-time --save

  2. 根目录配置_config.yml，如果中文较多awl采用2，否则默认即可

    symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 2
  wpm: 300
  suffix: "mins."

    symbols：字数统计

    time：时间统计

    total_symbols：总字数统计

    total_time：总时间统计

    exclude_codeblock：排除代码块计算

  3. 主题配置_config.yml

    symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

    separated_meta：是否和发表时间不在一行

    item_text_post：文章前面是否显示文字描述（本文字数，统计时长）

    item_text_total：页面底部显示站点总字数，总时长

  4. 清除hexo缓存

    hexo clean

Hexo中插入背景音乐

  1. 网易云音乐中点击生成外链链接

  2. 复制外链iframe到/next/layout/macro/sidebar.swig中即可

  3. 生成我的音乐自定义的歌单的外链播放器需要先分享到自己的动态

  4. 点进分享的动态，点击生成外链播放器就可以了

Hexo中隐藏文章

  1. 根目录安装插件hexo-hide-posts

    npm install hexo-hide-posts --save

  2. 根目录添加配置

    # hexo-hide-posts
hide_posts:
  # font-matter中的过滤关键字
  filter: hidden
  # 指定你想要传递隐藏文章的位置，比如让所有隐藏文章在存档页面可见
  # 常见的位置有：index, tag, category, archive, sitemap, feed, etc.
  # 留空则默认全部隐藏
  public_generators: []
  # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true
​

  3. 文章的Font-Matter中添加hidden: true即可隐藏，但仍可通过链接访问

  4. 控制台输入hexo hidden:list可以查看隐藏的文章列表

    source: _posts/实用网站收集.md
slug: 实用网站收集
title: 实用网站收集
date: Mon Nov 06 2023 01:56:45 GMT+0800
updated: Sun Nov 19 2023 00:51:06 GMT+0800

Hexo配置canvas-nest背景

  1. 在hexo/source/_data目录下新建文件footer.swig

    {%- if theme.canvas_nest %}
    <script type="text/javascript" color="0,0,255" opacity='0.5' zIndex="-2" count="50" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{%- endif %}

  2. 主题配置文件开启自定义footer.swig，同时配置canvas_nest开启

    custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

    canvas_nest: true
avatar
文章
阅读
粉丝