我做了个Hexo博客

news2024/12/28 5:20:21

最近花了两个周末的时间边学变做Hexo博客,最终成品地址如下:

https://blog.mybatis.io

下面先说说做博客的经过,想做Hexo博客一开始是因为看到了 hexo-theme-icarus 主题,这个主题样式如下:
在这里插入图片描述
首页


内容页

这个主题是不是真的好看?我总觉得我喜欢这个主题是因为和CSDN的样式很像,支持一栏、二栏、三栏,和CSDN确实很像:

在这里插入图片描述

我用Hexo做独立博客更多的还想让AI图能更好的在博客中展示,另外我使用的显示器分辨率是 2560x1440,因此看 hexo-theme-icarus 主题时觉得太窄了,无法充分利用空间,花了很多时间进行改造,学习了 Stylus 样式语言:

在这里插入图片描述

还学习了 EJS 模板语言(fluid使用这个):

在这里插入图片描述

经过两天的改造,下面是效果,全屏时能展示三栏:

在这里插入图片描述

分辨率低一点会变成两栏:

在这里插入图片描述

特别窄或者移动端会变成一栏:

在这里插入图片描述

感觉自己真正入门了响应式布局。

我想让封面图以更好的形式展示出来,这个主题在这方面过于朴素。在了解这个主题的同时,我把 Hexo 官方的几百个主题都打开看过,一半以上的主题都失效了,演示页都打不开,还有很多文档不全,属于精品的最多能有几十个,符合自己需求的挺少,但是有一个 hexo-theme-fluid,这个主题演示页最明显的就是首屏一张图:

在这里插入图片描述

好看的图就应该这么展示出来,但是也不能首屏全是图,这个主题支持控制首屏图的高度,文章列表是个一栏的,和前一个主题对比时总觉得缺点东西:

在这里插入图片描述

如果能将这个首屏图加到 icarus 主题,或者将 icarus 主题的多栏加入到 fluid 主题就完美了,思考了一下难度后觉得改造 fluid 主题更简单。因此放弃了 icarus 主题,开始改造 fluid 主题。

先看看最终的效果:

在这里插入图片描述

首屏

在这里插入图片描述

文章列表

在这里插入图片描述

文章内容页

在这里插入图片描述

图片内容页

在这里插入图片描述

图片支持fancybox浏览

一开始切入的主题就是如何添加边栏,花了不少时间做不出好看的效果,然后就放弃了,之后就是看如何让首屏图片展示的同时多漏出一部分文章的内容,避免一打开博客还以为进入了图站。

学了hexo文档、API,再学了Stylus和EJS后,改造起来就比较容易了,原来是漫无目的的找,现在直接根据规范来找文件和改造文件。改造过程中看了这么多遍之后,感觉没有边栏也习惯了。当主题逐步稳定下来后就是如何方便写作了,如果使用 hexo new post title,配合markdown编辑器或者直接用vscode写博客,会很繁琐,下一篇就介绍一下如何方便快捷的写博客,以及配合github action实现每日自动发布AI图。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1853024.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

字节豆包全新图像Tokenizer:生成图像最低只需32个token,最高提速410倍

ChatGPT狂飙160天,世界已经不是之前的样子。 更多资源欢迎关注 在生成式模型的迅速发展中,Image Tokenization 扮演着一个很重要的角色,例如Diffusion依赖的VAE或者是Transformer依赖的VQGAN。这些Tokenizers会将图像编码至一个更为紧凑的隐…

AI味太重怎么办?1个超简单的方法就能解决

我们知道随着GPT技术的迅速发展,解决了我们大部分写作的难题。但是很多小伙伴想必都会遇到同样的问题,就是写出来的文章太正式-我们叫这“AI味”。 这AI味让人感觉内容虽然条理清楚,但就是缺了点人情味,读起来不够亲切。 其实&a…

獭崎酱酒:传承百年酱香,品味经典之选

在中国白酒文化中,酱香型白酒以其独特的风味和精湛的酿造工艺,一直受到广大酒友的青睐。而在众多酱香型白酒品牌中,獭崎酱酒以其传承百年的酱香工艺和高品质的产品,成为了众多酒友心中的经典之选。    | | | |–|–| | | | 百…

几何内核开发-实现自己的NURBS曲线生成API

我去年有一篇帖子,介绍了NURBS曲线生成与显示的实现代码。 https://blog.csdn.net/stonewu/article/details/133387469?spm1001.2014.3001.5501文章浏览阅读323次,点赞4次,收藏2次。搞3D几何内核算法研究,必须学习NURBS样条曲线…

L56---226.翻转二叉树(广搜)---Java版

