Theme Gravity 2024/02/17
Theme Gravity 2024/02/17
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 Power 插件
使用 Gravity Power 插件 可以使 Gravity 主题的功能得到完全发挥，Gravity Power 插件为主题添加了如下的功能支持：
- Github Giscus 评论系统：Gravity 主题使用了更适合程序员的 Github Giscus 评论系统，安装插件后在插件中配置 Github 私钥 并在主题中配置 评论设置 可体验完整功能。
- 访客所在地实时和风天气：Gravity Power 插件在后端提供了和风天气的相关 API，安装插件后在插件中配置 和风天气秘钥 后并在主题设置的侧边栏中启用 天气 可体验完整功能。
- 全部文章目录：除了原版的 Category 分类页，插件为主题也提供了
/directory路径的目录页，所有文章将按照分类拼音的首字母进行排序展示，为读者提供更好的阅读环境。 - 最近评论内容：插件在支持 Giscus 的同时也使用了 GraphQL 从配置的评论仓库中排序出最近的 5 条评论搭配主题的侧边栏来展示。
您只需要进入 Gravity Power 插件 仓库，在 Releases 页面下载最新的发布的插件并安装到 Halo 中即可。