Stellar主题侧边栏每日60s

一、部署每日60s API

• 项目地址[Github仓库](https://github.com/vikiboss/60s)

1. 创建反代站点

2. 创建Docker-Compose文件

version: '3.8'

services:

  60s:

    image: vikiboss/60s:latest

    container_name: 60s

    ports:

      - "4399:4399"  #冒号前面的是实机端口

    restart: always

3. 创建容器实例

• 在当前目录打开终端，并输入 {% copy docker-compose up -d prefix:$ %} 这样就成功了。别忘记面板和服务器防火墙将你的端口打开，我这里就是4399。

• 这里的API不止有每日60s，官方文档。

修改API站点ICON

• 作者这里将API的头像固定了，但是仍可以修改。

• 具体方法如下：

1. root用户入容器内部

    2. 输入命令进入到这个文件夹 {% copy cd /src/middlewares prefix:$ %}

    3. 修改 faviocn.ts 下面框框里面的链接就是站点的ICON

• API到这里就全部部署完成了。

二、增加主题侧边栏组件

创建文件widgets.yml

• 在 /blog/source/_data/ 文件夹下，创建 widgets.yml 文件

2. 创建每日60s组件

everyday_60s:

  layout: markdown

  title: 每日60s

  content: |

    <div class="linklist center" style="grid-template-columns: repeat(1, 1fr); margin-bottom: 0px; ">

      <a class="link" title="点击图片放大查看" href="javascript:void(0);">

        <div class="flex">

          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">

            <path fill="currentColor" d="m13.629 20.472l-.542.916c-.483.816-1.69.816-2.174 0l-.542-.916c-.42-.71-.63-1.066-.968-1.262c-.338-.197-.763-.204-1.613-.219c-1.256-.021-2.043-.098-2.703-.372a5 5 0 0 1-2.706-2.706C2 14.995 2 13.83 2 11.5v-1c0-3.273 0-4.91.737-6.112a5 5 0 0 1 1.65-1.651C5.59 2 7.228 2 10.5 2h3c3.273 0 4.91 0 6.113.737a5 5 0 0 1 1.65 1.65C22 5.59 22 7.228 22 10.5v1c0 2.33 0 3.495-.38 4.413a5 5 0 0 1-2.707 2.706c-.66.274-1.447.35-2.703.372c-.85.015-1.275.022-1.613.219c-.338.196-.548.551-.968 1.262" opacity=".5"></path>

            <path fill="currentColor" d="M7.25 9A.75.75 0 0 1 8 8.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 3.5a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"></path>

          </svg>

          <span>点击图片放大查看</span>

        </div>

      </a>

    </div>

    <div class="linklist center" style="grid-template-columns: repeat(1, 1fr);" id="imageButtonContainer">

      <a class="link" title="点击加载图片" href="javascript:void(0);" onclick="loadImage()">

        <div class="flex" id="loadImageBtn">

          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">

            <g fill="none">

              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>

              <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>

              <circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>

            </g>

          </svg>

          <span>点击加载图片</span>

        </div>

      </a>

    </div>

    <div id="image-container" style="margin-top: 10px; margin-bottom: 10px;"></div>

    <script type="text/javascript">

      // 清除localStorage中的状态，这样页面刷新后按钮能恢复

      localStorage.removeItem('imageButtonClicked');

      if (localStorage.getItem('imageButtonClicked') === 'true') {

        document.getElementById('imageButtonContainer').style.display = 'none';

      }

      function loadImage() {

        // Load image

        var imageContainer = document.getElementById('image-container');

        var img = document.createElement('img');

        <!-- 替换为自己的Api，自己没有服务器也可用这个，不过有概率被墙 -->

        // 在URL末尾附加时间戳，避免浏览器缓存

        img.src = 'https://60s-api.viki.moe/v2/60s?encoding=image-proxy' + new Date().getTime();

        img.alt = '动态加载的图片';

        img.style.maxWidth = '100%';

        img.style.border = '2px solid #ddd';

        img.style.marginTop = '0px'; // 图片的上边距

        // Wrap the image with a fancybox link

        var fancyboxLink = document.createElement('a');

        fancyboxLink.setAttribute('href', img.src);  // Set href to image source for fancybox zoom

        fancyboxLink.setAttribute('data-fancybox', 'gallery'); // Add fancybox group (can be a gallery)

        fancyboxLink.appendChild(img);

        imageContainer.appendChild(fancyboxLink);

        // Hide the image button and save the state in localStorage

        document.getElementById('imageButtonContainer').style.display = 'none';

        localStorage.setItem('imageButtonClicked', 'true');

      }

    </script>

    <!-- 这里的css和js别忘记换成公用cdn或者自己的 -->

    <link rel="stylesheet" href="/jquery.fancybox.min.css">

    <script src="/jquery.min.js"></script>

    <script src="/jquery.fancybox.min.js"></script>

• 上面代码共需修改俩位置，第一个是Api链接，第二个修改最后面的css和js链接。

• Ai大法好，其实直接按照 Markdown 图片形式 ![]() 写就可以了，但是图片有点大，直接加载会导致主页加载时间慢，索性加上了一个按钮，需要时再点击查看。