8.Hexo主题自定义layout布局文件夹

原创

已于 2024-04-15 18:24:48 修改 · 950 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-04-15 13:38:34 首次发布

本文介绍了如何在Hexo主题中创建和管理自定义布局文件，如layout.ejs作为基础布局，index.ejs和post.ejs分别用于索引页和博客文章，同时提到了如何为tag和类别页面创建专用布局（tag.ejs）。

![[Pasted image 20240414134245.png]]

现在的主题是自定义的，因为没有任何定义，现在是一个空白页面
![[Pasted image 20240415123421.png]]

目前资源文件夹里是有一个博客文件a和一个页面文件b

layout.ejs

布局基本上是不同的文件进入Hexo主题内部，决定了主题的外观和感觉
在这个layout文件夹中，要创建一个新文件layout.ejs
这个ejs扩展名是需要在layout文件上使用的
![[Pasted image 20240415123927.png]]

再创建一个文件index.ejs，索引
![[Pasted image 20240415124112.png]]

在layout.ejs文件中，要添加一个基本的HTML骨架

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta h

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ChoSeitaku

关注关注

15
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

2. Hexo 搭建博客（一）

acc8226的专栏

08-18

144

一直想搭建个人网站, 当我了解到 Hexo 是一款快速、简洁且高效的博客框架。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。完整的教程可以参照Hexo官网进行实践。

一只可爱的hexo主题.zip

06-08

8. **SEO优化**：为了提高博客的搜索引擎可见性，主题通常会内置一些SEO优化特性，比如自定义元标签、Sitemap生成等。用户需要确保这些设置正确，以利于搜索引擎爬虫抓取和理解网站内容。综上所述，"一只可爱的...

参与评论您还未登录，请先登录后发表或查看评论

Hexo 自定义主题和菜单

媛测

01-02

7543

文章目录一、更换 Hexo 主题及样式1、默认主题2、更换主题2.1 下载新主题2.2 修改站点配置文件2.3 修改 next 主题的样式二、自定义主题菜单1、配置主题菜单2、设置标签和分类2.1 菜单 404 报错问题2.2 创建标签和分类文件夹2.3 在 index.md 中增加 type 属性2.4 在文章中加入 tags 和 categories 属性一、更换 Hexo 主题及样式 1、...

自定义hexo的某个主题

weixin_30379531的博客

06-01

352

用了 hexo 框架中的某个主题，但是想自己定制做些修改，网上一搜全是 NexT 主题的修改方法。没有自己选那套怎么办？别担心，把握住以下两个要点即可：重点关注themes目录（博客模板）如果想修改地方有特殊的一些文字，或者用开发者工具能看到特殊html属性名，可以直接在博客项目文件夹全局搜索，然后找到相应在themes目录下的对应位置，而不是生成后的位置。如，想要修改搜索框，在下部增...

Hexo 博客自定义一个不使用主题模板渲染的独立页面

BOB'S BLOG

05-18

1万+

Hexo 博客自定义一个不使用主题模板渲染的独立页面，博客地址：www.itbob.cn

个人博客搭建笔记----hexo自定义主题搭建

zem

02-20

1355

使用hexo搭建过博客都知道，hexo里面有很多个主题可供我们选择，但是，如果那些主题里面没有我们自己想要的咋整，做为一名前端开发，这个时候当然是选择DIY 我这里采用的模板文件是ejs，所以下面的内容需要了解一些ejs的使用，我在文章过程中不会去详述相关的语法新建自定义主题在themes文件夹下创建一个自己的文件夹做为自己定义的主题，我这里写成simp 主题目录新建下列目录 simp //...

Hexo写作布局方式

Traversal-chen的博客（hpudcd@163.com）

11-01

417

Hexo写作布局

Hexo搭建博客

Yaphat的博客

11-16

998

写博客的地方很多，新浪博客，百度空间，博客园，Jekyll，优快云等等，但页面样式都不是很喜欢，有学长推荐Hexo,感觉很不错，所以决定就用它了。Hexo是一款非常优秀的博客框架。用它官网上的话说就是快速、简洁和高效。我想它最吸引人的地方就是速度，渲染几百个页面只需要几秒钟的时间。下面简单讲一下它的搭建过程。Hexo环境要求 Node.js Git 这两个不多说了，安装都比较简单。安装HexoNo

