抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

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

作者:IT王小二
博客:https://itwxe.com

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

通常这个配置都在 /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中,文章就可以使用相对路径引用图片资源了。

{% gallery %}

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

{% endgallery %}

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

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

当然,首推各种图床。

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

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

为了让这个 URL 地址不变,需要借助插件 hexo-abbrlink

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

站图生成后只需要 GoogleSearchConsole百度资源管理平台 提交 sitemap 即可。

需要注意的是有些搜索引擎已经不支持索引型 sitemap(比如百度),所以为了搜索引擎能够正常抓取。最好不要添加总的 sitemap.xml 文件,而是添加多个站图文件,例如我添加的链接:https://www.itwxe.com/page-sitemap.xmlhttps://www.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

都读到这里了,来个 点赞、评论、关注、收藏 吧!

评论



Copyright Author Powered Theme

ICP