Hexo自动生成的HTML文件名

Hexo自动生成的HTML文件名,第1张

我们在使用Hexo框架生成静态博客时,其实是将你写好的.md文件输出成HTML文件进行渲染,其中HTML的文件名称就是.md的文件名称。

通常是把.md文件命名成中文的甚至是文章的标题,那么生成HTML文件时也就是中文的文件名了。

这样就会带来一个比较麻烦的问题就是,url的链接过长,不利于记录和同步,而且对搜索引擎不友好。例如 什么样的问题应该使用动态规划 这段中文url就编译成了 %E4%BB%80%E4%B9%88%E6%A0%B7%E7%9A%84%E9%97%AE%E9%A2%98%E5%BA%94%E8%AF%A5%E4%BD%BF%E7%94%A8%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/

我们可以在Hexo生成HTML文件时,修改HTML的命名策略,即将原始的命名方式改为我们自定义的命名方式?

Hexo的根配置文件_config.yml,打开它,修改配置文件

我把他改成这样了,page是目录,执行 hexo g 会在public下生成,我让生成的HTML文件都放在page下, :fileName.html 是HTML的命名格式,其中 fileName 是个变量。这个变量从哪来?

为保证文件名在文件的名字不变,我们把文件名和 Title 关联起来,然后通过 base64 进行编码,这样只要title不变我们文件也不变,同时这个改变最好在进行文档生成就执行,所以我们需要把该功能做成插件 hexo-abbrlink-base64 。

源码如下:

生产的文件格式如下:

使用abbrlink之后,文章的url就会变得非常简洁,例如 https://XXXXXX/pages/5S50ll2222.html

有一些插件会根据标题的拼音、翻译生成permlink,但是我感觉这些都不是好的做法。事实上url不宜太长,将一句话放在url中并不一定增强所谓的seo优化,反倒导致其使用起来相当不便。

就像许多博客平台一样,为每篇文章分配短小且唯一的url即可,无论是看起来还是用起来都很方便。

    docsify可以即时生成文档网站,它可以智能地加载和解析您的Markdown文件并将其显示为网站,但是它不会生成静态html文件, SEO 不够友好。使用简单,支持ie10以上浏览器。官方推荐部署到GitHub Pages上,它也支持服务端渲染。因为服务端渲染麻烦(我不会...)和浏览器不能兼容ie9的原因我放弃了他选择了vuepress,但总的来说使用起来还是很方便,界面也可以,还是比较值得推荐的。

    官方文档: https://docsify.js.org/

    Vue 驱动的静态网站生成器。跟Docsify一样也是以Markdown为中心的项目结构,但是它可以为每个页面预渲染生成静态的html页面,可以通过vue去自定义主题,浏览器支持ie9及以上浏览器,上手程度相对于Docsify要难点,但是部署简单,功能也蛮强大的我最终也选择了它。吐槽一下:左侧导航只支持3级栏目导航(h1-h3),没有Docsify灵活。

    官方中文网: https://www.vuepress.cn/

    Docute和Docsify差不多,但是它不支持ie...,如果不考虑ie兼容性问题的可以参考一下

    官方中文网: https://docute.org/zh/

    也是使用Markdown解析文章,能够兼容ie9,但是它是一个博客框架,它主题样式不太适用于帮助文档,所以我没有考虑它,单从文档网站的角度的话还是推荐使用的,兼容性比较好,上手度简单。

    官方链接: https://hexo.io/

    GitBook是一款文档编辑工具,单据说更像是一个现代的文档平台,无法实现个性化部署,所以暂时没有考虑。

    官网链接: http://caibaojian.com/gitbook/

    Nuxt.js 是一个基于 Vue.js 的通用应用框架,vuepress能做的,它理论上能做,但是Nuxt 是为构建应用程序而生的,VuePress则专注以内容为中心的静态网站,所以就文档网站我更推荐VuePress

    官网链接:  https://www.nuxtjs.cn/

为了让博文可以被Google搜索到,需要配置站点地图(Sitemap)

在开始之前需要注意,本文适用于 NexT主题 ,其他主题的设置可能会有不同。本文只适用于Google,Baidu的坑待填。

修改 主题配置文件 ( themes/next/_config.yml ):

在终端中使用npm安装sitemap插件:

生成静态文件

此时在public目录下可见 sitemap.xml ,即已完成站点地图的生成,同时可在个人博客主页见到站点地图标签,点击可以看到xml文件。

首先你需要一个谷歌账号,然后使用 Google Search Console服务 ,点击立即使用!

接下来你可以看到如下的验证界面

选择第二种,填写你的Github Page主页地址后点击继续,记得地址前面的协议 https:// 别忘了

随后你可以看到如下几种方式用以验证你对站点资源的所有权

打开 主题配置文件 ( /themes/next/_config.yml ),找到如下片段:

在Google Search Console选择HTML标记验证,Google会提供如下的元标记

将 content= 后面的xxxxx填到 主题配置文件 的 google_site_verification: 之后,记得冒号后需留一空格,同时不要忘记引号:

保存文件,在 终端 中生成并部署Hexo静态文件

部署成功后,回到Google Search Console,点击验证、完成。

来到Google Search Console,点击左侧边栏中的网址检查,输入你的Github Page主页。

还是Google Search Console,点击左侧边栏中的 站点地图 ,添加新的站点地图,在主站地址后面填入 sitemap.xml ,即与前面生成的站点地图文件名称相同!

一开始,Google有可能显示无法获取站点地图(至少我这里情况如此),我等待了大约24h,再次添加了同名的站点地图,即显示成功,如图

有许多情况可能导致获取站点地图失败,需要仔细分析原因,记得检查站点地图的地址名称是否正确,包括大小写。

如果想要让更多的人看到你的博客,建议在你关心的社区(比如呀)发布你的文章,同时,建议参见 搜索引擎优化SEO 。同时,需要优化桌面端和移动端的性能以提供更好的用户体验。SEO和优化性能大概是个很深的坑,以后有机会慢慢填

欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/503101.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-06-16
下一篇2023-06-16

发表评论

登录后才能评论

评论列表(0条)

    保存