文档文档

主题

1041~4 分钟

配置

TypeScript
import { defineConfig } from 'ezal';
import { theme } from 'ezal-theme-example';
import { Temporal } from '@js-temporal/polyfill';

export default defineConfig({
  // 其他配置忽略
	theme: await theme({
		favicon: ['/favicon.svg'],
		nav: [
			{ name: '首页', link: '/' },
			{ name: '归档', link: '/archive/' },
			{ name: '链接', link: '/links/' },
			{ name: '关于', link: '/about/' },
		],
		since: Temporal.ZonedDateTime.from({
			year: 2025,
			month: 11,
			day: 8,
			hour: 21,
			minute: 40,
			second: 0,
			timeZone: 'Asia/Shanghai',
		}),
		contact: [
			{
				color: '#444',
				icon: 'github',
				name: 'Github',
				url: 'https://github.com/JonnyJong/ezal',
			},
			{
				color: '#d67c00',
				icon: 'rss',
				name: 'Atom',
				url: '/atom.xml',
			},
		],
		links: [
			{
				title: '链接',
				description: '博客示例',
				items: [
					{
						name: `Jonny's Blog`,
						description: '欢迎光临小站',
						link: 'https://jonnys.top/',
						avatar: 'https://jonnys.top/img/avatar.svg',
						color: '#00AA00',
					},
				],
			},
		],
		inject: '<link rel="stylesheet" href="/icon/index.css">',
		home: {
			slogan: 'Welcome!👋<br>Here is the demo site of ezal blog framework.',
		},
	}),
});

功能

搜索

基于 pagefind 实现，默认索引所有文章，不索引普通页面。
若要禁用某篇文章的索引，需在文章 frontmatter 中添加 index: false；
若要为某个普通页面启用索引，存在页面 frontmatter 中添加 index: true。

此功能将产生以下文件：

RSS、Atom

基于 feed 实现，包含所有文章和分类。

此功能将产生以下文件：

站点地图

基于 sitemap 实现，默认索引所有文章和主页，不索引普通页面。
若要禁用某篇文章的索引，需在文章 frontmatter 中添加 sitemap: false；
若要为某个普通页面启用索引，存在页面 frontmatter 中添加 sitemap: true。

此功能将产生以下文件：

IndexNow

主题集成了 IndexNow，配置密钥后即可使用。

默认索引所有文章和主页，不索引普通页面。
若要禁用某篇文章的索引，需在文章 frontmatter 中添加 robots: false；
若要为某个普通页面启用索引，存在页面 frontmatter 中添加 robots: true。

TypeScript
import { defineConfig } from 'ezal';
import { theme } from 'ezal-theme-example';

export default defineConfig({
  // 其他配置忽略
	theme: await theme({
    indexNow: {
      bing: 'your_bing_key', // Bing IndexNow 密钥
      yandex: 'your_yandex_key', // Yandex IndexNow 密钥
    },
	}),
});

Waline

主题集成了 Waline，添加服务器链接配置后即可启用：

TypeScript
import { defineConfig } from 'ezal';
import { theme } from 'ezal-theme-example';

export default defineConfig({
  // 其他配置忽略
	theme: await theme({
    waline: {
      serverUrl: 'https://example.com',
      visitor: true, // 启用访问量统计
      commentCount: true, // 启用评论数显示
      pageview: true, // 启用页面浏览量统计
      emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo'], // 自定义表情包
      reaction: ['https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/2018new_grinninga_org.png'], // 反应表情
    },
	}),
});

图像优化

主题支持自动图像优化，可自动将图像转换为多种格式以提供最佳性能。

支持的输入格式：

默认优化规则：

TypeScript
import { defineConfig } from 'ezal';
import { theme } from 'ezal-theme-example';

export default defineConfig({
  theme: await theme({
    imageCache: {
      // 图像元数据缓存路径
      metadata: './image-metadata.sqlite',
      // 优化版图像缓存路径
      optimized: './cache',
    }
  }),
});

主题配置选项详解

导航栏配置

TypeScript
nav: [
  { name: '首页', link: '/' },
  { name: '归档', link: '/archive/' },
  { name: '链接', link: '/links/' },
  { name: '关于', link: '/about/' },
]

颜色配置

TypeScript
color: {
  light: '#006000', // 浅色主题色
  dark: '#00BB00',  // 深色主题色
}

Markdown 选项

TypeScript
markdown: {
  lineBreak: 'common-mark', // 'common-mark' | 'soft'
  codeBlockTheme: {
    light: 'light-plus',     // 浅色代码主题
    dark: 'dark-plus'        // 深色代码主题
  }
}

主页设置

TypeScript
home: {
  articlesPrePage: 10,       // 每页文章数量
  logo: {
    viewBox: '0 0 100 100',  // SVG logo 的 viewBox
    g: '<path d="..."/>',    // SVG logo 的路径定义
  },
  slogan: '欢迎来到我的博客', // 主页标语
}

友情链接页面样式

可以自定义友情链接页面启用的样式：

TypeScript
linkPageStyles: [
  'image',   // 启用图像样式
  'table',   // 启用表格样式
  'heading', // 启用标题样式
  'list',    // 启用列表样式
  'footnote',// 启用脚注样式
  'tabs',    // 启用选项卡样式
  'note',    // 启用注释样式
  'fold',    // 启用折叠样式
  'kbd',     // 启用键盘标签样式
]

CDN 配置

可以自定义外部资源的 CDN 地址：

TypeScript
cdn: {
  katex: 'https://example.com/katex.min.css',     // KaTeX 样式文件
  walineCSS: 'https://example.com/waline.css',   // Waline 样式文件
  walineJS: 'https://example.com/waline.js',     // Waline 脚本文件
}

自定义 HTML 注入

可以在页面的 <head> 中注入自定义内容：

TypeScript
inject: '<link rel="stylesheet" href="/icon/index.css">'

页面类型

主题支持以下页面：