MY BLOG
0%

Hexo插件

发表于 更新于 分类于
本文字数： 2k 阅读时长 ≈ 3 分钟

Hexo中插入图片

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

    1
    npm install hexo-renderer-marked --save

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

    1
    2
    3
    4
    post_asset_folder: false // 这个考虑再三还是关上了，开启后会默认创建同名文件夹，但不是每个文档都有图片，笔者建议是false，导入图片的时候typora也会提示自动创建文件夹
    marked:
      prependRoot: true
      postAsset: true

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

    1
    hexo n "xxx"

  4. 配置Typora

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

    image-20231105183542790

  5. 图片引入

    注意：在typora中图片引入的格式：（引入第六步的插件以后，typora图片格式的文字不能显示了）{% asset_img "image.jpg" "" %}

    在hexo中图片引入的格式：![](image.jpg)

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

    1
    npm install hexo-image-link --save

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

Hexo-Next支持数学公式

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

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

  2. 配置Next的_config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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修改如下：

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

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

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

    1
    mathjax: true

  5. 使用

    • 行内公式

      1
      $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$

    • 行间公式

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

    • 公式编号

      1
      2
      3
      4
      5
      6
      \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

    1
    npm i hexo-abbrlink --save

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

    1
    permalink: posts/:abbrlink/

  3. 清除hexo缓存

    1
    hexo clean

Hexo文章添加评论

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

    image-20231106144206651

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

    image-20231106144314768

  3. 选择OAuth创建应用

    image-20231106144420271

  4. 设置应用的相关信息

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

    image-20231106144714996

  1. 保存 Client ID 和 Client secrets

  2. 配置主题_config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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帐号，初始化评论账户

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

    1
    comments: false

  4. Github登录后访问文章，即可自动初始化gitalk的issues，成功添加后效果如下：

    image-20231106152216919

Hexo字数统计与阅读时长

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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

    1
    2
    3
    4
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: true

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

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

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

  4. 清除hexo缓存

    1
    hexo clean

Hexo中插入背景音乐

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

    image-20231106183321197

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

    image-20231106183408365

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

    image-20231109041241369

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

    image-20231109041357565

Hexo中隐藏文章

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

    1
    npm install hexo-hide-posts --save

  2. 根目录添加配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 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可以查看隐藏的文章列表

    1
    2
    3
    4
    5
    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

    1
    2
    3
    {%- 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开启

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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
    1
    canvas_nest: true