XYZ1024' Blog

Rocky主题魔改记录

2021-01-16 · 8 min read ·
Gridea

Rocky主题魔改记录

RSS更改位置

RSS在上方总感觉不舒服，打开

templates\includes\header.ejs

<a href="<%= themeConfig.domain %>/atom.xml" target="_blank" class="py-2 md:py-1 px-4 mx-4 inline-flex transition font-semibold rounded dark:hover:bg-gray-600 hover:bg-gray-200">
      RSS
</a>

把这里注释掉，再复制到你想加的地方，比如我是直接在客户端的主题配置里加到了底部信息里。

文章末尾分享

默认的有Twitter、微博、Telegram。这些肯定是不够的，我们需要做一些改动。

assets\media\scripts\main.js

把你不需要的注释掉，例如:

/*shareToWeibo() {
      window.open(`https://service.weibo.com/share/share.php?title=${this.text}&url=${this.url}`, '_blank', 'width=615,height=505')
},*/

我添加的是QQ的，加入QQ的分享

shareToQQ() {
      window.open(`http://connect.qq.com/widget/shareqq/index.html?url=https://xyz1024.top/&sharesource=qzone&summary=Gridea&desc=Gridea`, '_blank', 'width=615,height=505')
 },

url后面换成你自己的链接，summary和desc也是一样。再打开

templates\post.ejs

从第55行开始，到72行，都是分享的按钮。添加

<div class="px-4 cursor-pointer text-indigo-500 hover:bg-indigo-100 dark:hover:bg-gray-600 inline-flex" @click="shareToQQ">
    <i class="ri-qq-line"></i>
 </div>

顺序就是显示的顺序，比如我添加在了

<div class="px-4 cursor-pointer text-blue-500 hover:bg-blue-100 dark:hover:bg-gray-600 inline-flex" @click="shareToTwitter">
   <i class="ri-twitter-line"></i>
</div>

的下面，QQ的按钮就会显示在Twitter的右边。

搜索功能

Rocky没有搜索功能，所以需要自己添加

下载 https://github.com/tangkaichuan/gridea-search

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

根据dalao的文档放置

插入到header.ejs里

<div class="gridea-search-container">
      <form id="gridea-search-form" action="<%= themeConfig.domain %>/search/">
        <input class="gridea-search-input" autocomplete="off" spellcheck="false" name="q" placeholder="搜索...">
      </form>
</div>

当然这样是不够的，还需要自己写CSS，这是我的，可以根据我的修改

.gridea-search-container {
  margin-left: 10px;
  margin-right: 7px;
  float: right;
}

.gridea-search-container
.gridea-search-input {
  height: 30px;
    width: 200px;
    box-sizing: border-box;
    padding: 0 15px 0 30px;
    border: 1px solid #e3e3e3;
    border-radius: 15px;
    color: #273849;
    outline: none;
    transition: border-color 0.2s ease;
    background: #fff url(../media/images/search.svg) 8px 5px no-repeat;
    background-size: 20px;
    vertical-align: middle !important;
}

#gridea-search-result {
  padding: 150px;
}

#gridea-search-result {
  text-align: center;
  color: #81a5f8;
}

友链页面

Rocky同样地也没有友链页面

在主题的config.json中插入


{
      "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": "input", "value": "" }
      ],
      "note": ""
    }

记得前面加逗号

在templates文件夹中新建friends.ejs

依旧可以参考我的

<html lang="en">
  <head>
    <%- include('./includes/head', { siteTitle: themeConfig.siteName }) %>
    <meta name="description" content="<%- themeConfig.siteDescription %>" />
    <!--<link rel="stylesheet" type="text/css" href="<%= site.themeConfig.domain %>/media/css/friends.css">-->
  </head>
  <body>
    <div class="antialiased flex flex-col min-h-screen" id="app">
      <%- include('./includes/header') %>

      <div class="max-w-4xl w-full mx-auto pt-32">

        <div style="background-color: #ffd602; color: midnightblue; border-radius: 15px;">
          <div style="padding-left: 10px;">
            <br>
          <p>需要添加友链可在下方留言或发邮件至邮箱:<strong>xyz1024@xyz1024.xyz</strong></p>
            <br>
            <strong>格式:</strong>
            <br>
            <ul>
              <li>  网站名称:</li>
              <li>  网站链接:</li>
              <li>  头像链接:</li>
            </ul>
            <br>
            <strong>要求:</strong>
            <br>
            <ul>
              <li>  需要全HTTPS</li>
              <li>  不能使用免费域名</li>
              <li>  没有不良内容，没有指向不良内容的外链</li>
            </ul>
            <br>
          </div>
        </div>

            <% 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>
                  </div>
                </div>
              <% }); %>
          <% } %>
        </article>
        </div>
        
        <div class="max-w-4xl w-full mx-auto pt-32">
        <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
          <% if (commentSetting.commentPlatform === 'gitalk') { %>
            <div id="gitalk-container"></div>
          <% } %>
  
          <% if (commentSetting.commentPlatform === 'disqus') { %>
            <%- include('./includes/disqus') %>
          <% } %>
        <% } %>
  
        <% if (site.customConfig.openValine) { %>
          <div id="vlaine-comment"></div>
        <% } %>
      </div>

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

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="<%= site.themeConfig.domain %>/media/scripts/main.js"></script>
    
    <% if (site.customConfig.openValine) { %>
      <%- include('./includes/valine') %>
    <% } %>
    <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
      <% if (commentSetting.commentPlatform === 'gitalk') { %>
        <%- include('./includes/gitalk') %>
      <% } %>
    <% } %>
  </body>
</html>

打开Gridea客户端，添加新菜单，链接为/friends

未完待续