hexo 问题集合和那些被我放弃的功能

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

一些是我从进阶那篇文章搬过来的坑，我感觉内容比较多，干脆单开一篇好了。

坑

hexo 转移到 windows 上部署（吐槽，临时，没完全成功，已解决）

个人习惯，新玩意先在虚拟机上实验，因为之前 windows 上太多开发工具会把机子环境搞乱（比如 sql server 之类的），给后面其他软件的安装带来麻烦。不过观察到现在，hexo 除了安装拿一下影响全局环境，其他情况下都只在自己文件夹内做修改。一直用虚拟机编辑体验不太好（linux 下 vscode 还是挺卡的），索性搬到 windows 上。

然后发现：安装新组件，本地预览啥的没问题。但部署到 github 仓库的时候就出问题了。首先是告诉我，没权限，估计是没 key。

先把 key 导进去看看？

用 ssh-add 命令，报错。

参考 Windows下使用ssh-add报错 Error connecting to agent: No such file or directory

把服务开起来

1
2
Set-Service -Name ssh-agent -StartupType Manual
Start-Service ssh-agent

再添加

1
ssh-add ./id_rsa

还报错。。。

把密钥放进系统用户目录中

再添加

1
ssh-add C:\Users\zbttl\id_rsa

总算是添加进去了，运行

1
ssh -T git@github.com

显示

1
2
warning: agent returned different signature type ssh-rsa (expected rsa-sha2-512)
Hi zbttl! You've successfully authenticated, but GitHub does not provide shell access.

但我再次运行 hexo g -d

还报错：

1
2
3
4
Error: git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights

后面查阅到 Win10使用ssh的hexo部署到github报错 ＃3339，看起来应该是因为我的 rsa 密钥还带有密码，但 hexo-deployer-git 在 windows 下不会弹密码提示而是自作主张当做没密码的原因。但我既不想去掉密钥的密码，也不想用 git push 提交，所以直接用 windows 提交暂时是不成了。（不过我也没去查阅 hexo-deployer-git 那边有没有解决方案，起码我这边已经用的最新版了）

想到一个曲线救国的方法，开一个 vmware ubuntu 的共享文件夹，把 hexo 项目放在里面，就可以编辑的时候用 windows typora，部署的时候再用 ubuntu。我感觉用 wsl 也可以，但我没怎么用过那玩意，感兴趣的可以尝试。（wsl2 就算了，我对 hyper-v 印象超差的）

（21.1.21 更新）已解决。把 ssh 私钥放到 C:\Users\[用户名]\.ssh 里面就完事了。

hexo 更改 categories 大小写后部署 404 的问题

参考文章：Hexo部署到Github文件夹大小写问题_liuergo的博客-CSDN博客

前一篇说过尽量约定好 tags 和 categories 大小写的原因是，我发现我有的文章归进了首字母大写的类别（如 Linux）里，有些归进了首字母小写的类别（如 linux）里，但实际上应该归为一类。我手动替换修改后，刷新提交发现是归为一类了，点进去显示 404。后来发现是 github 大小写不敏感的锅。

索引到 .deploy_git/.git 文件夹，修改 config 文件中的 ignorecase 参数为 false 即可。

较长的行内代码导致段落字与字间距错误

看一眼效果你们就明白我在说啥了：

解决方法嘛。。。说实话我现在找到的解决方法我不太喜欢，因为要改动主题文件夹，在 hexo 进阶那篇文章中我已经解释过为什么直接改动主题文件夹的内容是不太好的行为了，但现在我想不到其他办法（是我真的菜）。

来到 themes\next\source\css\_common\scaffolding\highlight 下，打开 index.styl。目前是下面这一段决定了行内代码的格式：

1
2
3
4
5
6
7
code {
  @extend $code-inline;
  border-radius: 3px;
  font-size: $table-font-size;
  padding: 2px 4px;
  word-wrap();
}

将其修改为

1
2
3
4
5
6
7
8
code {
  @extend $code-inline;
  border-radius: 3px;
  font-size: $table-font-size;
  padding: 2px 4px;
  white-space: pre-wrap;
  word-break: break-all;  //自动换行，不显示横向滚动条。
}

即可。

原理是让行内代码块拥有自动换行和任意字符间断行的能力，参考 word-break - CSS（层叠样式表） | MDN。未来如果又更新了代码的位置，或者用着其他主题也有这个问题的，在浏览器内用 f12 找一下相应代码的位置再过来改就成。

修改后：

另外值得一提的是，独立代码块自动换行功能也可以在这个文件中修改。但修改后行号显示会出现问题，目前没有解决方法。

（21.2.17 更新）还有一种方法，参考 Misc Theme Settings | NexT，修改主题配置文件的 text_align：

1
2
3
4
5
# Set the text alignment in the posts.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: start
  mobile: start

但恕我直言，这效果。。。

咱还是用不那么优雅的方法获取优雅的效果吧（

已弃用的功能

hexo 文字特效

参考文章：Hexo-NexT 添加打字特效、鼠标点击特效 | 小丁的个人博客

