• Published:

Gridea v0.9+ lets you extend the notes theme with custom fields, which is enough to build a friend links page without leaving the client. The process has three parts: define the friend data in the theme config, create a page template that loops through that data, and add a small block of styles. The examples below use the built-in notes theme.

1. Add the custom field to the theme

Open themes/notes/config.json and add the following block. Note the comma before it: it has to be inserted into the existing JSON structure, right after the previous item. The fields will appear in the client after a restart.

Friend links fields in Gridea

//……
//"note": "UA-xxxxxxxxx-x"
//}, add a comma!!!
    {
      "name": "friends",
      "label": "友链",
      "group": "友链",
      "type": "array",
      "value": [],
      "arrayItems": [
        { "label": "名称", "name": "siteName", "type": "input", "value": "" },
        { "label": "链接", "name": "siteLink", "type": "input", "value": "" },
        { "label": "Logo", "name": "siteLogo", "type": "picture-upload", "value": "" },
        { "label": "描述", "name": "description", "type": "textarea", "value": "" }
      ],
      "note": ""
    }
//  ]
//}

Save the file and restart Gridea. Then go to Theme → Custom theme → Friends.

2. Create the custom page template

Copy themes/notes/templates/post.ejs to friends.ejs in the same folder, then replace its contents with the template below. It uses site.customConfig.friends, so the entries you add in the theme settings are rendered as avatar, link, and description blocks.

<html>
  <head>
    <%- include('./includes/head', { siteTitle: `我的朋友们 | ${themeConfig.siteName}` }) %>
  </head>
  <body>
    <div class="main">
      <div class="main-content">
        <%- include('./includes/header') %>
        <div class="post-detail">
          <article class="post">
            <h2 class="post-title">我的朋友们</h2>

            <div class="post-content-wrapper">
              <div class="post-content">
              <% if (site.customConfig.friends) { %>
                <% site.customConfig.friends.forEach(function(friend) { %>
                  <div class="friend-box">
                    <img class="friend-avatar" src="<%= friend.siteLogo %>">
                    <div class="flink-info">
                      <a href="<%= friend.siteLink %>" target="_blank"><%= friend.siteName %></a>
                      <br/>
                      <%= friend.description %>
                    </div>
                  </div>
                <% }); %>
              <% } %>
              </div>
            </div>
          </article>
        </div>

        <%- include('./includes/footer') %>
      </div>
    </div>
  </body>
</html>

3. Add the page styles

Open themes/notes/assets/styles/main.less and append the following rules. They place friends in two columns and keep avatars round and aligned with the text.

.friend-box {
  float: left;
  width: calc(50% - 20px);
  margin: 15px 10px;
  img.friend-avatar{
    width: 70px;
    height: 70px;
    border-radius: 50% !important;
    float: left;
    margin:0 15px 0 0 !important;
  }
  .flink-info{
    height:70px;
    overflow: hidden;
    line-height: 24px;
  }
}

Friend links page result

After saving, the page is ready to populate from the friend fields in the theme settings.

Related Posts