Theme Gravity

Theme Gravity

Theme Gravity

Gravity 主题的灵感源自 spring.io 官网。Gravity 是一款专为技术写作型博客而打造的,适用于 Halo 平台的原创主题。Gravity 主题的设计沉稳而有力,没有过多的复杂的元素在内,这不仅使读者阅读文章时能有更好的体验,也能使撰写者创作出更好的wenzhang内容。

页面功能

深色与浅色模式

Gravity 主题具备深色与浅色模式切换的功能,并且该状态是跟随您的浏览器的。不仅如此,在组件、代码块、文本元素上也都对这两种模式做出了适配,这使读者在不同光照环境下都能有良好的体验。

侧边栏

Gravity 主题的侧边栏包括了:和风天气(需要"Gravity Power"插件)、关于我、文章检索(需要"搜索"插件)、热点文章(按浏览次数降序排序)、最新评论(需要"Gravity Power"插件)、归档统计(年度统计折线图)、分类标签、Ko-fi发电链接。这些在主题中都是完全可配置的项目。

页面Banner

Gravity 主题为主页、关于、友情链接(需要"链接"插件)、目录(需要"Gravity Power"插件)、瞬间(需要"瞬间"插件)、标签页的抬头Banner都做了特殊的支持,同样,这些都是可以在主题配置中进一步选择你所喜欢的 Banner。

优秀的内容渲染

基本内容渲染

Gravity 主题对于基本文本内容的渲染都采用了统一的 spring.io 风格,包括但不局限于 粗体文本内容 斜体文本内容 被删除的文本内容 inline code Bing链接,以及常规的 有序、无需、代办列表 等。

表格

Gravity 主题对于表格的渲染也同样采用了 spring.io 风格。

Title 1 Title 2 Title 3
row 1 col 1 row 1 col 2 row 1 col 3
row 2 col 1 row 2 col 2 row 2 col 3
row 3 col 1 row 3 col 2 row 3 col 3

代码块

Gravity 主题采用 Prism.js 对代码块进行渲染的同时也做了深色与浅色区分的工作,这使得代码块在文章中更贴近主题且易于阅读。Gravity 的代码高亮还采用了 IntelliJ IDEA 的配色以及优秀的 Jetbrains Mono 字体,这让您的代码看起来更加舒畅。

/* Block comment */
import java.util.Date;
import static AnInterface.CONSTANT;
import static java.util.Date.parse;
import static SomeClass.staticField;
/**
 * Doc comment here for <code>SomeClass</code>
 * @param T type parameter
 * @see Math#sin(double)
 */
@Annotation (name=value)
public class SomeClass<T extends Runnable> { // some comment
  private T field = null;
  private double unusedField = 12345.67890;
  private UnknownType anotherString = "Another\nStrin\g";
  public static int staticField = 0;
  public final int instanceFinalField = 0;
  protected final int protectedField = 0;
  final int packagePrivateField = 0; /* inline comment */
  public boolean trigger = false;

  /**
   * Semantic highlighting:
   * Generated spectrum to pick colors for local variables and parameters:
   *  Color#1 SC1.1 SC1.2 SC1.3 SC1.4 Color#2 SC2.1 SC2.2 SC2.3 SC2.4 Color#3
   *  Color#3 SC3.1 SC3.2 SC3.3 SC3.4 Color#4 SC4.1 SC4.2 SC4.3 SC4.4 Color#5
   * @param param1
   * @param param2
   * @param param3
   */
  public SomeClass(AnInterface param1,
                  int param2,
                  int param3) {
    int reassignedValue = this.staticField + param2 + param3;
    long localVar1, localVar2, localVar3, localVar4;
    int localVar = "IntelliJ"; // Error, incompatible types
    System.out.println(anotherString + toString() + localVar);
    int sum = protectedField + packagePrivateField + staticField;
    long time = parse("1.2.3"); // Method is deprecated
    new Thread().countStackFrames(); // Method is deprecated and marked for removal
    reassignedValue ++; 
    field.run(); 
    new SomeClass() {
      {
        int a = localVar;
      }
    };
    int[] l = new ArrayList<String>().toArray(new int[CONSTANT]);
    Thread thread = () -> {};
  }
}
enum AnEnum { CONST1, CONST2 }
interface AnInterface {
  int CONSTANT = 2;
  void method();
}
abstract class SomeAbstractClass {
  protected int instanceField = staticField;
}

除此之外,配合 Lucence Editor 可以实现 Prism.js 中对 Diff 特殊语法的支持。

@@ -4,6 +4,5 @@
-    let foo = bar.baz([1, 2, 3]);
-    foo = foo + 1;
+    const foo = bar.baz([1, 2, 3]) + 1;
     console.log(`foo: ${foo}`);

醒目标签

Gravity 实现了常用的小标签来辅助文章撰写者来标记一些醒目的内容。

  • 内容来自GPT:这是一段来自 Chat GPT 的内容

  • 内容经过后续的纠正:这段内容后续被纠正过

  • 内容包含不确定的部分:这段话的结论是不确定的

Lucence Editor 组件

Gravity 主题内嵌了 Lucence Editor 可识别的扩展,在编辑器中安装该扩展可以实现快捷且方便的组件插入功能。

演示组件:居中标题
折叠块内容

在 Lucence Editor 中安装后可直接在组件库中嵌入组件。

Gravity Component

使用 Gravity Power 插件

使用 Gravity Power 插件 可以使 Gravity 主题的功能得到完全发挥,Gravity Power 插件为主题添加了如下的功能支持:

  1. Github Giscus 评论系统:Gravity 主题使用了更适合程序员的 Github Giscus 评论系统,安装插件后在插件中配置 Github 私钥 并在主题中配置 评论设置 可体验完整功能。

  2. 访客所在地实时和风天气:Gravity Power 插件在后端提供了和风天气的相关 API,安装插件后在插件中配置 和风天气秘钥 后并在主题设置的侧边栏中启用 天气 可体验完整功能。

  3. 全部文章目录:除了原版的 Category 分类页,插件为主题也提供了 /directory 路径的目录页,所有文章将按照分类拼音的首字母进行排序展示,为读者提供更好的阅读环境。

  4. 最近评论内容:插件在支持 Giscus 的同时也使用了 GraphQL 从配置的评论仓库中排序出最近的 5 条评论搭配主题的侧边栏来展示。

您只需要进入 Gravity Power 插件 仓库,在 Releases 页面下载最新的发布的插件并安装到 Halo 中即可。

页面展示

Tag标签页

Tag

活动页

Activity

目录页

Directory

友情链接页

Links

关于页

About

交流与贡献

您除了可以在本文下方 评论区GitHub IssuesHalo应用市场 内提交关于 Gravity 主题的 BUG 或改进的意见,您还可以加入主题交流群 776203334 获得进一步的支持。