jekyll 主题修改分析

本文介绍了Jekyll博客系统的主题目录结构及其工作原理,包括如何通过_layouts目录下的模板文件来组织页面内容,以及如何定制首页布局等关键信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主题目录结构

_includes  

定义一些模板的东西, 比如通用的header , footer  

然后在 _layouts 里面的default.html 被引用,将模板注入生成html  

_layouts  

存放layout布局信息,在具体页面的配置  layout: 上被引用  

然后页面下面的详细内容,会被传为content传入添加到layout 中 {/{content}/} 里面

assets  

存放css,js,image之类的东西

启动时分析

jekyll build

在执行这条命令时,开始把md文件转换成html ,然后把html根据layout相互注入。  

首先是根目录的index.md,

# You don't need to edit this file, it's empty on purpose.

# Edit theme's home layout instead if you wanna make some changes

# See: https://jekyllrb.com/docs/themes/#overriding-theme-defaults

layout: home

只有一个layout:home 。 说明这时的首页面,就是_layout/home.html的内容

在home.html中可以看到如下内容:

/---

layout: default

/---

<divclass="home">

 <h1class="page-heading">文章列表</h1>

{/{ content }/}

 <ulclass="post-list">

  {/% for post in site.posts %/}

     <li>

      {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}

       <spanclass="post-meta">{{ post.date | date: date_format }}</span>



       <h2>

        {{ post.title | escape }}

       </h2>

     </li>

  {/% endfor %/}

 </ul>

</div>

```

其中的for post in site.posts就是遍历出文章列表,然后在页面上显示,此时如果不想在首页面显示文章,想显示别的,就可以把这些html代码给换掉  

或者在_layout 里面新建一个自己的首页文件, 然后在index.md 中修改layout 为自己新建的首页文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值