Hexo文章页面透明效果
前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果,实现文章页透明是一种不错的选择。
操作步骤在\themes\butterfly\source\css路径下创建一个xxx.css文件,在文件中添加如下代码:
123456789/* 首页文章栏背景透明 */#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color)}/* 侧边栏透明 */#aside-content .card-widget { background: var(--light_bg_color)}
然后将该文件引入到_config.butterfly.yml文件中inject的head处:
1- <link rel=&quo ...
Hexo页脚养鱼
在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js这里以butterfly主题为例:
123456789# Inject# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)# 插入代码到头部 </head> 之前 和 底部 </body> 之前inject: head: # - <link rel="stylesheet" href="/xxx.css"> bottom: - <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> - <script src=&qu ...
Hexo SEO优化
前言当我们搭建一个网站之后,如果没有做一些相关的搜索引擎SEO优化,那么我们的网站是很难获取来自搜索引擎的流量,用户很难在搜索引擎上搜索到我们网站的内容,所以接下来我们要为Hexo网站做一些简单的搜索优化。
将网站链接提交到百度百度搜索引擎提交入口
有三种验证方式,这里选择HTML标签验证,在themes\next\layout\_partials\head.swing中添加验证代码:
1<meta name="baidu-site-verification" content="code-iqJOekpmDl" />
然后点击完成验证,通过即可。同理将站点链接也提交到Google和搜狗,此处略过。
给站点添加sitemap
Hexo安装sitemap
12npm install hexo-generator-sitemap --save #sitemap.xml适合提交给谷歌搜素引擎npm install hexo-generator-baidu-sitemap --save #baidusitemap.xml适合提交百度搜索引擎
...
Hexo关闭文章评论
如果我们不想让别人评论,那该怎么办呢?实现起来很简单,只需要在头文件加上一行 comments: false 就可以了。
123456789---title: Hexo关闭文章评论categories: - Hexotags: - Hexoabbrlink: 2c1ccad9date: 2022-11-12 12:19:43---
只需要在文章的Front-Matter的位置中添加 comments 就可以了
12345678910---title: Hexo关闭文章评论categories: - Hexotags: - Hexoabbrlink: 2c1ccad9date: 2022-11-12 12:19:43comments: false # :后面和false中间是有一个空格的---
Hexo渲染数学公式
卸载Marked渲染器,安装Markdown it Plus渲染器。
12npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-markdown-it-plus --save
配置_config.yml文件。
12345678910111213141516markdown_it_plus: highlight: true html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ plugins: - plugin: name: markdown-it-katex enable: true - plugin: name: markdown-it-mark enable: false
在博客html的head中加载Katex的CSS样式。
123vi themes/next/layout/_part ...
Hexo增加访客统计
访客统计插件访客统计插件:不蒜子参考链接地址:http://ibruce.info/2015/04/04/busuanzi/
Hexo增加访客统计操作步骤引入脚本1<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
在 hexo 中打开themes/你的主题/layout/_partial/footer.ejs添加上述脚本即可,当然你也可以添加到header中。
引入标签
显示站点总访问量要显示站点总访问量,复制以下代码添加到你需要显示的位置。有两种算法可选:
pv的方式,单个用户连续点击n篇文章,记录n次访问量。123<span id="busuanzi_container_site_pv"> 本站总访问量<span id="busuanzi_value_site_pv"></span>次& ...
Hexo部署出现错误Error: Spawn failed解决方法
Hexo部署过程中可能会出现错误123456789fatal: unable to access 'https://github.com/yourname/yourname.github.io/': Encountered end of fileFATAL { err: Error: Spawn failed at ChildProcess.<anonymous> (/blog/node_modules/hexo-util/lib/spawn.js:51:21) at ChildProcess.emit (events.js:376:20) at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) { code: 128 }} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/ ...
Hexo修改鼠标样式
在/themes/butterfly/source/css路径下创建一个cursor.css文件,在文件中添加如下代码:
123456789body { cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur), default;}a, img { cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), default;}
打开站点主题配置文件_config.butterfly.yml,找到inject,在head处直接引入该文件:
123inject: head: - <link rel="stylesheet" href="/css/cursor.css">
最后 hexo g 部署就能看见 ...
Hexo建立分站
引言有人反馈Butterfly主题有点花哨,这就导致有些文章的阅读体验不好。
这种情况就可以考虑建立了一个分站,使用更为简洁的主题,效果不错。
可以在顶部导航栏点击跳转到分站
操作步骤
根据正常建立Hexo静态博客的步骤一样建站,并选择分站的主题(这里以Next主题为例),在分站的根目录下找到_config.yml文件,将theme修改为next。
1theme: next
同样在分站的根目录下修改_config.yml文件中的url和root。
12url: https://zsyyblog/nextroot: /next/
之后在控制台键入命令hexo g,会发现在分站根目录下生成了public文件夹。在主站的source文件夹中创建名为next的文件夹,再将分站中生成的public文件夹中的内容全部复制到主站的next文件夹中。
设置主站渲染时跳过分站在主站的根目录下修改_config.yml文件中的skip_rende
12skip_render: - next/**
在主站的_config.butterfly.yml文件中设置导航栏分站选项
123menu ...
Hexo生成sitemap
前言站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件,以便更加智能地抓取您的网站。
先确认博客是否被收录在百度或者谷歌上面输入下面格式来判断,如果能搜索到就说明被收录,否则就没有。
1site:zsyyblog.com
安装生成谷歌sitemap插件使用以下命令安装生成谷歌sitemap的插件:
1npm install hexo-generator-sitemap --save
安装生成百度sitemap插件使用以下命令安装生成百度sitemap的插件:
1npm install hexo-generator-baidu-sitemap --save
修改配置文件修改博客目录的_config.yml中添加如下代码:
1234sitemap: path: sitemap.xmlbaidusitemap: path: baidusitemap.xml
在你的博客根目录的public下面如果生成了sitemap.xml以及baidusitemap.xml就表示sitemap生成 ...