Hexo通过添加layout数值建立常用的文章模板

Copanko的博客

04-11

1015

我们可以通过 hexo n [布局名称] <文档名称> 来创建新的md文件其中布局名称可以省略如果省略则默认为post布局如果创建的布局是草稿draft文件则会在_draft中并且相同格式的文档会自动保存在_post文件夹中那么我们就可以通过在源文件夹\Scaffolds文件夹中创建新的md文件并自行配置需要的模板例如并通过创建时自行添加layout数值来达成...

hexo自定义登录页面layout

04-07

2. 在您的主题文件夹中的“layout”目录中创建一个名为“login.ejs”的文件夹。如果不存在，则创建该文件夹。 3. 在“login.ejs”文件夹中，创建一个新的EJS模板，并将其命名为“index.ejs”。 4. 在“index.ejs”中...

具有随机全屏背景图像的hexo主题_Stylus_JavaScript_下载.zip

05-02

这个文件名暗示了主题的源代码存储在一个名为"hexo-theme-random-master"的目录中，这通常包含了主题的所有必要组件，如样式文件（.styl）、JavaScript脚本（.js）、配置文件（config.yml）、布局模板（layout）以及...

【Hexo搭建个人博客】（四）Hexo的基本配置

Mculover666的博客（嵌入式）

05-27

897

0.引言根目录下的_config.yml是整个Hexo框架的配置文件，修改此文件即可自定义Hexo的基本配置。 1.网站参数描述 title 网站标题 subtitle 网站副标题 description 网站描述 author 作者 language 网站语言（默认en） timezone 网站时区（默认使用电脑上的时区）其中，descriptio...

Hexo博客实现首页和子页面不同layout布局

chuorun1701的博客

05-31

1335

作成效果见我的个人网站：http://meiweiping.cn 实现方法为：打开 ~\themes\landscape\layout\layout.ejs 将里面的全部内容改为以下代码，将各<%- partial('_partial/ahead_links', null, {cache...

基于Hexo和Butterfly创建个人技术博客，(6) 定制个人网站的Layout模板-帮助函数

编程是一门实践技术

06-15

952

基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入，详细记录了个人建站全过程。系列专题-定制个人网站的Layout模板-帮助函数

Hexo 博客框架搭建个人博客 - How to系列

热门推荐

无聊人的有趣博客

01-24

2万+

好评率非常高的文章，作者非常细心，完全小白向文章，清晰易懂，架构清晰，大部分的文章没涵盖的都涵盖了，从Node的安装讲道如何部署，回复反馈很及时，会帮助有问题的同学答疑解惑，会经常更新，收入How to精选教程专栏

Hexo文件结构

果果小师弟的博客

08-24

1445

我们在初始化我们的博客文件夹后会生成如下文件，这是hexo官方说明的。 1、在执行hexo init命令后 _config.yml文件网站的配置信息，您可以在此配置大部分的参数。 package.json文件 package.json用来查看Hexo的版本以及相关依赖包的版本。 Hexo会默认安装： hexo：主程序 hexo-deployer-git：实现git部署 hexo-generator-archive：存档页面生成器 hexo-generator-category：分类页面生成器 he

hexo常用命令

abc_soul的博客

10-18

770

title: hexo常用命令 date: 2018-10-18 14:29:59 tags: 写文章 hexo new [layout] &amp;amp;lt;title&amp;amp;gt; 你可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。布局（Layout） Hexo 有三种默认布局：post、page...

HEXO 基本使用

CarpeDiem

09-19

844

本篇主要记录使用 hexo 写博客并发布到个人网站上。

GitHub Pages + Hexo搭建个人博客网站，史上最全教程

Cool的博客

07-26

6839

文章目录一、准备工作1. GitHub账号2. 安装Git3. 安装NodeJS 二、创建仓库三、安装Hexo四、更换主题1. NexT 主题2. Fluid主题四、创建文章五、个性化页面展示1. 浏览器tab页名称2. 博客标题3. 主页正中间的文字六、添加阅读量统计1. 申请LeanCloud账号并创建应用2. 修改Fluid配置单篇文章阅读量计数页面底部展示网站的 PV、UV 统计数七、添加评...