我做了个Hexo博客

最近花了两个周末的时间边学变做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.mzph.cn/bicheng/32507.shtml

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

相关文章

KEIL5软件仿真观察PIN脚电平(软件仿真逻辑分析仪的使用)

仿真前的调整: 例:STM32F103C8T6 (如果是F4的板子稍微对着修改一下) 逻辑分析仪的使用 输入 PORTA.6( PORAT(哪一组).(哪一个引脚) )

通过rpm命令查看特定rpm包的安装时间

通过rpm命令查看特定rpm包的安装时间 命令解读 [aqjgmaster ~]$ rpm -q --qf "%{INSTALLTIME}\n" kernel 1681468253 [aqjgmaster ~]$ [aqjgmaster ~]$ date -d rpm -q --qf "%{INSTALLTIME}\n" kernel Fri Apr 14 18:30:53 CST 2023 [aqjgmaster ~]$ [a…

已解决java.rmi.AlreadyBoundException异常的正确解决方法,亲测有效!!!

已解决java.rmi.AlreadyBoundException异常的正确解决方法,亲测有效!!! 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查重复绑定情况 解除已有的绑定 优化代码逻辑 使用同步机制 总结 …

基于格网的边缘点检测(python)

1、背景介绍 前文已介绍对点云进行格网处理,可以计算平面点云面积、格网拓扑关系构建,相关博客如下: (1)点云格网过程可视化(C PCL)-CSDN博客 (2)平面点云格网过程及可…

Kimichat使用案例026:AI翻译英语PDF文档的3种方法

文章目录 一、介绍二、腾讯交互翻译TranSmart https://transmart.qq.com/三、沉浸式翻译三、谷歌网页翻译一、介绍 短的文章,直接丢进kimichat、ChatGPT里面很快就可以翻译完成,而且效果很佳。但是,很长的PDF文档整篇需要翻译,怎么办呢? 二、腾讯交互翻译TranSmart https…

VScode如何调节编辑器字体大小

首先,在vscode界面,依照顺序输入“Ctrlk”、“Ctrls”,即可进入键盘快捷方式设定界面。(如下图所示) 其次,在搜索框中输入“缩小”或者“放大”,就会出现对应的“缩小编辑器字体”或者“放大编…

算法刷题总结

1. 排序算法 1.1 快速排序算法 public abstract class Sort<T extends Comparable<T>> {public abstract void sort(T[] array);protected boolean less(T first, T two) {return first.compareTo(two) < 0;}protected void swap(T[] array, int i, int j) {T…

Python数据分析-糖尿病数据集数据分析

一、研究背景介绍 糖尿病是美国最普遍的慢性病之一&#xff0c;每年影响数百万美国人&#xff0c;并对经济造成重大的经济负担。糖尿病是一种严重的慢性疾病&#xff0c;其中个体失去有效调节血液中葡萄糖水平的能力&#xff0c;并可能导致生活质量和预期寿命下降。。。。糖尿…

CentOS系统查看版本的各个命令

cat /etc/centos-release 查看CentOS版本 uname -a 命令的结果分别代表&#xff1a;当前系统的内核名称、主机名、内核发型版本、节点名、系统时间、硬件名称、硬件平台、处理器类型以及操作系统名称 cat /proc/version 命令用于查看Linux内核的版本信息。执行该命令后&#xf…

Springboot整合MinIO实现系统文件的便捷式管理实例

一、MinIO简介 1.基础描述 MinIO 是一个高性能的对象存储系统&#xff0c;用于存储大量非结构化数据。它以简洁、高效、可靠和高扩展性著称&#xff0c;能够胜任各种数据密集型任务。MinIO 采用了与 Amazon S3 兼容的 API&#xff0c;使得用户无需额外学习即可上手使用。下面…

DNF手游攻略:云手机辅助流光星陨刀详细攻略大全!

DNF手游中&#xff0c;流光星陨刀是鬼剑士的专属神器之一&#xff0c;拥有快速的攻击速度和优秀的物理与法术攻击属性&#xff0c;因其出色的性能和未来升级的潜力&#xff0c;成为广大玩家关注的焦点。 流光星陨刀的背景与起源 流光星陨刀作为鬼剑士的标志性武器之一&#xf…

STM32单片机开发入门(十)SSCOM串口通信助手软件安装及使用提供软件网盘链接

文章目录 一.概要二.SSCOM软件下载安装三.串口通讯配置及应用实例1.串口通讯基本配置2.字符串数据发送和接收的配置操作3.16进制数据发送和接收的配置操作4.定时自动发送数据配置操作5.wifi模块AT指令调试配置操作6.用串口烧录STM32单片机代码配置操作 四.以太网TCP服务器端配置…

【0-1系列】从0-1快速了解搜索引擎Scope以及如何快速安装使用(下)

前言 近日&#xff0c;社区版家族正式发布V2024.5版本&#xff0c;其中&#xff0c;社区开发版系列重磅发布Scope开发版以及StellarDB开发版。 为了可以让大家更进一步了解产品&#xff0c;本系列文章从背景概念开始介绍&#xff0c;深入浅出的为读者介绍Scope的优势以及能力…

工业数字孪生:智能制造的新引擎

数字孪生技术&#xff1a;智能制造的新引擎 一、数字孪生技术的基本概念与工业应用 1.1 数字孪生的定义与原理 数字孪生技术是一种先进的集成技术&#xff0c;它通过在数字空间创建一个精准物理对象的虚拟模型&#xff0c;使得我们可以在数字空间中模拟、分析和预测物理实体…

如何在 Mac 上清空硬盘后恢复丢失的数据?

如果您不小心从 Mac 硬盘上删除了重要文件&#xff0c;您可能会感到非常沮丧。但您仍然可以找回丢失的信息。将 Mac 想象成一个大盒子&#xff0c;里面装着所有东西。丢弃某样东西就像撕掉盒子上的标签&#xff1a;房间现在可以放新东西了&#xff0c;但旧东西仍然在那里&#…

JAVA期末复习题1

目录 Java 填空题整理及解析 1. 说出Java的特点&#xff1a; 2. Java的运行机制是先编译再解释运行。 3. 请按照以下分类补全对应的数据类型&#xff1a; 4. 在有限次数循环时&#xff0c;一般选择for循环结构&#xff1b;未知循环次数时&#xff0c;可以选择while循环结构…

【5G核心网】5G NWDAF(Network Data Analytics Function)网元功能介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

leetcode 动态规划(基础版)最长回文字串

题目&#xff1a; 题解&#xff1a; 首先回文子串肯定是连续的&#xff0c;如果用dp来做就需要找出一个串的所有连续子串&#xff0c;枚举一个串所有连续子串的可行方案是首先枚举子串的右端点&#xff0c;范围是&#xff08;0~s.size()-1&#xff09;,在每一个右端点中枚举左…

【计算机毕业设计】185餐厅点餐微信小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

高中数学:数列-an和Sn混合的题型处理

一、核心思想 题目一般会给我们一个或几个等式作为条件&#xff0c;其中&#xff0c;含有an和Sn关联的式子 那么&#xff0c;如果&#xff0c;题目需要我们求an&#xff0c;我们就想办法用其他条件消除Sn即可。 反之&#xff0c;求Sn&#xff0c;则用其他条件消除an即可。 二…