jekyll 主题修改分析

最新推荐文章于 2024-09-09 08:04:45 发布

原创最新推荐文章于 2024-09-09 08:04:45 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了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 为自己新建的首页文件