Rocky主题魔改记录
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