拷贝 activate-power-mode.min.js 代码，放入 source\js 中。

1
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==='object'&&typeof module==='object')module.exports=factory();else if(typeof define==='function'&&define.amd)define([],factory);else if(typeof exports==='object')exports["POWERMODE"]=factory();else root["POWERMODE"]=factory()})(this,function(){return(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.loaded=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p="";return __webpack_require__(0)})([function(module,exports,__webpack_require__){'use strict';var canvas=document.createElement('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText='position:fixed;top:0;left:0;pointer-events:none;z-index:999999';window.addEventListener('resize',function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight});document.body.appendChild(canvas);var context=canvas.getContext('2d');var particles=[];var particlePointer=0;POWERMODE.shake=true;function getRandom(min,max){return Math.random()*(max-min)+min}function getColor(el){if(POWERMODE.colorful){var u=getRandom(0,360);return'hsla('+getRandom(u-10,u+10)+', 100%, '+getRandom(50,80)+'%, '+1+')'}else{return window.getComputedStyle(el).color}}function getCaret(){var el=document.activeElement;var bcr;if(el.tagName==='TEXTAREA'||(el.tagName==='INPUT'&&el.getAttribute('type')==='text')){var offset=__webpack_require__(1)(el,el.selectionStart);bcr=el.getBoundingClientRect();return{x:offset.left+bcr.left,y:offset.top+bcr.top,color:getColor(el)}}var selection=window.getSelection();if(selection.rangeCount){var range=selection.getRangeAt(0);var startNode=range.startContainer;if(startNode.nodeType===document.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();return{x:bcr.left,y:bcr.top,color:getColor(startNode)}}return{x:0,y:0,color:'transparent'}}function createParticle(x,y,color){return{x:x,y:y,alpha:1,color:color,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function POWERMODE(){{var caret=getCaret();var numParticles=5+Math.round(Math.random()*10);while(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+1)%500}}{if(POWERMODE.shake){var intensity=1+2*Math.random();var x=intensity*(Math.random()>0.5?-1:1);var y=intensity*(Math.random()>0.5?-1:1);document.body.style.marginLeft=x+'px';document.body.style.marginTop=y+'px';setTimeout(function(){document.body.style.marginLeft='';document.body.style.marginTop=''},75)}}};POWERMODE.colorful=false;function loop(){requestAnimationFrame(loop);context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<particles.length;++i){var particle=particles[i];if(particle.alpha<=0.1)continue;particle.velocity.y+=0.075;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3)}}requestAnimationFrame(loop);module.exports=POWERMODE},function(module,exports){(function(){var properties=['direction','boxSizing','width','height','overflowX','overflowY','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','paddingTop','paddingRight','paddingBottom','paddingLeft','fontStyle','fontVariant','fontWeight','fontStretch','fontSize','fontSizeAdjust','lineHeight','fontFamily','textAlign','textTransform','textIndent','textDecoration','letterSpacing','wordSpacing','tabSize','MozTabSize'];var isFirefox=window.mozInnerScreenX!=null;function getCaretCoordinates(element,position,options){var debug=options&&options.debug||false;if(debug){var el=document.querySelector('#input-textarea-caret-position-mirror-div');if(el){el.parentNode.removeChild(el)}}var div=document.createElement('div');div.id='input-textarea-caret-position-mirror-div';document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace='pre-wrap';if(element.nodeName!=='INPUT')style.wordWrap='break-word';style.position='absolute';if(!debug)style.visibility='hidden';properties.forEach(function(prop){style[prop]=computed[prop]});if(isFirefox){if(element.scrollHeight>parseInt(computed.height))style.overflowY='scroll'}else{style.overflow='hidden'}div.textContent=element.value.substring(0,position);if(element.nodeName==='INPUT')div.textContent=div.textContent.replace(/\s/g,"\u00a0");var span=document.createElement('span');span.textContent=element.value.substring(position)||'.';div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed['borderTopWidth']),left:span.offsetLeft+parseInt(computed['borderLeftWidth'])};if(debug){span.style.backgroundColor='#aaa'}else{document.body.removeChild(div)}return coordinates}if(typeof module!="undefined"&&typeof module.exports!="undefined"){module.exports=getCaretCoordinates}else{window.getCaretCoordinates=getCaretCoordinates}}())}])});

在 _data/footer.njk 中新增

1
2
3
4
5
6
7
8
9
{# 打字特效 #}
{% if theme.typing_effect %}
  <script src="/js/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = {{ theme.typing_effect.colorful }};
    POWERMODE.shake = {{ theme.typing_effect.shake }};
    document.body.addEventListener('input', POWERMODE);
  </script>
{% endif %}

在主题配置文件中新增：

1
2
3
4
# typing effect
typing_effect:
  colorful: true  # 礼花特效
  shake: false  # 震动特效

即可。

为啥我不用这个呢。。。因为只有在评论区生效，搜索时也要打字但并不生效，在本地部署时没有评论区，不好调试；另外就是这玩意我在手机上试了一下，打了几个字就卡住了，不太行。