Unique's Blog

Rocky主题记录

2022-01-05 · 1458字 · 9 min read
🏷️  Gridea

基于 Gridea 的 Rocky 主题使用记录，修改了部分样式，主要变更可以查看更新日志。部分参考引用博客参考，向这些作者表示感谢。
最近的更新：查看更新日志

header 修改

修改templates\includes\header.ejs，删除 RSS 内容

<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>

将链接部分放置到 footer 中即可

添加友链页面

在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": ""
​        },
​        {
​            "label": "描述",
​            "name": "siteDesc",
​            "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 class="bg-white dark:bg-gray-600 shadow-box rounded-lg text-gray-700 dark:text-gray-200">
          <div style="padding-left: 20px">
            ​
            <br />
            <p>需要添加友链可在下方留言</p>
            ​
            <br />
            ​
            <strong>格式:</strong>
            ​
            <br />
            ​
            <ul>
              ​
              <li style="padding-left: 2rem">
                ​
                <b>网站名称</b>
                ​ : eg. Nuo's Blog ​
              </li>
              ​
              <li style="padding-left: 2rem">
                ​
                <b>网站链接</b>
                ​ : eg. https://qxxiao.cn ​
              </li>
              ​
              <li style="padding-left: 2rem">
                ​
                <b>头像链接</b>
                ​ : eg. https://pic.qxxiao.cn/avatar.png ​
              </li>
              ​
              <li style="padding-left: 2rem">
                ​
                <b>网站描述</b>
                ​ : eg. 温故而知新 ​
                <span style="color: #ff6b81">console.log(😊);</span>
                ​
              </li>
              ​
            </ul>
            ​
            <br />
            ​
          </div>
          ​
        </div>
        <div class="friendbox">
          ​ <% if (site.customConfig.friends) { %> <% site.customConfig.friends.forEach(function(friend) { %>
          <div class="friend-box friendblock">
            ​
            <img src="<%= friend.siteLogo %>" class="friend-avatar" />
            <div class="flink-info">
              ​
              <a href="<%= friend.siteLink %>" target="_blank"><%= friend.siteName %></a>
              ​
              <br />
              ​ <%= friend.siteDesc %> ​
            </div>
            ​
          </div>
          ​ <% }); %> <% } %> ​
        </div>
        ​ <% 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>
        ​ <% } %> <% if(site.customConfig.openTwikoo) { %>
        <div id="tcomment"></div>
        ​ <% } %> <%- include('./includes/footer') %> ​
      </div>
      ​
    </div>
    ​ <% if (site.customConfig.openValine) { %> <%- include('./includes/valine') %> <% } %> <% if (typeof ​
    commentSetting !== 'undefined' && commentSetting.showComment) { %> <% if (commentSetting.commentPlatform === ​
    'gitalk') { %> <%- include('./includes/gitalk') %> <% } %> <% } %> <% if(site.customConfig.openTwikoo) { %>
    <script src="https://cdn.jsdelivr.net/npm/twikoo@1.2.0/dist/twikoo.all.min.js"></script>
    ​
    <link
      rel="stylesheet"
      ​
      href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
      ​
      integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
      ​
      crossorigin="anonymous"
      ​
    />
    ​
    <script
      ​
      defer
      ​
      src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
      ​
      integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
      ​
      crossorigin="anonymous"
      ​
    ></script>
    ​
    <script
      ​
      defer
      ​
      src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
      ​
      integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
      ​
      crossorigin="anonymous"
      ​
    ></script>
    <script>
      ​            twikoo.init({
      ​                envId: '<%= site.customConfig.envId %>',
      ​                el: '#tcomment',
      ​                katex: {
      ​                    delimiters: [
      ​                        { left: '$$', right: '$$', display: true },
      ​                        { left: '$', right: '$', display: false },
      ​                        { left: '\(', right: '\)', display: false },
      ​                        { left: '\[', right: '\]', display: true },
      ​                    ],
      ​                    throwOnError: false,
      ​                },
      ​            });
      ​
    </script>
    ​ <% } %> ​
  </body>
</html>

相关的css:

@media screen and (min-width: 780px) {
​    .friendbox {
​        border-radius: 0.5rem;
​        margin: 20px 0px 50px 0px;
​        padding: 0px 55px 0px 55px;
​    }
}
@media (prefers-color-scheme: dark) {
​    .friendbox {
​        background-color: #444444;
​    }
}

.friend-box {
​    display: flex;
​    flex-direction: row;
​    justify-content: center;
​    width: 350px;
​    background-color: #faf9f7;
​    border: 1px solid rgba(0, 0, 0, 0.125);
​    border-radius: 0.25rem;
​    box-shadow: 0 6px 14px 0 rgb(0 0 0 / 4%);
​    margin: 10px 20px 10px 20px;
}
@media (prefers-color-scheme: dark) {
​    .friend-box {
​        background-color: #333333;
​    }
}
.friendblock {
​    display: inline-block;
}
.friend-box img.friend-avatar {
​    width: 70px;
​    height: 70px;
​    border-radius: 50%;
​    float: left;
​    margin: 15px;
}
.friend-box .flink-info {
​    height: auto;
​    overflow: hidden;
​    line-height: 25px;
​    margin: 20px;
}

代码样式

增加行号显示，代码语言显示，复制选项；在post.ejs中添加对应文件：

<% if (site.customConfig.codeHighlight) { %> ​
<link
  rel="stylesheet"
  href="<%= site.themeConfig.domain %>/media/css/prism<%= `-${site.customConfig.hightlightTheme || 'atom-dark'}` %>.css"
/>
​
<link
  href="https://cdn.bootcdn.net/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css"
  rel="stylesheet"
/>
​
<link href="https://cdn.bootcdn.net/ajax/libs/prism/1.19.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />
<% } %>

<!-- Code Highlight -->
<% if (site.customConfig.codeHighlight) { %>
<script src="<%= site.themeConfig.domain %>/media/prism.js"></script>
<script>
  ​      Prism.highlightAll()
  ​
</script>
<script
  defer
  src="https://cdn.bootcdn.net/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"
></script>
<script defer src="https://cdn.bootcdn.net/ajax/libs/prism/1.19.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script
  defer
  src="https://cdn.bootcdn.net/ajax/libs/prism/1.19.0/plugins/show-language/prism-show-language.min.js"
></script>
<script
  defer
  src="https://cdn.bootcdn.net/ajax/libs/prism/1.19.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
></script>
<% } %>

在最后添加

<!-- line number for code block -->
<script>
  var pres = document.getElementsByTagName("pre");
  for(var i = 0; i < pres.length; i++){
  ​    var pre = pres[i];
  ​    if(pre.childNodes[0].nodeName == "CODE"){
  ​        pre.setAttribute("class","line-numbers");
  ​    }
  }
</script>

参考

  1. https://vlieo.com/tag/sx7g1O9Qg/

  2. https://yyl125.top/

本文链接: Rocky主题记录

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

发布日期: 2022-01-05

最新构建: 2024-12-26

本文已被阅读 0 次，该数据仅供参考

欢迎任何与文章内容相关并保持尊重的评论😊 !

共 43 篇文章 | Powered by Gridea | RSS
©2020-2024 Nuo. All rights reserved.