Hexo通用问题集锦

IT王小二约 1254 字

Hexo通用问题集锦

作者：IT王小二

博客：https://itwxe.comopen in new window

记录一下Hexo搭建博客的常见问题。

一、取消页面底部的主题等信息

通常这个配置都在 /themes/主题名称/layout/_partial/footer.ejs 的类似路径文件中，以 yelee 这个主题为例。

打开 /themes/yelee/layout/_partial/footer.ejs 文件，注释如下代码。

<!-- 取消底部 Hexo Theme Yelee by MOxFIVE -->
<!--
    <div class="footer-right">
        <a href="http://hexo.io/" target="_blank" title="<%= __('tooltip.Hexo') %>">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="<%= __('tooltip.Yelee') %>  v<%= theme.Yelee %>">Yelee</a> by MOxFIVE <i class="fa fa-heart animated infinite pulse"></i>
    </div>
-->

不过通常情况不建议注释，毕竟作为一名程序员深知开源不易！

二、在底部添加备案信息

上传备案图片到服务器：通常这个配置也在 /themes/主题名称/layout/_partial/footer.ejs 的类似路径文件中，以 yelee 这个主题为例。

上传到备案图片到 /themes/yelee/source/img 目录下，我的图片名称叫做 beian.png。

添加备案信息：在 /themes/yelee/layout/_partial/footer.ejs 文件注释的 Hexo Theme Yelee by MOxFIVE 位置之前添加代码，样式可自行调整。

注：备案链接、备案号、图片地址(我的为: /img/beian.png)按自己需要修改。

<!-- 网站备案号 -->
<div>
    <a target="_blank" href="你的备案链接" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
    <img src="图片地址" style="float:left;"/>
    <p style="font-size:16px; float:left; height:20px; line-height:20px; margin: 0px 0px 0px 5px; color:#333;">你的备案号</p>
    </a>
</div>
<!-- 网站备案号 -->

三、本地图片插入问题

首先配置 hexo 目录下的 _config.yml, 将 post_asset_folder: false 更改为 post_asset_folder: true。

将_config.yml文件中的配置项 post_asset_folder 设为 true 后，执行命令 $ hexo new post_name，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

![图片说明](img.jpg)

hexo 3.0以上版本也可以使用如下语法应用

{% asset_img img.jpg 图片说明 %}

当然，首推各种图床。

四、文章生成唯一永久链接

原始 Hexo 就会显示一串以日期、文件位置、标题为 URL，特别是 Markdown 的名称为中文时这种又臭又长的 URL 不适合管理，所以，需要同一一个唯一的永久连接，这样的话无论日期、文件位置、标题怎么修改都是唯一的一个地址。

为了让这个 URL 地址不变，需要借助插件 hexo-abbrlinkopen in new window。

1. 安装插件

Hexo 站点目录下，执行命令。

npm install hexo-abbrlink --save

2. 修改站点配置文件

修改 Hexo 仓库目录下的配置文件 _config.yml，定位到：permalink: :year/:month/:day/:title/ 。

把这行代码修改如下，修改后重启 Hexo 即可生效。

permalink: posts/:abbrlink/
# abbrlink config
abbrlink:
  alg: crc32
  rep: hex

alg 和 rep 参数有四种组合，官方示例如下：

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html

crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

五、生成站图(2021-04-20添加，2021-08-17修改)

1、安装对 SEO 友好的站图插件。

npm install hexo-generator-seo-friendly-sitemap --save

2、hexo 站点配置文件 _config.yml 添加内容。

sitemap:
  path: sitemap.xml
  tag: false # 排除标签页
  category: false # 排除分类页

3、清除缓存、重新编译，在 public 目录下生成站图，在 public 目录下看到 sitemap.xml 即代表成功了，同时还会生成 page-sitemap.xml 和 post-sitemap.xml.

hexo clean && hexo g

站图生成后只需要 GoogleSearchConsoleopen in new window 和 百度资源管理平台open in new window 提交 sitemap 即可。

需要注意的是有些搜索引擎已经不支持索引型 sitemap（比如百度），所以为了搜索引擎能够正常抓取。最好不要添加总的 sitemap.xml 文件，而是添加多个站图文件，例如我添加的链接：https://itwxe.com/page-sitemap.xml 和 https://itwxe.com/post-sitemap.xml。

六、使用Terser压缩代码(2021-05-10添加)

1、全局安装 gulp 依赖。

cnpm install -g gulp

2、站点目录下执行命令添加各种插件依赖。

cnpm install gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-terser --save-dev

3、站点目录下创建文件 gulpfile.js ，添加内容。

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var terser = require('gulp-terser');

// 压缩css文件
const minify_css = () => (
    gulp.src(['./public/**/*.css'])
        .pipe(minifycss())
        .pipe(gulp.dest('./public'))
);

// 压缩html文件
const minify_html = () => (
    gulp.src(['./public/**/*.html','!./public/{lib,lib/**}'])
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
)

// 压缩js文件
const minify_js = () => (
    gulp.src(['./public/**/*.js', '!./public/**/*.min.js','!./public/{lib,lib/**}'])
        .pipe(terser())
        .pipe(gulp.dest('./public'))
)

module.exports = {
    minify_html: minify_html,
    minify_css: minify_css,
    minify_js: minify_js
};
gulp.task('one', gulp.parallel(
    minify_html,
    minify_css,
    minify_js
))

gulp.task('default', gulp.series('one'));

4、运行压缩命令。

gulp

七、SEO优化(2021-08-17添加)

SEO 配置优化。

  • 为所有外部链接添加 rel="external nofollow"，对 SEO 友好。
  • 添加 target="_blank", 在新窗口或标签中打开外部链接。

安装插件：

npm install hexo-autonofollow --save

在站点配置文件的最后面添加配置，域名替换为自己的s：

nofollow:
  enable: true
  exclude:
    - itwxe.com
    - www.itwxe.com