使用Gridea搭建自己的导航站

参考¹

搭建

1. 新建一个Github仓库，启用pages功能。
2. 将gridea-theme-webstack的文件夹放到配置文件夹的theme文件夹下，重启软件，在设置中切换到该主题并保存。
3. 在主题-自定义配置中添加导航站中的网站信息，包括：名称、地址、图片和描述。

配置分类

该主题默认有四个分类，如果需要添加或者调整分类需要手动更改config.json和index.ejs，主题的文件目录如下：

├── assets
│   ├── media
│   │   ├── css
│   │   │   ├── fonts
│   │   │   │   ├── icomoon.eot
│   │   │   │   ├── icomoon.svg
│   │   │   │   ├── icomoon.ttf
│   │   │   │   └── icomoon.woff
│   │   │   ├── icomoon.css
│   │   │   └── main.css
│   │   ├── images
│   │   │   ├── favicon.png
│   │   │   └── logo-collapsed@2x.png
│   │   └── js
│   │       ├── bootstrap.min.js
│   │       ├── jquery-1.11.1.min.js
│   │       ├── lozad.js
│   │       ├── xenon-custom.js
│   │       └── xenon-toggles.js
│   └── styles
│       └── main.less //空文件
├── config.json
└── templates
    ├── archives.ejs //空文件
    ├── index.ejs
    ├── post.ejs //空文件
    ├── tag.ejs //空文件
    └── tags.ejs //空文件

1.如果你只是需要更改分类的名称，在config.json中只需将文件中的label和group进行更改即可，然后更改index.ejs。
2.如果你需要添加分类，首先在config.json中复制添加一个相同的组，并将name更改与其他不同，例如更改为fun6,label和group更改为你想要的名称。

 {
  "name": "fun6",
  "label": "素材资源",
  "group": "素材资源",
  "type": "array",
  "value": [],
  "arrayItems": [
    { "label": "名称", "name": "siteName", "type": "input", "value": "" },
    { "label": "链接", "name": "siteLink", "type": "input", "value": "" },
    { "label": "Logo", "name": "siteLogo", "type": "input", "value": "" },
    { "label": "描述", "name": "description", "type": "input", "value": "" }
  ],

3.将如下图的每个类似代码段中的名称更改为与config.json中对应name下的名称：

                    <% if (site.customConfig.fun6) { %>
                    <li>
                        <a href="#素材资源" class="smooth">
                            <i class="icon-inbox"></i>
                            <span class="title">素材资源</span>
                        </a>
                    </li>
                    <% } %>

注意代码端中的site.customConfig.xxxx要与config.json中的name相对应。

        <!-- 素材资源 -->
        <% if (site.customConfig.fun6) { %>
        <h4 class="text-gray"><i class="icon-inbox" style="margin-right: 7px;" id="素材资源"></i>素材资源</h4>
        <div class="row">
            <% site.customConfig.fun6.forEach(function(fun) { %>
            <div class="col-sm-3">
                <div class="xe-widget xe-conversations box2 label-info" οnclick="window.open('<%= fun.siteLink %>', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<%= fun.siteLink %>">
                    <div class="xe-comment-entry">
                        <a class="xe-user-img">
                            <img <% if (fun.siteLogo) { %> data-src="<%= fun.siteLogo %>" <% } else { %> avatar="<%= fun.siteName %>" <% }; %> class="lozad img-circle" width="40">
                        </a>
                        <div class="xe-comment">
                            <a href="#" class="xe-user-name overflowClip_1">
                                <strong><%= fun.siteName %></strong>
                            </a>
                            <p class="overflowClip_2"><%= fun.description %></p>
                        </div>
                    </div>
                </div>
            </div>
            <% }); %>
        </div>
        <br />
        <% } %>

注意： 若要添加分类，需要复制添加index.ejs中的2个代码段，并更改site.customConfig.xxxx，以及代码段中的名称，并需要与config.json中的name和`name对应数组的内容相匹配。

---

1. 使用Gridea+Github Pages搭建自己的导航站 - 记忆一隅 ↩︎