zoukankan      html  css  js  c++  java
  • github pages搭建个人网站如何添加导航

    折腾过github pages的同学都清楚使用jekyll搭建个人网站的目录结构,而导航最终的代码是在使用的主题目录中的default.html文件中的。

    我的结构如下:

    .
    ├── 404.html
    ├── about.html
    ├── archive.html
    ├── assets
    │   └── themes
    ├── atom.xml
    ├── categories.html
    ├── changelog.md
    ├── _config.yml
    ├── _drafts
    │   └── jekyll-introduction-draft.md
    ├── History.markdown
    ├── _includes
    │   ├── JB
    │   └── themes
    ├── index.md
    ├── _layouts
    │   ├── default.html
    │   ├── page.html
    │   └── post.html
    ├── pages.html
    ├── _plugins
    │   └── debug.rb
    ├── _posts
    │   ├── 2015-01-29-hello-world.md
    │   ├── 2015-02-01-mysql-00.md
    │   └── 2015-02-01-to-myself.md
    ├── Rakefile
    ├── README.md
    ├── rss.xml
    ├── screenshot.png
    ├── _site
    │   ├── 404.html
    │   ├── about.html
    │   ├── archive.html
    │   ├── assets
    │   ├── atom.xml
    │   ├── categories.html
    │   ├── History.markdown
    │   ├── index.html
    │   ├── mysql
    │   ├── pages.html
    │   ├── rss.xml
    │   ├── screenshot.png
    │   ├── sitemap.txt
    │   ├── tags.html
    │   └── untitled
    ├── sitemap.txt
    ├── tags.html
    └── _theme_packages
        └── hooligan

    也就是图中画红线的目录中,里面是使用的主题目录

    在使用的主题中有四个文件:default.html、page.html、post.html、setting.yml,跟导航相关的代码就在default.html中

    <ul class="nav">
        {% assign pages_list = site.pages %}
        {% assign group = 'navigation' %}
        {% include JB/pages_list %}
    
        {% assign pages_list = site.pages %}
        {% assign group = 'aboutme' %}
        {% include JB/pages_list %}
    </ul>

    ul标签中前三行是默认的,后面三行是我为了添加一个自己介绍的页面而添加的。

    自我介绍的页面头部是这样的:

    ---
    layout: page
    title: About me
    header: About me
    group: aboutme
    ---
    {% include JB/setup %}
    
    <h1> hh </h1>

    需要注意的是group这个地方,它的值是单独的aboutme,这也是为什么我在default.html页面中添加了三行的缘故,因为默认的三行只导入group为navigation的页面。

    同样,如果所有页面都为navigation,则我们是无法控制他们的顺序的。也就是说aboutme可能会排在最前面。

  • 相关阅读:
    设计模式学习笔记--原型模式
    设计模式学习笔记--工厂方法模式
    复制、粘贴一个物体的所有组件
    设计模式学习笔记--装饰模式
    模板方法模式(TemplateMethod)
    FreeSql 与 SqlSugar 性能测试(增EFCore测试结果)
    FreeSql 新查询功能介绍
    FreeSql 过滤器使用介绍
    非常贴心的轮子 FreeSql
    .NETCore 下支持分表分库、读写分离的通用 Repository
  • 原文地址:https://www.cnblogs.com/lit10050528/p/4546684.html
Copyright © 2011-2022 走看看