👻-平平无奇总结贴
Hexo-平平无奇总结贴
本人乃平平无奇的全栈小菜鸡,并非妥妥的颜值控,博客的构建亦为兴趣驱动,看到好玩的点就会想去尝试,从而一步步构建自身的一人之境。在这个探索过程中我也逐步戒掉了手机和其他社交网络的纷扰,不再是被动接收各种“花路推荐”,而是倾向主动去发现和探索自己想要了解的领域并记录所感、所知、所得。
滴滴滴
万恶的n次电脑故障把俺的资料都清了,😂在之前的项目迁移、数据处理的过程中由于部分项目内容和资源等信息等没有及时做好同步备份😥,于是抽空基于现有的笔记和学习习惯重新折腾博客并梳理学习资源以便于随时复盘和巩固。随着项目迭代升级,发现嵌入的东西也越来越多,此处整体梳理一下个人知识库构建记录过程,便于后续维护和迭代,结合知识库维护不定时更新😜~
本篇总结了个人在构建知识库时所引用到的知识点、技术栈等内容,并相应梳理了在构建过程中遇到的一些问题和解决方案,小伙伴们可有需自取🤯~ 在构建的过程中或许会遇到这样那样的问题,主动发现、提问并解决的过程是很有意义的。不管如何,起步虽易、坚持很难,最重要的是在构建的过程中能够学有所成、学有所思并学以 ...
hexo-butterfly-搜索系统引入
更新记录
更新记录
2021-01-13
搜索功能引入
hexo-butterfly-搜索系统引入本地方式
开发说明:
安装hexo-generator-search,按照文档做相应的配置(格式只支持xml)
1npm install hexo-generator-search --save
在全局配置文件_config.yml文件中添加配置:
具体配置参考官方说明:https://github.com/wzpan/hexo-generator-search
模板参考:
12345search: path: search.xml field: post # post:文章范围、page:页面范围、all:覆盖所有 content: true # 内容是否包含每一篇文章的全部内容 template: # ./search.xml 指定定制的XML模板
修改主题配置文件
12local_search: enable: true
测试结果
Algolia方式 algolia的插件有两种,可根据个人需求择一构建即可。hexo-alg ...
hexo-butterfly-在线聊天
更新记录
更新记录
2021-01-12
引入IM即时通讯、在线聊天
hexo-butterfly-在线聊天 从3.0开始,Butterfly主题内置了多种在綫聊天工具,此处选用daovoice实现在线聊天功能
daovoice
修改主题配置文件
12345# 在线聊天按钮控制chat_btn: true# chat_hide_show为true时,使用工具提供的按钮时,只有向上滚动才会显示聊天按钮,向下滚动时会隐藏按钮chat_hide_show: true
注册并配置daovoice:https://dashboard.daovoice.io/app
注册daovoice:注册账号
注册应用:http://dashboard.daovoice.io/get-started
聊天模板配置
应用设置->聊天设置,可相应设置聊天模板相关提示
配置完成,检测是否成功接入
启动hexo博客项目,可以看到右下角按钮栏有一个聊天按钮,点击即可出现聊天框,回到daovoice控制台处,可有相应提示信息(应用设置->安装到网 ...
hexo-butterfly-评论系统引入
更新记录
更新记录
2021-01-08
引入评论系统:gittalk、unterances 引入
2021-11-14
1.引入评论系统:基于腾讯云构建twikoo评论系统
2.基于微信通知API实现Twikoo消息推送
hexo-butterfly-评论系统引入
评论系统引入摸索
可参考官网提供的评论系统接入方式进行构建,在此过程中也陆陆续续摸索了网友们对各个评论的评价和使用的情况,可结合自身的情况进行调整,从多个方面考虑,不外乎第三方托管应用权限问题、自建服务维护/学习成本、组件引用便捷性等
像是gittalk、gitment等权限过高的github OAuth App(读写授权者所有的公共仓库),有些使用github账号登录可能会自动follow并star的情况,不乏出现权限控制“阴谋论”的猜测,这点官方也没有给出特别明确的方案,但可以从相关issue中去自行判断:关于gitalk权限讨论问题
可以访问github->setting->applications->Authorized OAuth Apps中检查授权 ...
hexo-分类&标签应用
更新记录
更新记录
2021-01-06
基于hexo-分类&标签应用
hexo-分类&标签应用
指令解析
123# 根据scaffolds模板下的page文件创建相应的分类或者标签概念hexo new page xxx# 该指令执行完成会在source下相应生成一个xxx文件夹(内有一个index.md文件)
1.分类&标签创建分类创建
创建分类页面
12# 执行命令创建分类hexo new page categories
构建完成:categories/index.md对应内容
12title: categoriesdate: xxxx-xx-xx xx:xx:xx
修改index.md文件,将页面类型设置为 categories ,主题将自动为这个页面显示所有分类(可根据自身需求配置相关内容)
123title: categoriesdate: xxxx-xx-xx xx:xx:xxtype: "categories"
标签创建
创建标签页面
12# 执行命令创建标签hexo new page tags
构建完成: ...
hexo-butterfly-数据统计相关引入
更新记录
更新记录
2021-01-06
引入数据统计、图表统计相关
2022-02-19
自定义域名调整、网站统计调整
hexo-butterfly-数据统计相关引入1.基础统计字数统计
开发说明
引入字数统计相关插件:
1234# 方式1npm install hexo-wordcount --save# 方式2yarn add hexo-wordcount
修改主题配置文件_config.butterfly.yml
12345wordcount: enable: true post_wordcount: true min2read: true total_wordcount: true
测试结果
针对阅读次数统计除了默认的卜算子还可借助第三方服务firebase进行构建
2.报表统计 借助Echarts.js构建数据报表统计,构建步骤说明如下
在主题配置文件中配置inject->head引入echarts.js文件(可调整版本)
123inject: head: - <script src=&q ...
hexo-butterfly-音频视频播放器嵌入
更新记录
更新记录
2021-01-06
基于hexo-butterfly主题扩展:引入音频播放器、douban组件引入
hexo-butterfly-音频视频播放器嵌入1.音乐引入
开发说明
实现引入有两种方式,一种是在markdown中用原生的html编写(需开启配置文件中aplayerInject配置),一种则是借助hexo-tag-aplayer插件进行渲染(区分全局引用、部分引用)
原生html实现方式1<div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div>
引用hexo-tag-aplayer插件12# 安装hexo-tag-aplayer插件 ...
hexo-butterfly-魔改说明
更新记录
更新记录
2021-01-03
hexo-butterfly 魔改说明
hexo-butterfly-魔改说明
魔改需要注意的点:
单独将主题的配置文件拎出来(butterfly/_config.yml)调整为_config.butterfly.yml,放置在项目根目录,避免主题迭代升级覆盖了原有的配置信息
针对相关资源的引用,不建议把项目所需的文件或者资源放在主题下的source文件夹下,伴随着主题的迭代升级会将里面的内容覆盖掉,因此需要在项目根目录下的source文件夹下创建文件夹存放资源数据
1.hexo-butterfly主题初始化通过 git submodule 来同步第三方主题 一般在选择第三方主题的仓库直接git clone,但实际场景下很有可能在原来主题基础上做一些自定义的小改动,为了保持多终端的同步,需要将这些改动提交到远程仓库,而第三方仓库是无法直接push的。因此如果需要对第三方仓库做相应的扩展则fork该第三方主题仓库(在自己账号下生成一个同名的仓库),随后git clone自己账号下的仓库url,从而可对主题 ...
基于hexo的博客项目基本操作
更新记录
更新记录
2021-01-01
hexo blog项目基本操作构建,不定时更新完善
基于hexo的博客项目基本操作1.hexo基本配置hexo主题更换配置说明 在指定博客项目中的themes文件夹中设定指定名称的文件夹(主题名称),随后在_config.yml文件中修改theme设定(默认是landscape)
1.主题安装
hexo主题官网:https://hexo.io/themes/
在选定主题的github主页下赋值相应的地址
123456# 进入博客项目,应用主题样式[hexo-theme-butterfly](https://github.com/jerryc127/hexo-theme-butterfly)git clone https://github.com/jerryc127/hexo-theme-butterfly themes/xxxx# 如果出现443网络连接等问题,切换ssh的方式进行clone(其中xxxx指代对应主题名称,安装到blog项目下的themes文件夹)git clone -b master ...
基于hexo的静态博客环境搭建
更新记录
更新记录
2021-01-01
基于hexo的静态博客环境搭建
基于hexo的静态博客环境搭建1.环境搭建说明
博客搭建说明
基于hexo框架搭建静态环境博客:
hexo+github pages
hexo+云服务器部署
环境配置说明
node.js 环境安装配置
hexo本地环境安装配置
git环境安装配置
2.环境配置a.本地hexo环境配置配置说明待git、node.js环境安装配置完成(参考官网配置),使用npm指令安装本地hexo环境
12# 进入到指定的文件夹目录(构建一个文件夹hexo-blog用于存放个人博客内容)npm install -g hexo-cli
hexo安装完成后,在hexo-blog文件夹下新建dev-blog项目,并对其进行初始化
123hexo init dev-blogcd dev-blognpm install
hexo init dev-blog执行构建完成,随后查看结果,对应dev-blog内容如下所示
问题说明初始化博客项目出现git clone failed问题
主要问题是github网络连接访问失败, ...