Hexo搜索功能
本地搜索当你的博客文章数据不多时,使用 hexo-generator-search 插件给博客添加搜索功能
运行如下命令安装此插件
1npm install hexo-generator-search --save
在博客配置文件 _config.yml 中添加如下代码
1234search: path: search.xml field: post content: true
在主题配置文件 _config.anzhiyu.yml 中修改以下内容为
12345# Local searchlocal_search: enable: true preload: true CDN:
algolia搜索但是当你的博客文章数据很多时,这时建议使用第三方的搜索系统,而这里推荐使用Algolia搜索,毕竟对于个人用户来说几乎是免费的
algolia提供给个人用户上限1万条索引记录和每月1万次的搜索次数,故对于个人用户来说几乎是无限供应
在使用该搜索功能前需要获取下密钥。通过 Github 来注册 algolia
在注册完后,根据如下步骤来创建一个 Index
接下来就是获取a ...
Twikoo评论部署
前言通过使用 Vercel + MongoDB 来部署Twikoo服务免费且不需要服务器,加上Twikoo的独立的配置界面,对小白超级友好
引用站外地址
Twikoo文档
一个简洁、安全、免费的静态网站评论系统
部署申请 MongoDB 账号,之后点击 Create your Atlas account。然后创建免费的 MongoDB 数据库,区域推荐选择 AWS / N. Virginia (us-east-1)
点击 Create Cluster 开始创建数据库用户。记住数据库密码,按步骤设置允许所有 IP(0.0.0.0/0) 地址的连接,填完信息后,点击 Finish and Close
在 Clusters 页面点击 Connect,选择 Connect your appliction,记住数据库连接字符串
连接字符串中的 <password> 修改为你的数据库密码
点击 ...
解决SM.MS图床访问
前言突然间 SM.MS图床 的图片访问不了,同时也发现 https://s2.loli.net/ 也访问不了。通过百度找到了这篇文章:【经验分享】突然我的SM.MS的图床没法访问了(内附解决方法) ,从而解决了问题。
那么先进行排查,找出问题所在:
先确认下我的电脑是具有外网能力的:很简单,因为我都可以访问百度等网页内容
再用浏览器访问一下图片的URL地址,发现报错了,提示如下,错误是 对方关闭了链接,无法访问此网站
有了上面的报错,我决定排查一下 s2.loli.net 的网络畅通情况,这里使用 ping 命令,却发现所返回来的 IP地址 是 127.0.0.1
有了以上几个简单排查,我基本确认了,问题可能出在 域名解析 上面;可能是我的路由器网络偶尔抽风了,导致 s2.loli.net 域名的解析出问题了,所以图片对应的URL就无法访问,自然图片也就无法加载出来了。
解决有了上面的基础判断,基本思路就是想办法把 域名 s2.loli.net 解析到正确的IP上面。
这样就需要修改 C:\Windows\System32\drivers\etc\hosts 这个文件,而现在的关键 ...
哔哩哔哩卡片标签外挂
前言通过标签外挂为博客添加一个b站视频卡片样式。本篇文章原教程来自 Leonus 所发布的 哔哩哔哩卡片标签外挂
bilibili()
function bilibili() {
let dom = document.getElementById('BV1pS4y1t7Lz')
fetch('https://api.320.ink/api/b?id=BV1pS4y1t7Lz').then(res=>res.json()).then(data=>{
dom.innerHTML = `
03:47
${data.title}
${data.view >= 10000 ? (data.view / 10000).toFixed(1) + "w" : data.view}
${data.like ...
首页背景图渐进式加载
前言看了 铭心石刻 的 首页背景图渐进式加载,解决卡顿难题 这篇文章开启了博客首页图片,还是挺不错的
实现以本站使用的主题 anzhiyu 为例(butterfly通用),为首页顶部图配置渐进式加载。这个方法应该也同样适用于一图流的博客背景,有需要的朋友可以自己研究一下~
新建文件 source/js/imgloaded.js 新增以下内容,并按照注释调整图片路径
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899/** * @description 实现medium的渐进加载背景的效果 */class ProgressiveLoad { constructor(smallSrc, largeSrc) { this.smallSrc = ...
基于Memos实现闲言碎语和待办项功能
前言当前的闲言碎语界面是参考 Leonus大佬 的文章 基于Memos实现说说和清单功能。 而成的。过程中数据显示不出来,大佬也通过远程控制我的电脑帮助我解决了问题,感谢大佬
这里建议最好基于自身服务器进行部署。当然,我是通过 小N同学 的 memos纯公益代部署服务 获取 API 进行部署的,这里也有一些大佬们研究出使用 Zeabur 和 Railway 部署 memos
部署通过命令 hexo new page memos 创建页面,并在 _config.anzhiyu.yml 的菜单里使这个界面可以通过点击进去
用户ID的获取方法如下:
注册并登录 Memos
发布一条所有人可见的memos
点击探索接着点击用户名
我这里是使用 小N同学 的 Memos 的,所以这是我最终的 链接地址 ,出现数据就代表成功了
实现粘贴如下代码并按照注释修改内容即可
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 ...
文章统计页面
前言本文教程是来自Eurkon所发布的文章,更加详细的可以前往Hexo 博客文章统计图中查看
步骤执行如下命令创建一个页面
1hexo new page charts
在 /themes/anzhiyu/scripts/helpers/ 目录下新建 charts.js 文件,然后添加以下内容:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414 ...
Github上传主题文件
参考自:Hexo主题themes-文件夹无法提交到GitHub的解决方法
所遇问题在 Github 上发现上传的博客文件唯独 主题文件 没有真正上传。通过百度了解到是因为 themes/anzhiyu 也是从仓库里拉取下来的,他关联到了作者的 git 仓库,所以才提交不上去
123456789101112C:\Users\WeiLin\Desktop\weilin-liao.github (master -> origin)λ git statusOn branch masterYour branch is up to date with 'origin/master'.Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working director ...
侧边栏欢迎语
前言为博客的侧边栏添加一个欢迎语。本篇文章原教程来自 Kouseki 所发布的 在侧边栏添加个性定位欢迎信息
步骤在 腾讯位置服务 中先创建应用,其中应用名称和 应用类型可以随意填写。然后点击添加Key,勾选WebServiceAPI。其中Key名称和描述可任意填写,添加后会生成一个 Key
这里面的白名单 localhost 是有效的,需带上端口号,记得填上自己域名
新建 welcome.js 文件,并粘贴如下代码:
在第6行及第32行分别填入自己的 Key 和 经纬度
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211 ...
利用Github搭建NPM图床
前言通过NPM + Github的方式来搭建一个NPM图床,这种方式是不需要服务器的
存储的图片总大小建议不要超过 1G,否则Github会有人工审核仓库内容,如果发现用来做图床,轻则删库,重则封号。因此为了安全起见,建议在 1G 之前就换个仓库,反正可以创建无数个仓库嘛
步骤在 Github官网 上创建一个仓库,用来存储本地上传来的图片
在本地任选一个文件路径,克隆所选仓库的文件
1git clone git@github.com:blhorizon/BlogImages.git
输入如下指令。根据指示验证完邮箱后就会跳转到如下页面
12345678# 切换回原生源,否则需要你输入账号密码npm config set registry https://registry.npmjs.org# 仅第一次使用需要添加用户npm adduser# 非第一次使用直接登录即可npm login
执行如下指令会生成package.json文件。需要注意的是,事先需要通过搜索确认你的包名是否唯一。同时 git repository 填写的是仓库的 HTTPS,而不是 SSH
1npm ini ...