Skip to content

用gridea管理webstack的nav page¶

install¶

1. download and install gridea from https://github.com/getgridea/gridea/releases
2. download gridea webstack theme and put in gridea theme folder

config¶

icon¶

icon-star
icon-pencil
icon-globe
icon-database

使用IcoMoon生成图标字体

logos¶

The Favicon Finder

categories¶

笔记 Write
工具 Tools
阅读 Read
学习 Learn
股市 Stock
导航 Nav

gridea-theme-webstack templates-index.ejs¶

                <ul id="main-menu" class="main-menu">
                    <!-- li 加 has-sub 开启分组-->
                    <li class="has-sub">
                        <a>
                            <i class="icon-globe"></i>
                            <span class="title">在线工具</span>
                        </a>
                        <!-- ul li 格式添加子分组-->
                        <ul>
                            <li>
                                <a href="#教学助手" class="smooth">
                                    <i class="icon-star"></i>
                                    <span class="title">教学助手</span>
                                </a>
                            </li>
                            <li>
                                <a href="#图文影音" class="smooth">
                                    <i class="icon-pencil"></i>
                                    <span class="title">图文影音</span>
                                </a>
                            </li>
                            <li>
                                <a href="#百科全书" class="smooth">
                                    <i class="icon-database"></i>
                                    <span class="title">百科全书</span>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <% if (site.customConfig.fun4) { %>
                    <li>
                        <a href="#实用软件" class="smooth">
                            <i class="icon-desktop"></i>
                            <span class="title">实用软件</span>
                        </a>
                    </li>
                    <% } %>
                    <% if (site.customConfig.fun4) { %>
                    <li>
                        <a href="#线上课程" class="smooth">
                            <i class="icon-graduation-cap"></i>
                            <span class="title">线上课程</span>
                        </a>
                    </li>
                    <% } %>

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

                    <li class="submit-tag">
                        <a href="<%= themeConfig.domain %>/about">
                            <i class="icon-heart"></i>
                            <span class="title">关于本站</span>
                        </a>
                    </li>
                </ul>

            <!-- 在线工具 -->
            <% if (site.customConfig.fun1) { %>
            <h4 class="text-gray"><i class="icon-star" style="margin-right: 7px;" id="教学助手"></i>教学助手</h4>
            <div class="row">
                <% site.customConfig.fun1.forEach(function(fun) { %>
                <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="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 />
            <% } %>
            <% if (site.customConfig.fun2) { %>
            <h4 class="text-gray"><i class="icon-pencil" style="margin-right: 7px;" id="图文影音"></i>图文影音</h4>
            <div class="row">
                <% site.customConfig.fun2.forEach(function(fun) { %>
                <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="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 />
            <% } %>
            <% if (site.customConfig.fun3) { %>
            <h4 class="text-gray"><i class="icon-database" style="margin-right: 7px;" id="百科全书"></i>百科全书</h4>
            <div class="row">
                <% site.customConfig.fun3.forEach(function(fun) { %>
                <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="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 />
            <% } %>
            <!-- END 在线工具 -->

config.json¶

  "customConfig": [
    {
      "name": "fun1",
      "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": "" }
      ],
      "note": ""
    },
    {
      "name": "fun2",
      "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": "" }
      ],
      "note": ""
    },
    {
      "name": "fun3",
      "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": "" }
      ],
      "note": ""
    },
    {
      "name": "fun4",
      "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": "" }
      ],
      "note": ""
    },
    {
      "name": "fun5",
      "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": "" }
      ],
      "note": ""
    },
    {
      "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": "" }
      ],
      "note": ""
    }
  ]

links¶