6

为 ICARUS 而生的友情链接页面

 2 years ago
source link: https://blog.uiharu.top/archives/feat-icarus-links-page.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

为 ICARUS 而生的友情链接页面

Icarus 是个好主题，但加上友链界面就更棒啦，所以适当的魔改亦十分重要。那么，如何利用 Icarus 原有的素材拼凑出一个友链界面呢？

针对 Icarus 主题並未设计独立的友链页面，我在迁移之初就已经思考如何设计了。最终，我决定现学现卖，用 Icarus 归档页面重新拼凑一个友链页面。因为我非常欣赏这种时间线的展现模式。

同时受 苏卡卡的友链页面 的启发，我最终抛弃了静态编写的执念，转而采用 JavaScript 动态解析 JSON 的模式实现。

具体效果可於 Kitcham的友链页面 预览，项目亦已於 Github 仓库 Kitcham/hexo-theme-icarus/links分支 开源。本仓库亦包含我个人对 Icarus 主题的一些魔改配置，有关本文提到的友链相关文件请切换到 links 分支。

注意，本文仅专注於 JSON 的获取及前端样式设计，有关 JSON 的转换及生成请参阅我另一篇文章 没人比我更懂方便 —— 透过 Github Action 优雅生成友链数据。

实际上原理並不十分复杂，本项目的解析 JavaScript 脚本亦是大体借鉴 苏卡卡的友链页面 ，並在此基础上进行了 URL 的格式改写等操作。

本项目大致思想是通过设立标签 apps-links-info 负责显示友链信息，apps-links-load-tips 负责显示提示信息，並於 JSON 加载解析完成前保持 apps-links-info 标签的隐藏 display='none' 属性及 apps-links-load-tips 标签的展示 display='block' 属性。当 JSON 解析完毕后，二者属性分别反转，这样友链信息页面就展示出来了。

同时，本项目还对以下三种情况做出判断：

  • 用户是否开启 JavaScript 的判断，如用户未开启 JavaScript 则提示其开启后再度尝试
  • JSON 文件是否能够获取，若不能获取，提示加载失败
    • themes\icarus\source\js\getLinks.js
      themes\icarus\source\js\getLinks.js
      loadwerror = function() {
          targetTemp.innerHTML = '<p class="title tips">加载失败，请 <a href="/links/">刷新</a> 重试！</p>'
      },
      (load = new XMLHttpRequest).open("GET", encodeURI(jsonTarget), !0),
      load.onload = function() {
          var e;
          200 <= load.status && load.status < 300 || 304 === load.status ? (e = JSON.parse(load.responseText), name(e)) : loadwerror()
      },
      load.timeout = 4500,
      load.ontimeout = blogLink,
      load.onerror = blogLink,
      load.send()
  • 对 URL 进行格式化

下载相关文件

将 Kitcham/hexo-theme-icarus/links分支 仓库的 links 分支 Fork 到自己的 Github Repo 中，随后你可对其进行一些自己的个性化修改（如你自己的友链信息、展现风格等）。然后下载到本地依照对应路径存放在主题文件夹中。

本修改主要涉及下述两个文件：

  • themes\icarus\layout\links.jsx
  • themes\icarus\source\js\getLinks.js

新建友情链接页面文件

随后你需要在 Hexo 目录下建立 source/about 文件夹，並在其中新建 index.md 文件，再依照以下格式填写内容即可：

---
title: 你的友链页面名称
date:
layout: links
---

务必注意 layout 应为 links 属性。

配置友链信息及个性化定制

你需要於文件中更改些许配置：

  • 位于 <div class="card-content"> 中的提示信息：
    • themes\icarus\layout\links.jsx
      themesicarus\layout\links.jsx
      <div class="card">
          <div class="card-content">
              <p>这里是我永远膜拜的奆佬们~~</p>
          </div>
      </div>
  • 位于 <div class="card" id="my-links-info"> 中的个人网站友链信息：
    • themes\icarus\layout\links.jsx
      themes\icarus\layout\links.jsx
      <div class="card-content" >
                              <p>若果希望贵站出现在此，敬请依照下面的方法交换吧~二者任一皆可</p>
                              <ul class=".content ul" style=> 
                                  <li>敬请阅读 <a href="https://github.com/Kitcham/Friends">Kitcham/Friends</a> 此 GitHub 仓库的 README，然后依照操作指引提交 PR 即可完成交换啦！</li>
                                  <li>於评论区依照如下格式留言，由我提交到 Github 仓库进行 PR，这样也是可以的~</li>
                              </ul>
                              <br/><p>本站信息胪列如下（亦是参考格式）：</p>
                              <ul class=".content ul" style=> 
                                  <li><strong>网站图标：</strong><a href="https://example.com/example.png">https://example.com/example.png</a></li>
                                  <li><strong>Gravatar：</strong><a href="https://example.com/example.png">https://example.com/example.png</a></li>
                                  <li><strong>网站名称：</strong>你的网站名称</li>
                                  <li><strong>网站地址：</strong><a href="https://example.com/">https://example.com/</a></li>
                                  <li><strong>网站简介/Slogan：</strong>Hello, world</li>
                              </ul>
                              <br/><p>Some information…</p>
                          </div>
    • 你亦可於标签 <ul class=".content ul" style={{……}}> 内更换为你的 CSS 样式
  • JSON 的获取地址：
    • themes\icarus\source\js\getLinks.js
      themes\icarus\source\js\getLinks.js
      !function links(target, getFor ) {
          var load, loadwerror, jsonTarget, name, blogLink, imageUrl, targetTemp = target.getElementById("app-links");
          jsonTarget = "https://example.com/links.json", // Your JSON URL  此处填写你的 JSON 发布地址
          name = function(e) {
              ……          
              }
              getFor(function() {
                  ……
              })
          },
  • JSON 的解析结果调整及友链信息显示：
    • themes\icarus\source\js\getLinks.js
      themes\icarus\source\js\getLinks.js
      !function links(target, getFor ) {
          ……
          for (var o in e) {
                  var count = e[o];
                  blogLink = count.url;
                  blogLink = blogLink.replace('https://', '');  // remove http(s) 去除 http(s)
                  if (blogLink.endsWith("/")) {
                      blogLink = blogLink.substring(0,blogLink.length - 1);
                  }          
                  content += (name = o, blogLink, imageUrl = count.img, slogan = count.text, '<article class="media"><a class="media-left" href="' + count.url + '"><p class="image is-64x64"><img class="thumbnail" src="' + imageUrl + '" alt="' + name + '"></p></a><div class="media-content size-small"><p class="is-uppercase"><a class="link-muted" href="' + count.url + '">' + blogLink + '</a></p><p class="title is-6"><a class="link-muted" href="' + count.url + '">' + name + '</a></p><p class="is-uppercase"><a class="link-muted" href="' + count.url + '">' + slogan + '</a></p></div></article>')              
          }
          ……
          },
    • 你可於该部分修改 JSON 解析结果及前端展示信息的样式
    • 该部分的去除 http(s) 未来将修改为正则匹配

请务必注意各 div 的 class，id等信息的匹配

JSON 哪里来？

本文仅专注於 JSON 的获取及前端样式设计，有关 JSON 的转换及生成请参阅我另一篇文章 没人比我更懂方便 —— 透过 Github Action 优雅生成友链数据。

该方案只是经我个人思考后，认为普适性较高的方案。如果你有更优雅的方案，欢迎交流~


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK