hexo&material配置修改记录

MorphLing 2月 26, 2022

hexo初始化

npm install -g hexo-cli
hexo new little_fat_star
cd little_fat_star

下载material主题

选择1.5.2版本（更新的版本会有bug）

https://github.com/bollnh/hexo-theme-material/archive/refs/tags/1.5.2.zip

git clone git@github.com:bollnh/hexo-theme-material.git themes/material

修改_config.yml

# theme: landscape
theme: material

配置mathjax数学公式

参考https://blog.csdn.net/weixin_43014927/article/details/99619627

安装

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

修改

修改node_modules/hexo-renderer-kramed/lib/renderer.js


// Change inline math rule
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    // return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
    return text;
}

卸载

npm uninstall hexo-math --save

安装

npm install hexo-renderer-mathjax --save

修改

打开node_modules/hexo-renderer-mathjax/mathjax.html，将<script> 改为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

打开node_modules/kramed/lib/rules/inline.js，这步取消了markdown对_和^的解析，也就是没有斜体了，但避免了冲突:

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

开启公式支持功能

在home/_config.yml，中添加如下内容

mathjax:
    enable: true

配置codeblock

取消根config.yml中的codeblock配置

highlight:
  enable: false
  line_number: false
  auto_detect: false

修改主题config.yml中Code highlight，有prettify和hanabi两种选择

prettify:
    enable: false
    theme: "github-v2"

#    Hanabi (https://github.com/egoist/hanabi)
#        line_number: [true/false] # Show line number for code block
#        includeDefaultColors: [true/false] # Use default hanabi colors
#        customColors: This value accept a string or am array to setting for hanabi colors.
#                    - If `includeDefaultColors` is true, this will append colors to the color pool
#                    - If `includeDefaultColors` is false, this will instead default color pool
hanabi:
    enable: true
    line_number: true
    includeDefaultColors: true
    customColors:

配置deploy

安装

npm install hexo-deployer-git --save

修改配置

deploy:
  type: git
  repo: git@github.com:liyunfan1223/liyunfan1223.github.io.git
  branch: master

部署

hexo d

配置gitalk评论

在github上创建一个空repo，利用其issues作为评论区，需要开启issues

注册一个OAuth，获得ClientID和Secret Key，url和回调url填博客地址，即https://liyunfan1223.github.io

修改主题config.yml，修改gitalk_repo,gitalk_owner,gitalk_client_id,gitalk_client_secret

但这样会报422错误，因为默认label长度不能超过50，但如果url超过50就会报错，所以需要手动修改label设置方式

修改themes/material/layout/_widget/comment/gitalk/main.ejs，指定使用md5作为label

<!-- Gitalk 评论框 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> 
<script>
    var gitalk = new Gitalk({
            clientID: '<%= theme.comment.gitalk_client_id %>',
            clientSecret: '<%= theme.comment.gitalk_client_secret %>',
            repo: '<%= theme.comment.gitalk_repo %>',
            owner: '<%= theme.comment.gitalk_owner %>',
            admin: ['<%= theme.comment.gitalk_owner %>'],
            id: md5(location.pathname),
            // facebook-like distraction free mode
            distractionFreeMode: false
        })
   gitalk.render('gitalk-container')
</script>

配置浏览量统计

需要修改busuanzi域名，原域名不能用

busuanzi:
    enable: false
    all_site_uv: true
    post_pv: true
    # busuanzi_pure_mini_js: "https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"
    busuanzi_pure_mini_js: "https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

修改换页按钮

翻页变成了乱码

解决参考：https://github.com/bollnh/hexo-theme-material/issues/752

这里是因为”<”被转义掉了

所以要修改index.ejs，禁止转义

<!-- Index nav -->
<nav class="material-nav mdl-cell mdl-cell--12-col">
    <%- paginator({
        prev_text: __('<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><i class="material-icons" role="presentation">arrow_back</i\></button>'),
        next_text: __('<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><i class="material-icons" role="presentation">arrow_forward</i\></button>'),
        space: '',
        escape: false
    }) %>
</nav>

添加友链、关于和标签云

友链

在主题config.yml中添加

pages:
    友链:
        link: "/links"
        icon: face
        divider: false

新建页面

hexo new page "links"

修改友链页/source/links/index.md

title: 友链
date: 2022-02-26 15:56:22
layout: links

创建文件/source/_data/links.yml并修改为

Richard: 
  link: https://helloat123.github.io
  avatar: /img/friends/richard.jpg
  descr: https://helloat123.github.io

qwqbot:
  link: https://qwqbot.com
  avatar: /img/friends/qwqbot.jpg
  descr: https://qwqbot.com

关于

在主题config.yml中添加

pages:
    关于    :
        link: "/links"
        icon: person
        divider: false

新建页面

hexo new page "about"

修改关于页/source/about/index.md

标签云

在主题config.yml中添加

pages:
    关于    :
        link: "/tags"
        icon: cloud_circle
        divider: false

新建页面

hexo new page "tags"

修改关于页/source/about/index.md

首部标签改为

title: tags
date: 2022-02-26 17:02:18
layout: tags

配置标签分类和自动分类

安装hexo-auto-category插件

npm install hexo-auto-category --save

该插件会自动根据md文件所在的目录结构生成category

修改根config.yml

auto_category:
 enable: true
 depth: 2

然后把文件丢进对应的文件夹

hexo c & hexo g

修改url

修改根config.yml中permalink参数即可

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
# permalink: :title/

修改网站图标，头像，图片

首先将图片转为1:1正方形，在这个网站上https://favicon.io/制作正方形图标

如果需要圆形图标就去这个网站 https://redketchup.io/favicon-generator

最后设置主题配置中的img

img:
    logo: "/img/logo.png"
    avatar: "/img/favicon_io/android-chrome-512x512.png"
    daily_pic: "/img/favicon_io/wallpaper.jpg"
    sidebar_header: "/img/sidebar_header.png"
    random_thumbnail: "/img/random/material-"
    footer_image: