进阶内容:Hexo中的layout概念
对于想深入了解Hexo主题定制和博客排版的开发者来说,layout是一个非常重要的概念。理解它有助于更好地控制博客页面的结构和样式,使我们能够根据需求轻松创建和管理不同类型的页面和文章。
在Hexo中,layout主要指的是页面的排版和布局。它决定了每个页面的外观和内容如何被展示。通过layout,我们可以灵活地选择和定制文章、页面或草稿的布局。
1. layout概述
layout的基本作用是告诉Hexo如何渲染特定页面或文章的HTML结构和样式。它实际上涉及了两个部分:
内容设置:即定义页面或文章的主要内容(Front
Matter、正文等)。
排版设置:即如何根据不同的layout类型渲染HTML结构,并应用相应的CSS样式。
默认情况下,Hexo为我们提供了几种常见的布局:post(文章)、draft(草稿)和page(页面)。但实际上,我们可以根据需要创建更多自定义布局。
2. layout的工作原理
在Hexo中,每个Markdown文件都有一个layout属性。这个属性通常会出现在文件的Front
Ma ...
作为Web开发的初学者,我在接触时,面临了一个庞大的知识体系,初时感到有些困惑。但通过学习,我发现Web前端的开发其实可以分为几大核心技术,它们共同作用,帮助我们实现动态、精美、互动的网站。
这三大技术即Web前端的“三剑客”:HTML、CSS和JavaScript,它们各自负责不同的职能。这里将详细介绍它们的作用和基础概念,帮助你入门。
如果你有进一步学习的需求,我也推荐一些有用的学习资源:
GitHub:前端入门到进阶图文教程
YouTube:JavaScript in 1
Hour
YouTube:Learn HTML
in 1 Hour
YouTube:Node.js in 1
Hour
1. HTML(超文本标记语言)
HTML(HyperText Markup
Language)是网页的骨架,它通过一系列的标记元素来定义网页内容和结构。通过HTML,我们告诉浏览器如何显示文本、图片、链接、表单等页面元素。
主要概念:
HyperText(超文本):超越文本的限制,支持在网页中嵌入图片、音频、视频等多媒体内容。
Markup(标记): ...
本篇是主要Hexo的基本文件结构介绍。以下是本篇的核心内容:
基本文件结构
在成功运行 Hexo 后,使用命令 hexo s 或
hexo d,你会在博客文件夹中看到如下文件结构:
1234567891011121314151617181920212223242526272829303132- _config.yml- source/ |--- _posts/ |--- _data/ |--- drafts/ |--- about/ |--- other folders- themes/ |--- one or more theme folders, in each folder |--- _config.yml |--- languages/ |--- yaml files |--- layout/ |--- (_partial/) |--- (_widget/) |--- layout ...
Hexo教程(一) 博客更新指南
Hexo 是一个强大的静态网站生成器,然而Hexo
官方文档往往缺乏对日常操作的指导性,难以分清阅读顺序和内容的重要性。为了更便捷地使用
Hexo
更新博客,这里总结了一套完整的操作流程,并附上每一步背后的原理解释。
一次 Hexo
更新博客的基础操作流程
新建一篇文章
文章写作
本地预览更新后的博客
远程部署更新博客
1. 新建文章
Hexo 渲染一篇 post 的流程大致如下:
获取一个 Markdown 文件
根据该文件的 layout 类型进行样式排版
生成 HTML 文件
最终展示到网页端
方法一:使用 Hexo 的命令
创建文章的常见命令:
1hexo new [layout] <title>
通常我们只需使用默认 layout(post):
1hexo new "我的第一篇文章"
该命令会生成一个 layout 为 post 类型的
Markdown 文件,存储在 source/_posts/ 目录下,命名为
我的第一篇文章.md。
方法二: ...
编程开发
未读按下F12看了下代码,定位到图片。
蓝框中是原图链接,带用户水印的,跟最后的data-original里面的链接呈现的都是正常情况下的。
而data-original-token中的数据,跟其它几个图片链接的文件名很相似,于是我尝试用它替换掉其它图片的文件名,然后显示就出了原图。
原图(有水印)
https://picx.zhimg.com/v2-bdeb30bcab773ef7c9e16cf38b6dc991_b.jpg
data-original(有水印)
https://picx.zhimg.com/v2-bdeb30bcab773ef7c9e16cf38b6dc991_r.jpg
data-original-token(无水印)
https://picx.zhimg.com/v2-af2b3d4381fcb4a20897760d38482cde.jpg
编程开发
未读
本文只是记录,并非教程,请直接不要按照本文修改,以免报错。
其实本站并没有做多修改,写此文章仅为记录,方便以后升级更新!
1. 修改 analytics.pug
在themes/anzhiyu/layout/includes/head/analytics.pug中
最下面33行,添加以下代码:
12if theme.umami_analytics script(defer, src='https://umami.elykia.cn/script.js', data-website- id=`${theme.umami_analytics}`)
2. 修改 head.pug
在
themes/anzhiyu/layout/includes/head.pug
中
最下面94行,添加以下代码:
123456//- Umamiif theme.Umami if theme.Umami.umami_url script(async defer src=`${theme.Umami.umami_ur ...
最近几天遇到一个很讨厌的问题,就是鼠标在选中文本或点击搜索框或url地址栏时,形如“I”的光标就会变成白色,与背景融为一体,找光标找到崩溃,导致搬砖的效率极低。
后面就开始通过对鼠标的设置尝试解决此问题,坚持不懈地试了很多次才成功解决!
解决方法如下:
首先打开控制面板,打开硬件和声音,找到鼠标,即可进行设置。
进行以下操作:
适用设备
Windows 11
问题描述
相信大家在git clone
github中的项目时,一定都与遇到了不少令人头疼的错误。
比如这样的:
1error: RPC failed; curl 56 OpenSSL SSL_read: Connection was reset, errno 10054;
亦或者是这样的:
1fatal: unable to access 'https://github.com/WongKinYiu/yolov7.git/': SSL connection timeout
解决方案
初始化
1git init
方法原理
绝大多数人肯定是下了git就去下东西了,好运的话确实能一次下完,没做这一步就去按别的贴去设置的,喜提“fatal:
not in a git directory”
适用设备
Windows 11
问题描述
更改桌面图标位置,重新启动后不保存,图标返回原位
解决方案
操作方法:调整桌面图标布局后,右键单击桌面空白处,在右键菜单展开“查看”选项卡,多次转换图标大小,在中等图标和小图标之间切换,重复数次,刷新。重启查看是否生效。
方法原理
我也不知道
编程开发
未读内存不足
腾讯云服务器安装 Debian 后使用 free
命令查看内存大小往往会发现比所购买配置的标称内存要小很多,1G
内存的实例通常只有 860M 左右,2G 内存的查出来也只有 1870M 左右。
如下图所示(2G 内存):
一开始我也和大多数人想的一样,认为这是黑心商家为了多赚钱故意少分配了内存,然而最近了解了一下情况之后发现这事还真是误会腾讯云了,下面简单的记录一下问题原因和解决方案吧。
问题原因
使用命令 dmidecode 查看底层硬件信息,可以看到我的 2G
内存的服务器是分配足了 2048M 内存的。
使用 dmidecode
命令查看底层硬件信息
但是为什么使用 free
命令看到的内存变少了呢?查阅资料找到了答案:free
命令看到的是伙伴系统管理的内存,这部分内存是不包括 OS
内核一些基本数据结构消耗以及内核预留内存的。
使用命令 dmesg | grep -i memory
查看内核预留内存,注意到如下部分:
查看系统中的内核预留内存
嗯,为 crashkernel 预留了 128M
的内存 ...