本文最后更新于:1 个月前
写在前面 我们演示使用 Hexo 静态站点生成器 快速搭建个人博客,并使用 Gitee / GitHub 托管 静态站点
2024年8月9日
自从昨天晚上优化完毕博客所有首页图片之后,都由不得每天想点开多看两眼这全新的博客界面。
建站五百多天,也是时候给这篇博客栏目添加一些新鲜血液了,从来没有正式介绍过我的个人博客 - Memory‘s Blog。
我是从去年六月初开始在个人博客上着手记录个人生活的,到现在也有十四个月了,时间过得真快。
一年多的生活记录,每天的日常生活我都会尽量记录在《我的编程生活之旅》栏目中,事无巨细。
简直无法想象没有成功搭建个人博客之前,我的生活到底是怎样的。
有太多有趣的事情没有记录下来,有太多值得纪念的瞬间慢慢在脑海中消散,而自己对此却全然不知。
遗憾是人生之常事,但如果选择忘记甚至是丢弃自己曾经拥有过的那些快乐时光,那无疑是最大的遗憾。
我在今年一月份创建的全新栏目《岁月如歌:我的人生回忆录》,那天早上我第一次意识到原来我的过去也是那么精彩,那么值得回味。
仅仅是因为那些是过去的事情就不值得怀恋了吗,恰恰是那些曾经我经历过的事情,才最终成就了今天完整的我。
上个月应该是九号左右的某个晚上,在我兄弟的陪伴下,我躺在床上梦呓般地回顾了我短暂又精彩绝伦的上半年。
又过了半个多月,我俩又不禁回忆起过去十几年的岁月,同上学时期经常聊起小时候那般,我来聊起了上学的那段时光。
为什么当时不能主动点呢,我简直受不了三五年前唯唯诺诺的我自己,我兄弟也是一样的。
现在回忆起以前那些受尽“苦难”的生活,有时候竟会觉得滑稽可笑,看来只要时间过得足够久,连自己都没那么容易相信和理解自己了。
但那些日子又何尝不精彩呢,我恨不得用现在就用文字把它们记录下来,把我身上发生过的所有故事都写下来,因为那才是真正的我啊。
整理成册,在我老去的时候,在一个平平无奇的下午茶时间,拉出一把躺椅躺上去慢慢翻看,回顾我这短暂又充实的一生。
写下去吧,这个信念要贯穿几十年的岁月。
希望在十年后某一个闲适的下午,我还能坐在电脑桌前,用心品读自己曾经写下的平凡故事。
翻看一篇文章,续写下去,看看十年的岁月是否让我的初心改变。
十年后的我已然不在年轻,十年后的我可能对生活缺少了更多的激情,十年后的我也许找到的生活全新的意义。
十年的岁月不会改变我的初心,更不会消磨我的勇气。
二零二四年八月九日下午三点三分,我热烈期盼那一天的到来。
期待那一天的到来。
正文 博客搭建 前言 常见的博客站点生成器有很多,最主要的有俩:Hexo 和 Hugo
那我们就先使用 Hexo 来搭建了
Hexo 是一个静态博客站点生成工具,可以把 Markdown 格式的文档转换成静态页面,非常适合用来作个人技术博客
其实所有的搭建流程上官网就能找到,跟着文档一步一步来也能完成,那我们这个笔记就是要教会你快速完成初始搭建
先放几个辅助资源:
各站点生成器的入口:Static Site Generators - Top Open Source SSGs | Jamstack
Hexo 官网:建站 | Hexo
准备工作 使用 Hexo 搭建博客前要做的准备(这里不细讲)
也没别的,就两点:Node.js 和 Git
有关 Node.js 环境安装及相关知识,可以移步至《配置指南-掌握 Node-js 配置》一文中进行相关了解
有关 Git 基础知识,可以移步至《入门指南:掌握 Git 的基本操作及进阶学习》一文中进行相关了解
建站
全局安装 hexo-cli(这玩意儿是个构建工具,就是用来安装 hexo 的)
如你所见,_config.yml 就是全局配置文件,我们建议复制一个_config.fluid.yml 拷贝初始配置,然后在_config.yml 里大刀阔斧地修改
至此,基本的 hexo 博客站点搭建完成
主题不好看,接下来我们着手配置主题
主题配置 默认主题 这里可以在 hexo 官方文档里详细了解,修改默认主题定制特色主题
第三方主题 这里推荐一个 Hexo 搭建个人博客教程:Hexo 全过程记录 从 Centos 到 Fluid - IRIDIUM-SUB - 博客园 (cnblogs.com)
这个教程超级详细,从博客的搭建到主题配置介绍一应俱全,非常值得一看
比起默认主题,我会更加建议使用第三方主题,更加优秀和美观
这里会简单地涉及到如何安装各式各样的主题,详细的主题配置请前往《大道至简:快速搭建博客与文档站点的终极指南 3-0》一文中学习
各站点生成器的入口:Static Site Generators - Top Open Source SSGs | Jamstack
在这个网站下,进入 Hexo 主题选择(都是人家写好的,会拉下来,拿来用就行),这里拿 fluid 主题举例
看文档,按部就班地走就行:
执行下以下命令,成功访问到 fluid 主题的博客页面了,效果如下:
这个静态页面是由 Hexo 帮我们在本地搭建了一个 Web 服务,来支持我们访问的,适用于开发环境下的调试
实际生产过程中,我们需要把它部署到 Nginx 服务器上,方法也非常简单,
每个主题都有好多配置,那我们总要配置自己的特色主题吧?改成我们自己喜欢的,那就执行下面这行命令:
这时 theme 文件夹下找到一个_config.yml 文件(往下找几层),这里我们就能自由配置、定制主题了
详细的页面配置、主题配置在《大道至简:快速搭建博客与文档站点的终极指南 3-0》一文中有所介绍,可跳转阅读
下面放上我的博客访问地址以及具体的页面效果:
使用 Hexo 搭建个人博客站点教程结束(2023/05/27 晚)
2024 年 4 月 11 日
一年时间一晃而过,这么快就 2024 年四月份了,我的个人博客网站也在不断地充实。
截至二零二四年二月二十七日,下午四时四十五分,我的个人博客共有七十余篇博文,总计九百余张图片、五十余万文字
我的个人博客网站博文更新到七十五篇了!
再展示一下现在的博客吧:s
晚风几许撩人意,夕阳半刻醉人心
2024年8月8日
一晃又是四个多月,截至今晚:
二零二四年八月八日晚十点十三分,所有八十三篇博文首页图片配置工作圆满结束,值得留念。
这项工作拖欠很长时间了,今晚总算完成,感觉整个博客都焕然一新。
放几张截图留念一下吧:
上面几张是首页图,上个月中旬那会儿就已经更新完毕了,再展示一下现在的文章列表:
有没有焕然一新的感觉呢,这些都是我最喜欢的图片呢。
这次的文章首页整顿就先到这里,下次再见。
站点生成 前言
常见的文档站点生成器有很多,最主要的有:VitePress、Vuepress 和 Docsify 等
那我们就先使用 Vuepress 来生成文档站点了
其实所有的搭建流程上官网就能找到,跟着文档一步一步来也能完成,那我们这个笔记就是要教会你快速完成初始搭建
先放几个辅助资源:
Docsify 官网:
准备工作
那必然是提前配置好 Node.js 环境了,这里不详细阐述,如有需请移步至文章:《配置指南-掌握 Node.js 配置》
建站
这部分我们会给出两种流行的文档站点生成器:VuePress 和 VitePress
Vitepress 与 VuePress 相似度很高,相对来讲,VitePress 更加轻量级、易上手
VuePress
推荐阅读:(2023/11/27 晚) Getting Started | VuePress (vuejs.org)
VuePress 起步 - VuePress 中文网 (caibaojian.com)
快速上手 | VuePress (vuejs.org)
跟着官网操作,简简单单(手动安装和快速安装二选一即可,前者能更好的清楚执行每一条命令的目的,后者则是一键安装):
快速安装在指定目录下,执行一条命令
1 yarn create vuepress-site [optionalDirectoryName]
目前还没有解决,待解决。。。
手动安装,跟着官网一步步操作:
创建并更改为新目录
1 mkdir vuepress-starter && cd vuepress-starter
1 mkdir docs && echo '# Hello VuePress' > docs/README.md
1 2 3 4 5 6 { "scripts" : { "docs:dev" : "vuepress dev docs" , "docs:build" : "vuepress build docs" } }
VuePress(新的尝试)
哎,全局安装 Vuepress 不支持了,本来挺好用的:
1 yarn global add vuepress / npm install -g vuepress
直接在 Github 下载了官方文档源码,呃,还是局部安装吧
下载地址:vuejs/vuepress at v1.9.10 (github.com)
拉取代码后执行依次以下命令,即可成功在本地部署文档站点:
这两天在研究这个 Vuepress,感觉比 VitePress 更成熟、更好用
等我把局部安装的配置搞清楚之后,再来此处作详细记录(2023/11/27 晚)
Vdoing
1 2 3 [超链接 ](http://www.baidu.com ) [Markdown ](https://xugaoyi.com/pages/ad247c4332211551/ )
链接前添加http
或https
,这样就可以展示超链接后的图标了:(2023/12/14 晚)
VitePress
安装构建工具 vitepress,可以选择执行以下命令中的其中一条:
1 npm install -D vitepress
注意,如若使用后两条命令来安装 vitepress,请确保 pnpm 和 yarn 包管理器已正确安装
有兴趣了解这方面内容的话,请转移至《理解 npm、pnpm 和 yarn:选出最适合你的包管理器》一文中查看
我们选择使用 yarn 来安装,效果如下:
等待安装完成后,方可执行下一步操作:
初始化构建工具 vitepress
当然,选择执行以下其中一条命令即可:
执行命令后,会提示你输入初始化路径、项目名、项目描述和主题配置等等,我们这里就全部设置为默认
这一步执行完毕后,会在本地指定路径生成 VitePress 文档站点目录,效果如下:
有关该目录下文件作用以及相关配置,将会在《大道至简:快速搭建博客与文档站点的终极指南 3-0》一文中详细讲解到,接下来我们在本地启动文档站点
在该目录下,执行以下命令中的其中一条:
我们可以看到,整个页面的结构和排版都是默认主题样式的
主题配置 默认主题
我们可以在主题官网里找到相关配置,在默认主题的基础上,定制自己的主题风格
相关指导资料:
第三方主题
或者选择使用 VuePress 的第三方主题,VuePress 提供了许多优秀的第三方主题供我们使用
这些主题可以看官方文档,自己玩玩,这里不详细介绍
我们这里以 vuepress-theme-hope 为例,下载安装该主题,执行以下两条命令其一:
1 pnpm create vuepress-theme-hope hope-project
1 pnpm create vuepress-theme-hope add .
执行命令,安装过程中会有提示,我们这里都选择默认,如图所示:
安装完成,在 hope-project 目录下执行以下任意一条命令,在本地开启文档站点服务
站点生成器
vuepress(支持 vue 语法、插件丰富)(2023/08/22 午)
docsify(简单易用、插件多、轻量)
hugo(主题略少)
hexo(主题略少)
vitepress
storybook(展示组件库)
wordpress(搭建个人博客)
docute
dumi(React 展示项目文档,展示组件库)
jekyll
gatsby
评论功能
2024 年 7 月 17 日
🌭 推荐阅读:
Hexo 博客添加评论功能 - eagle.supper - 博客园 (cnblogs.com)
Hexo giscus 配置评论功能_hexo 博客 giscus-CSDN 博客
hexo 博客的评论功能-腾讯云开发者社区-腾讯云 (tencent.com)
Hexo 博客添加 GitHub 评论功能-阿里云开发者社区 (aliyun.com)
为使用 hexo 搭建的博客加入评论系统 gitalk - 简书 (jianshu.com)
Hexo 搭建博客系列:(五)Hexo 添加不蒜子和 LeanCloud 统计无标题文章 - 简书 (jianshu.com)
hexo 魔改 | 添加 Valine 评论系统_hexo butterfly valine 评论-CSDN 博客
🍖 尤其推荐下面这篇文档,因为我使用的 Hexo 建站主题是 Fluid ,不同主题的评论插件相关配置还是有些许出入。
hexo-fluid 添加 valine 评论记录-腾讯云开发者社区-腾讯云 (tencent.com)
基本实现
2024 年 7 月 17 日
介绍 | Valine 一款快速、简洁且高效的无后端评论系统。
我们使用 Valine 无后端评论系统,这篇文档写的相当详细了,跟着教程走就行。
LeanCloud
这个网站下注册登陆账号,再经过实名制和邮箱验证之后,创建的应用就可以正常使用了。
进入控制台 后点击左上角创建应用
:
创建应用:
应用创建好以后,进入刚刚创建的应用,选择左边的设置
>应用凭证
,然后就能看到你的AppID
和AppKey
了:
然后在博客主题的 _config.yml
下做好相关评论插件的配置:
1 2 3 4 5 6 7 8 comments: enable: true type: valine
搜索 valine
,可看到如下,将 enbled:true
, 并填写 appid
, appkey
和 REST API 服务地址。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 valine: appId: T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz appKey: XFkgzzvzNo3J3uNCbBiSOFKc path: window.location.pathname placeholder: avatar: "retro" meta: ["nick" , "mail" , "link" ] requiredFields: [] pageSize: 10 lang: "zh-CN" highlight: false recordIP: false serverURLs: https://t1huhh9k.lc-cn-n1-shared.com emojiCDN: emojiMaps: enableQQ: false
还需要设置安全域名,用来维护数据安全,不过暂时我用不到的:
再次尝试部署博客,可以看到博文的评论功能已经开启了:
可以自由选择评论昵称,邮箱地址,输入评论信息就能直接在文章下发表评论了。
我叫来我的好兄弟测试了一番,评论功能一切正常,我这个站主还能删评论的,真不错:
在网页中引入无后端的 valine 评论系统,使用 leancloud 作为免费存储和评论管理 - 简书 (jianshu.com)
样式美化
2024 年 7 月 17 日
把 valine.ejs 下的这段代码,粘贴到 about.ejs 最后,就能实现关于页面的评论功能了:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <% if (theme.valine.appId && theme.valine.appKey) { %> <div id="valine"></div> <script type="text/javascript"> Fluid.utils.loadComments('#valine', function() { Fluid.utils.createScript('<%= url_join(theme.static_prefix.valine , 'https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js' ) %>' , function() { var options = Object.assign( <%- JSON .stringify(theme.valine | | {}) %>, { el: "#valine" , path: <%= theme.valine.path %>, master: "<%= theme.valine.master%>" , friends: "<%= theme.valine.friends%>" , tagMeta: ["博主" ,"友人" ,"访客" ], } ) new Valine(options); Fluid.utils.waitElementVisible('#valine .vcontent' , () => { var imgSelector = '#valine .vcontent img:not(.vemoji)' ; Fluid.plugins.imageCaption(imgSelector); Fluid.plugins.fancyBox(imgSelector); }) }); }); </script> <noscript>Please enable JavaScript to view the comments</noscript> <% } %>
Hexo’s Fluid 主题私人定制(持续更新) - Eren の 宇宙船 (erenship.com)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <div id ="vcomments" > </div > <script type ="text/javascript" > function loadValine ( ) { addScript ( "https://cdn.staticfile.org/valine/1.4.14/Valine.min.js" , function ( ) { new Valine ({ el : "#vcomments" , app_id : "T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz" , app_key : "XFkgzzvzNo3J3uNCbBiSOFKc" , placeholder : "留下点什么叭... ᶘ ᵒᴥᵒᶅ(自行修改)" , path : window .location .pathname , avatar : "monsterid" , meta : ["nick" , "mail" , "link" ], pageSize : "10" , lang : "zh-CN" , highlight : false , recordIP : false , serverURLs : "https://t1huhh9k.lc-cn-n1-shared.com" , }); } ); } createObserver (loadValine, "vcomments" ); </script > <noscript > Please enable JavaScript to view the <a href ="https://valine.js.org" target ="_blank" rel ="nofollow noopener noopener" > comments powered by Valine.</a ></noscript >
MD5 在线加密 - MD5 加密工具 - MD5 在线生成 (bmcx.com)
研究了一中午,评论功能不需要优化了,本来就是为了无需登录而设置的,允许读取 QQ 信息头像也不错的。
自定义背景:
在 themes/next/layout/_partials/footer.ejs 中引入:
1 2 3 4 5 6 7 8 9 10 11 <!-- 评论框美化 --> <style> min-height: 10rem; background-image: url(http://blog.memory-life.icu/bradge.jpg); background-size: contain; background-repeat: no -repeat; background-position: right; background-color: rgba(255,255,255,0); resize: none;} </style>
浏览量
2024 年 7 月 17 日
Hexo-fluid 主题设置统计博客阅读量_hexo-theme-fluid 字数统计-CSDN 博客
Hexo 搭建博客系列:(五)Hexo 添加不蒜子和 LeanCloud 统计无标题文章 - 简书 (jianshu.com)
1 2 3 4 5 6 7 8 9 views: enable: true source: "leancloud" format: "{} 次"
1 2 3 4 5 6 7 8 9 10 11 12 13 14 leancloud: appId: T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz appKey: XFkgzzvzNo3J3uNCbBiSOFKc server_url: https://t1huhh9k.lc-cn-n1-shared.com path: window.location.pathname ignore_local: false
配置完成后,部署博客。从部署的过程就能看出来,访问次数统计其实已经生效了:
好像还不管用。。。
介绍 | Valine 一款快速、简洁且高效的无后端评论系统。
1 2 3 4 5 <!-- id 将作为查询条件 --> <span id="<Your/Path/Name>" class="leancloud_visitors" data-flag-title="Your Article Title"> <em class="post-meta-item-text">阅读量 </em> <i class="leancloud-visitors-count">1000000</i> </span>
身份标识
2024 年 7 月 17 日
Hexo’s Fluid 主题私人定制(持续更新) - Eren の 宇宙船 (erenship.com)
MD5 在线加密 - MD5 加密工具 - MD5 在线生成 (bmcx.com)
分别加密自己的邮箱号和好友的邮箱号,得到 MD5 字符串:
更新配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 valine: appId: T1hUHH9Ks1ggG9DBE3HgUPpV-gzGzoHsz appKey: XFkgzzvzNo3J3uNCbBiSOFKc path: window.location.pathname placeholder: 填取QQ邮箱号后评论,支持读取头像以及新消息提醒,留下点什么叭... ᶘ ᵒᴥᵒᶅ avatar: Gravatar meta: ["nick" , "mail" , "link" ] requiredFields: [] pageSize: 10 lang: "zh-CN" highlight: true recordIP: false serverURLs: https://t1huhh9k.lc-cn-n1-shared.com emojiCDN: emojiMaps: enableQQ: true master: 8c9b6d6637904da62d74d019cc6982de friends: 0188229a9cfc284176ea9135cb9514cc visitor: true
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <% if (theme.valine.appId && theme.valine.appKey) { %> <div id="valine"></div> <script type="text/javascript"> Fluid.utils.loadComments('#valine', function() { Fluid.utils.createScript('<%= url_join(theme.static_prefix.valine , 'https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js' ) %>' , function() { var options = Object.assign( <%- JSON .stringify(theme.valine | | {}) %>, { el: "#valine" , path: <%= theme.valine.path %>, app_id: "<%= theme.valine.appid %>" , app_key: "<%= theme.valine.appkey %>" , placeholder: "<%= theme.valine.placeholder %>" , avatar: "<%= theme.valine.avatar %>" , ............................................ master: "<%= theme.valine.master%>" , friends: "<%= theme.valine.friends%>" , tagMeta: ["博主" ,"友人" ,"访客" ], visitor: <%= theme.valine.visitor %> // 阅读量统计 } ) new Valine(options); Fluid.utils.waitElementVisible('#valine .vcontent' , () => { var imgSelector = '#valine .vcontent img:not(.vemoji)' ; Fluid.plugins.imageCaption(imgSelector); Fluid.plugins.fancyBox(imgSelector); }) }); }); </script> <noscript>Please enable JavaScript to view the comments</noscript> <% } %>
这样,博主 、友人 和访客 的身份就能成功区分了:
自定义背景
2024 年 7 月 17 日
Hexo NexT 评论系统 Valine 的使用_hexo next valine-CSDN 博客
1 2 3 4 5 6 7 8 9 10 11 12 <!-- 评论框美化 --> <style> min-height: 11rem; background-image: url(http://blog.memory-life.icu/pathway0716.jpg); background-size: contain; background-repeat: no -repeat; background-position: right; background-color: rgba(255,255,255,0); resize: none;} </style>
顺便了解下 CSS 基础语法,font-size 字体大小自适应:
CSS 字体大小怎么实现自适应屏幕 - 问答 - 亿速云 (yisu.com)
使用rem
实现自适应屏幕:
1 2 3 4 5 6 html { font-size : 16px ; }h1 { font-size : 2rem ; }
复制代码
使用em
实现自适应屏幕:
1 2 3 4 5 6 body { font-size : 16px ; }h1 { font-size : 2em ; }
复制代码
使用vw
实现自适应屏幕:
1 2 3 h1 { font-size : 5vw ; }
2024 年 7 月 22 日
关于页评论背景失败,不搞了就这样子吧。
1 2 3 4 5 6 7 8 9 10 11 <!-- 评论框美化 --> <style> #valine{ height: 20vh; background-image: url(http://blog.memory-life.icu/pathway0716.jpg); background-size: contain; background-repeat: no-repeat; background-position: right 6vh; background-color: rgba(255,255,255,0); resize: none;} </style>
自定义表情
2024 年 7 月 17 日
自定义表情 | Valine 一款快速、简洁且高效的无后端评论系统。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 设置Bilibili表情包地址 emojiCDN: '//i0.hdslb.com/bfs/emote/' , // 表情title和图片映射 emojiMaps: { "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png" , "tv_亲亲" : "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png" , "tv_偷笑" : "bb690d4107620f1c15cff29509db529a73aee261.png" , "tv_再见" : "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png" , "tv_冷漠" : "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png" , "tv_发怒" : "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png" , "tv_发财" : "34db290afd2963723c6eb3c4560667db7253a21a.png" , "tv_可爱" : "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png" , "tv_吐血" : "09dd16a7aa59b77baa1155d47484409624470c77.png" , "tv_呆" : "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png" , "tv_呕吐" : "9f996894a39e282ccf5e66856af49483f81870f3.png" , "tv_困" : "241ee304e44c0af029adceb294399391e4737ef2.png" , "tv_坏笑" : "1f0b87f731a671079842116e0991c91c2c88645a.png" , "tv_大佬" : "093c1e2c490161aca397afc45573c877cdead616.png" , "tv_大哭" : "23269aeb35f99daee28dda129676f6e9ea87934f.png" , "tv_委屈" : "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png" , "tv_害羞" : "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png" , "tv_尴尬" : "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png" , "tv_微笑" : "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png" , "tv_思考" : "90cf159733e558137ed20aa04d09964436f618a1.png" , "tv_惊吓" : "0d15c7e2ee58e935adc6a7193ee042388adc22af.png" , },
2024 年 7 月 22 日
继续来 B 站抓取更多表情:
邮箱提醒
2024 年 7 月 17 日
zhaojun1998/Valine-Admin: 一个 Valine 的拓展应用,用来增强 Valine 的邮件通知。 (github.com)
自定义页面
2024 年 7 月 17 日
我直到今晚才发现,使用 Hexo 搭建的静态博客站点本质上还是前端三件套构成的,有很高的自由度来重构页面。
我开始尝试去了解各个页面对应的代码位置,再用我贫瘠的 HTML + CSS 基础去美化页面,实现自定义页面。
中台前端框架 AntDesignPro document.ejs 文件详解-CSDN 博客
页脚优化
2024 年 7 月 17 日
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class="footer-inner"> <% if (theme.footer.content) { %> <div class="footer-content"> <%- theme.footer.content %> </div> <% } %> <% if (theme.footer.statistics.enable) { %> <%- partial('_partials/footer/statistics.ejs' ) %> <% } %> <% if (theme.footer.beian.enable) { %> <!-- 备案信 ICP for China --> <%- partial('_partials/footer/beian.ejs' ) %> <% } %> <% if (theme.web_analytics.cnzz) { %> <!-- cnzz Analytics Icon --> <span id="cnzz_stat_icon_<%= theme.web_analytics.cnzz %>" style="display: none"></span> <% } %></div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <footer class="text-center mt-5 py-3"> <%- theme.footer.content %> <!-- 添加网站运行时间 --> <div class="footer-content"> <div> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script> var now = new Date(); function createtime(){ var grt= new Date("04/03/2020 00 :00:00");//此处修改你的建站时间或者网站上线时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24 ; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){ hnum = "0" + hnum; } minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){ mnum = "0" + mnum; } seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){ snum = "0" + snum; } document.getElementById("timeDate").innerHTML = "🚀  " +dnum+" 天"; //此次自定义显示内容 document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒" ; } //此次自定义显示内容 setInterval("createtime()",250); </script> </div> </div> <!-- 统计访问量信息 --> <%- partial('_partial/statistics.ejs' ) %> <!-- 个人和备案信息 --> <div>©2020-2021<a href="https://clearlight.blog.csdn.net/">ClearlightY</a> <a href="http://beian.miit.gov.cn/">冀ICP备19019307号-2</a></div> <!-- <%- partial('_partial/beian.ejs' ) %> --> <% if (theme.web_analytics.cnzz) { %> <!-- cnzz Analytics Icon --> <span id="cnzz_stat_icon_<%- theme.web_analytics.cnzz %>" style="display: none"></span> <% } %></footer> <!-- SCRIPTS --> <%- partial('_partial/scripts.ejs' ) %>
首页优化
2024 年 7 月 17 日
Hexo Fluid 主题 细节优化_hexo-fluid 标签页优化-CSDN 博客
Hexo’s Fluid 主题私人定制(持续更新) - Eren の 宇宙船 (erenship.com)
页脚优化不打紧的,谁没事会去看页脚,所以我把页脚下的建站时间显示,放在了博客首页中,效果如下:
只需要编辑 banner.ejs 文件即可:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <%var banner_img = page.banner_img | | theme.index.banner_img var banner_img_height = parseFloat(page.banner_img_height | | theme.index.banner_img_height) var banner_mask_alpha = parseFloat(page.banner_mask_alpha | | theme.index.banner_mask_alpha) var subtitle = page.subtitle | | page.title %><div id="banner" class="banner" <%- theme.banner && theme.banner.parallax && 'parallax=true' %> style="background: url('<%- url_for(banner_img) %>') no -repeat center center; background-size: cover;"> <div class="full-bg-img"> <div class="mask flex-center" style="background-color: rgba(0, 0 , 0 , <%= parseFloat(banner_mask_alpha) %>)"> <div class="banner-text text-center fade-in-up"> <div class="h2"> <% if (theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %> <span id="subtitle" data-typed-text="<%= subtitle %>"></span> <% } else { %> <span id="subtitle"><%- subtitle %></span> <% } %> </div> <% if (is_post()) { %> <%- inject_point('postMetaTop' ) %> <% } %> <!-- 添加网站运行时间 --> <div class="footer-content"> <div> <span id="timeDate"></span> <span id="times"></span> <script> var now = new Date(); function createtime(){ var grt= new Date("03/07/2023 00 :00:00");//此处修改你的建站时间或者网站上线时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24 ; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){ hnum = "0" + hnum; } minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){ mnum = "0" + mnum; } seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){ snum = "0" + snum; } document.getElementById("timeDate").innerHTML = "🚀  " +dnum+" 天"; //此次自定义显示内容 document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒" ; } //此次自定义显示内容 setInterval("createtime()",250); </script> </div> </div> </div> <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404' ) { %> <div class="scroll-down-bar"> <i class="iconfont icon-arrowdown"></i> </div> <% } %> </div> </div> </div>
简直像是打开了新世界,这样的话,我的博客可优化的地方还很多,而且相对来说更加自由了。
曲线救国,把文章内容页面的建站时间显示删除了:
1 2 3 if (!window .location .href .includes ("/20" )) { setInterval ("createtime()" , 250 ); }
博文排版
2024 年 7 月 31 日
今年四月底那会儿就执手优化过部分博客,可惜这项工作没有做到位。
五月初 Gitee Pages 服务停用,在那之后一个多月的时间里我的博客是没有更新的,准确的说没有同步本地到线上。
好在六月初初步解决了这个问题,六月下旬最终完善博客访问链接,六月底最终完成七牛云图床整合实现图片正常显示。
七月份中旬,我新增了博客评论功能,首页展示博客建站时间以及友情链接优化,更加深入理解了 Hexo 生成静态站点的自定义多样性。
这会儿总算能静下心来,重新排版布局这八十二篇博客的排列顺序,以及对应的博文封面图了。
日常
技术
转载
其他
图床
2024 年 6 月 10 日
搭建图床
几个月前搞伙伴匹配系统轮播图,想用自己的图片来做这个轮播图 (2023/12/02 早)
那我搭建一个自己的图床呗 拿个图片老方便了 学一学怎么搭建图床 说干就干
搭建过程就不多说了 收藏了好几个 CSDN 博客教程
最重要的是在 PicGo 里下一个插件 搭建一个 Gitee 图床 (不用 GitHub 图床是因为这玩意儿 BUG 太多了 尤其是网络原因)
两个图床的配置都放下面了 我用了 Gitee 图床
上传到图床的图片可以随意使用了
在 Typora -> 偏好设置 -> 图像 里配置好上传服务和 PicGo 路径后 Typora 里使用到的图片都会自动上传到图床上去
最后展示一下我刚上传到图床里的图片吧
操他妈的上个厕所就能显示了
总之 图床可以正常使用了 现在把浏览器收藏夹整理一下先 (2023/05/23 晚)
今天距伙伴匹配系统从零开发 整整俩个月了 简单纪念一下 但是今天不想编码了 干点儿别的吧 (2023/05/24 晚)
好用的图床
2024 年 6 月 10 日
推荐阅读:分享 8 个免费的图床,帮助你轻松在 Power BI 报告中使用图片注册 支持_https (sohu.com)
最近尝试在云服务器上搭建个人博客,顺便学习了基础的 Linux 命令操作、Nginx 安装配置、Node 安装配置和 Git 安装配置。
我已经把 Gitee 图床上的图片上传至七牛云中,之后等域名备案完成之后,直接批量修改个人博客中引用到的图片路径就行了。
七牛云也提供免费的对象存储服务,一个月免费十个 G 的额度,够用了。
Hello 图床 :https://www.helloimg.com/
什么情况,这个免费的图床这么好用。
我就尝试了这一个,剩下的点开主页看了看,展示一下吧(普通人使用免费图床的门槛也低了很多,确实挺方便 ):
PicGo:https://www.picgo.net/
路过图床 :https://imgse.com/
sm.ms :https://sm.ms
薄荷图床 :https://riyugo.com/
风筝图床:https://www.imgbed.link/
ImgURL 图床 :https://www.imgurl.org/
Z4A 图床 :https://z4a.net/
七牛云
2024 年 7 月 8 日
设置自定义源站域名使用指南 对象存储 - 七牛开发者中心 (qiniu.com)
七牛云新建对象存储空间后,会自动生成一个域名,一个月后自动失效。
这个临时域名实际上是配置了域名转发,将资源地址转发到真实的域名下,真实服务器的域名跟对象存储桶的存储区域相关:
比方说这个存储区域下的服务器域名就是:iovip-z1.qiniuio.com
临时域名失效后,就需要配置自定义域名就能生成存储空间的图片外链,才能够在浏览器中正常访问到图片。
我的域名上个月提交备案后,十天左右就备案通过了,添加 CNAME 即解析记录:
这里需要着重注意两点:记录值(目标服务器)和主机记录(映射域名) ,当然记录类型 要为 CNAME ,配置完成即可:
七牛云这边就可以自定义源站域名,并成功绑定:
阿里云有个挺不错的网络拨测工具,查看域名能否访问到,检测网络是否连通:
PicGo 配置七牛云图床:
baidu.com/link?url=23pidhpNvNJLrDF64nSHp7b2lJVZnS8nGw5-Oxb61tPJYDqWZ_R-O9ujTnZGvKX2mSpQYNl93Rh4JE9xbuMuwujstgFg7gRELrkF4NkDlqW&wd=&eqid=b2f86f280031714e00000003668bdc85
配置完成后上传成功,浏览器也能正常显示,可 Typero 上显示不出来。
妈的,写了个 http 协议前缀就正常访问了,真诡异。
七牛云图床设置改成这样就行了,问题解决:
2024 年 7 月 9 日
浏览器还是不显示,正在解决中。。
解决了,也不算解决了,只是发现问题所在了:Hexo 图片插入无法显示的问题 - 知乎 (zhihu.com)
2024 年 7 月 11 日
踩坑记录 node 版本过高
注意,在使用 VuePress 生成文档站点的最后一步:在本地启动文档站点服务时,我出现了这样的问题:
这就是此时的 node 版本过高,导致的兼容性问题(此时我用的是 v18.16.1),转换 node 为低版本 v16.19.0 后,问题解决
这里也能比较出 VuePress 站点生成器相较于 VitePress,是有点落后了,推荐使用 VitePress 站点生成器
成功在本地开启 VuePress 文档站点服务!效果如下:
这个问题其实是 VuePress 站点生成器的共同问题,不兼容较新的 node.js 环境,我在配置使用 vuepress-theme-vdoing 主题时,也出现了这个问题
遇到这种问题,要么降低 node 版本去兼容,要么舍弃这种程序服务
比如用 VitePress 替代 VuePress,用 vuepress-theme-hope 主题替代 vuepress-theme-vdoing 主题
具体怎么应对,各求所需,因人而异
node 版本过低
我在安装配置 VitePress 文档站点主题时,报错了:
很显然,node 版本过低,于是我修改 node 版本为 18.16.1,问题成功解决
有关 node 版本的修改可以在《配置指南-掌握 Node.js 配置》一文中详细了解
成功安装 hope 主题,开启文档站点服务,效果如下:(2023/07/04 晚)
模板文件格式不规范
今天部署博客时,出现了这样的错误:(2023/08/07 早)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 FATAL { err : Template render error : (unknown path) Error : expected end of comment, got end of file at Object._prettifyError (D :\blog\blog\node_modules\nunjucks\src\lib.js :36 :11 ) ... 17 lines matching cause stack trace ... at process.processImmediate (node :internal/timers :476 :21 ) { cause : Template render error : (unknown path) Error : expected end of comment, got end of file at Object._prettifyError (D :\blog\blog\node_modules\nunjucks\src\lib.js :36 :11 ) at Template.render (D :\blog\blog\node_modules\nunjucks\src\environment.js :538 :21 ) at Environment.renderString (D :\blog\blog\node_modules\nunjucks\src\environment.js :380 :17 ) at D :\blog\blog\node_modules\hexo\lib\extend\tag.js :236 :16 at tryCatcher (D :\blog\blog\node_modules\bluebird\js\release\util.js :16 :23 ) at Promise.fromNode.Promise.fromCallback (D :\blog\blog\node_modules\bluebird\js\release\promise.js :209 :30 ) at Tag.render (D :\blog\blog\node_modules\hexo\lib\extend\tag.js :235 :20 ) at Object.onRenderEnd (D :\blog\blog\node_modules\hexo\lib\hexo\post.js :297 :22 ) at D :\blog\blog\node_modules\hexo\lib\hexo\render.js :79 :21 at tryCatcher (D :\blog\blog\node_modules\bluebird\js\release\util.js :16 :23 ) at Promise._settlePromiseFromHandler (D :\blog\blog\node_modules\bluebird\js\release\promise.js :547 :31 ) at Promise._settlePromise (D :\blog\blog\node_modules\bluebird\js\release\promise.js :604 :18 ) at Promise._settlePromise0 (D :\blog\blog\node_modules\bluebird\js\release\promise.js :649 :10 ) at Promise._settlePromises (D :\blog\blog\node_modules\bluebird\js\release\promise.js :729 :18 ) at _drainQueueStep (D :\blog\blog\node_modules\bluebird\js\release\async.js :93 :12 ) at _drainQueue (D :\blog\blog\node_modules\bluebird\js\release\async.js :86 :9 ) at Async._drainQueues (D :\blog\blog\node_modules\bluebird\js\release\async.js :102 :5 ) at Async.drainQueues (D :\blog\blog\node_modules\bluebird\js\relea
出现这样的很正常,检查一下哪篇.md 文章里的格式出错了:
如果无法准确定位到是哪篇文章出问题了,可以这样执行命令:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 03 :10 :55.161 DEBUG Rendering post : D :\blog\blog\source\_posts\解决前端框架使用中的常见问题.md03 :10 :55.185 FATAL { err : Template render error : (unknown path) Error : expected end of comment, got end of file at Object._prettifyError (D :\blog\blog\node_modules\nunjucks\src\lib.js :36 :11 ) ... 17 lines matching cause stack trace ... at process.processImmediate (node :internal/timers :476 :21 ) { cause : Template render error : (unknown path) Error : expected end of comment, got end of file at Object._prettifyError (D :\blog\blog\node_modules\nunjucks\src\lib.js :36 :11 ) at Template.render (D :\blog\blog\node_modules\nunjucks\src\environment.js :538 :21 ) at Environment.renderString (D :\blog\blog\node_modules\nunjucks\src\environment.js :380 :17 ) at D :\blog\blog\node_modules\hexo\lib\extend\tag.js :236 :16 at tryCatcher (D :\blog\blog\node_modules\bluebird\js\release\util.js :16 :23 ) at Promise.fromNode.Promise.fromCallback (D :\blog\blog\node_modules\bluebird\js\release\promise.js :209 :30 ) at Tag.render (D :\blog\blog\node_modules\hexo\lib\extend\tag.js :235 :20 ) at Object.onRenderEnd (D :\blog\blog\node_modules\hexo\lib\hexo\post.js :297 :22 ) at D :\blog\blog\node_modules\hexo\lib\hexo\render.js :79 :21 at tryCatcher (D :\blog\blog\node_modules\bluebird\js\release\util.js :16 :23 ) at Promise._settlePromiseFromHandler (D :\blog\blog\node_modules\bluebird\js\release\promise.js :547 :31 ) at Promise._settlePromise (D :\blog\blog\node_modules\bluebird\js\release\promise.js :604 :18 ) at Promise._settlePromise0 (D :\blog\blog\node_modules\bluebird\js\release\promise.js :649 :10 ) at Promise._settlePromises (D :\blog\blog\node_modules\bluebird\js\release\promise.js :729 :18 ) at _drainQueueStep (D :\blog\blog\node_modules\bluebird\js\release\async.js :93 :12 ) at _drainQueue (D :\blog\blog\node_modules\bluebird\js\release\async.js :86 :9 ) at Async._drainQueues (D :\blog\blog\node_modules\bluebird\js\r
超链接出现 # 特殊符号了,导致编译失败,删除就行了(2023/08/07 早)
友链 item 格式错误
今天更新了下个人博客的友链列表,竟然这样也能出错:
如上,把哪个明显的缩进取消了就行了(2023/10/01 晚)
图片违规
好好好,我删了就是了,正好没有文章引用这张图(2023/10/02 午)
title 格式错误
奶奶的,就这里的问号后面没有空格,眼瞅着它报了一个月的错:(2023/12/01 晚)
总结
至此,快速搭建博客站点和快速生成文档站点已经完毕
在接下来的内容中,我们会继续分享如何使用 Gitee/GitHub 的 Page 服务来托管静态网站,详见《大道至简:快速搭建博客与文档站点的终极指南 2.0》
有关博客/文档站点的详细配置,包括主题配置、目录结构等,我们会在《大道至简:快速搭建博客与文档站点的终极指南 3.0》一文中详细讲解
非常感谢您能够看到这里,希望本文对您有帮助