1.题目描述 2.思路和知识点 (1)按照每层来划分, 第一层是2^0( 1) 第二层是2^1(2,3) 第三层是2^2 (4,5,6,7) 第n层是2^(n-…

栅格数据重心迁移变化分析

目前网络上大多是针对矢量重心迁移进行计算,或把栅格转矢量在进行计算,可以不用怎么麻烦,可以直接利用栅格进行得出多期数据的重心,然后进行变化分析等方面的分析。 矢量数据可以通过下面方式进行重心计算: 使用ArcGIS…

谷歌学术内容爬取

最近面临导师灵魂拷问: “你怎么知道你提出的这个方法前人都没有提出过呢?” “你相比于之前的方法,创新点究竟在哪里?” 好吧,为了彻底杜绝这样的问题,开始学习使用谷歌学术。先来学习下关键词检索 哈哈…

qt基本窗口类(QWidget,QDialog,QMainWindow)

1.三个基本窗口类 1.1QWidget 所有窗口的基类 可以内嵌到其他窗口的内部,无边框 也可以作为独立窗口显示,有边框 1.2QDialog 继承于QWidget 对话框窗口类 不可以内嵌到其他窗口 有模态和非模态两种显示方式 1.3QMainWind 继承于QWidget 主窗口类 不可以…

前端Web开发HTML5+CSS3+移动web视频教程 Day1

链接 HTML 介绍 写代码的位置:VSCode 看效果的位置:谷歌浏览器 安装插件 open in browser: 接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。 首先进入控制面板,找到默…

【会议征稿,ACM出版】2024年图像处理、智能控制与计算机工程国际学术会议(IPICE 2024,8月9-11)

2024年图像处理、智能控制与计算机工程国际学术会议(IPICE 2024)将于2024年8月9-11日在中国福州举行。本届会议由阳光学院、福建省空间信息感知与智能处理重点实验室、空间数据挖掘与应用福建省高校工程研究中心联合主办。 会议主要围绕图像处理、智能控…

QtCreator/VS中制作带有界面的静态库

1、可参考以下文章 QT中制作带有界面的动态库 2、相比动态库,静态库就更简单了,,, 1)创建静态库项目 2)直接右键创建同名窗口类进行覆盖 3)编译生成静态库 4)使用 3、上述都是基于QtCreator来制作的含有界面的静态库,下面基于VS2017来制作带有界面的静态库 …

Temu(拼多多跨境电商) API接口:获取商品详情

核心功能介绍——获取商品详情 在竞争激烈的电商市场中,快速、准确地获取商品数据详情对于电商业务的成功至关重要。此Temu接口的核心功能在于其能够实时、全面地获取平台上的商品数据详情。商家通过接入Temu接口,可以轻松获取商品的标题、价格、库存、…

Day6 —— 电商日志数据分析项目部署流程

项目二 _____(电商日志数据分析项目) 项目部署过程相关依赖运行结果截图统计页面浏览量日志的ETL操作统计各个省份的浏览量 项目部署过程 以IDEA 2023版本为例 步骤一:创建一个空项目,命名为demo_2,并指定语言类型和构…

oracle 主从库中,从库APPLIED为YES ,但是主库任然为NO

主库 从库 从库已经APPLIED但是主库为APPLIED, 主数据库和备用数据库之间的ARCH-RFS心跳Ping负责更新主数据库上v$archived_log的APPLICED列。 在主数据库上有一个指定的心跳ARCn进程来执行此Ping。如果此进程开始挂起,它将不再与远程RFS进程通信&#…

2024-06-23 编译原理实验4——中间代码生成

文章目录 一、实验要求二、实验设计三、实验结果四、附完整代码 补录与分享本科实验,以示纪念。 一、实验要求 在词法分析、语法分析和语义分析程序的基础上,将C−−源代码翻译为中间代码。 要求将中间代码输出成线性结构(三地址代码&#…

STM32F103ZET6基于HAL库实现CAN回环测试和中断接收

简介 在野火STM32F103ZET6开发板上基于HAL库实现了CAN回环测试,并通过PCAN客户端工具和串口打印的方式,分别验证了CAN数据发送成功和CAN数据中断接收成功。 STM32F1开发板测试 STM32测试程序 发送函数 /** 函数名:CAN_SetMsg* 描述 &am…

Windows安全中心打开白屏的解决方法

Windows安全中心打开白屏的解决方法: 1. 复制以下内容,打开记事本粘贴并保存,同时将记事本文件的【txt后缀名改为reg】: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defende…

RTA_OS基础功能讲解 2.10-调度表

RTA_OS基础功能讲解 2.10-调度表 文章目录 RTA_OS基础功能讲解 2.10-调度表一、调度表简介二、调度表配置2.1 同步三、到期点配置四、启动调度表4.1 绝对启动4.2 相对启动4.3 同步启动五、到期点处理六、停止调度表6.1 重新启动被停止的调度表七、切换调度表八、选择同步策略8.…

NSIS 入门教程 (三)

引言 在教程的第二部分中,我们为安装程序增加了一个卸载程序,并查看了一些其他的向导页面以及安装部分的选择。第三部分的目标是使安装程序的外观更加现代化。 更现代的外观 为了给安装程序一个更现代的外观,我们要启用现代用户界面。要提…

UnityShader——基础篇之UnityShader基础

UnityShader基础 UnityShader概述 材质和UnityShader 总的来说,在Unity中需要配合使用材质(Material)和 Unity Shader 才能达到需要的效果,常见流程为: 创建一个材质创建一个 Unity Shader,并把它赋给上一步中创建的材质把材质…