Skip to content

Commit dca36c9

Browse files
wonder-lightwonder-light
committed
docs(theme):
修改文档中的主题内容
1 parent 4b98ac0 commit dca36c9

File tree

8 files changed

+107
-190
lines changed

8 files changed

+107
-190
lines changed

‎docs/en-us/docs/theme/custom.md

Lines changed: 45 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -104,58 +104,49 @@ Each theme is optionally paired with a `config.json` configuration file and a `s
104104

105105
### style-override.dart
106106

107-
```dart
108-
void generateOverride(Map<String, dynamic> params) {
109-
var result = "";
110-
//Dark skin
111-
if (params[skin] case String skin when skin != "white") {
112-
result += '''
113-
body{
114-
color:#dee2e6;
115-
}
116-
a,.link{
117-
color:#e9ecef;
118-
}
119-
''';
107+
```django
108+
{# Dark skin #}
109+
{% if skin and skin != "white" %}
110+
body{
111+
color: #dee2e6;
120112
}
121-
//Maximum width of the content area - contentMaxWidth
122-
if (params[contentMaxWidth] case String value when value != "800px") {
123-
result += '''
124-
.main{
125-
max-width:${value};
126-
}
127-
''';
113+
a, .link{
114+
color: #e9ecef;
128115
}
129-
//Text content Text size - textSize
130-
if (params[textSize] case String size when size != "16px") {
131-
result += '''
132-
.post-detail.post.post-contentp{
133-
font-size:${size};
134-
}
135-
''';
116+
{% endif %}
117+
118+
{# Maximum width of the content area - contentMaxWidth #}
119+
{% if contentMaxWidth and contentMaxWidth != "800px" %}
120+
.main{
121+
max-width: {{ contentMaxWidth }};
136122
}
137-
// Page background color - pageBgColor
138-
if (params[pageBgColor] case String bg when bg != "#ffffff") {
139-
result += '''
140-
body{
141-
background:${bg};
142-
}
143-
''';
123+
{% endif %}
124+
125+
{# Text content Text size - textSize #}
126+
{% if textSize and textSize != "16px" %}
127+
.post-detail.post.post-content{
128+
font-size: {{ textSize }};
144129
}
145-
//Text color - textColor
146-
if (params[textColor] case String color when color != "#333333") {
147-
result += '''
148-
body{
149-
color: ${color};
150-
}
151-
''';
130+
{% endif %}
131+
132+
{# Page background color - pageBgColor #}
133+
{% if pageBgColor and pageBgColor != "#ffffff" %}
134+
body{
135+
background: {{ pageBgColor }};
152136
}
153-
//Custom CSS - customCss
154-
if (params.customCss case String css) {
155-
result += css;
137+
{% endif %}
138+
139+
{# Text color - textColor #}
140+
{% if textColor and textColor != "#333333" %}
141+
body{
142+
color: {{ textColor }};
156143
}
157-
return result;
158-
}
144+
{% endif %}
145+
146+
{# Custom CSS - customCss #}
147+
{% if customCss %}
148+
{{ customCss }}
149+
{% endif %}
159150
```
160151

161152
Yes, as you can see, custom configuration is as simple and clear as that. Let's take a look at the specific fields and how to use them:
@@ -283,21 +274,15 @@ When used in the template, you can play your imagination, social, statistics, fr
283274

284275
Of course, it can also be used in style overlay files:
285276

286-
```dart
287-
void generateOverride(Map<String, dynamic> params) {
288-
// params are custom field objects. You can add custom css based on field values
289-
var result = '';
290-
// Text content Text size - textSize
291-
if (params[textSize] case String size when size != '16px') {
292-
result += '''
293-
body {
294-
font-size: ${size};
295-
}
296-
''';
277+
```django
278+
{# The current context is customConfig #}
279+
{# Text content Text size - textSize #}
280+
{% if textSize and textSize != "16px" %}
281+
.post-detail.post.post-content{
282+
font-size: {{ textSize }};
297283
}
298-
// The final result is placed at the end of the 'main.css' file
299-
return result;
300-
}
284+
{% endif %}
285+
{# The final result is placed at the end of the 'main.css' file #}
301286
```
302287

303288
Here, I believe you have figured out how to add custom configuration capabilities to the theme,

‎docs/en-us/docs/theme/struct.md

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33

44
> Themes have some strongly agreed directory structures and optional static resource directories
55
6-
7-
## j2 structure :id=j2
6+
<br/>
87

98
```
109
fly --------------------- Subject folder name (lowercase, delimited by a hyphen is recommended)
@@ -28,37 +27,10 @@ fly --------------------- Subject folder name (lowercase, delimited by a hyphen
2827
│ ├── tag.j2 ---------- Tag page, list page (required, not renamed)
2928
│ └── friends.j2 ------ Custom template (optional, any name)
3029
├── config.json --------- Theme profile (Optional, recommended)
31-
└── style-override.dart - Theme Style Custom file (optional)
30+
└── style-override.j2 - Theme Style Custom file (optional)
3231
```
3332

34-
35-
## dart structure :id=dart
36-
37-
```
38-
fly --------------------- Subject folder name (lowercase, delimited by a hyphen is recommended)
39-
├── assets -------------- Resource folder (optional, cannot be renamed)
40-
│ ├── media ----------- Theme Static resource directory (optional, cannot be renamed)
41-
│ │ └── fonts ------- Font ICONS Folder (Example)
42-
│ │ └── images ------ Image file for theme (Example)
43-
│ ├── styles ---------- Style folder (optional, not renaming)
44-
│ │ └── main.css ----- Master style file (optional, not renaming)
45-
├── static -------------- Static resource (optional, cannot be renamed)
46-
│ │ └── robots.txt --- (Example)
47-
└── templates ----------- Page Templates folder (required, not renamed)
48-
│ ├── _blocks --------- Page templates folder (optional, you can customize the name)
49-
│ │ ├── footer.dart
50-
│ │ ├── head.dart
51-
│ │ ├── header.dart
52-
│ ├── index.dart ------ Home page, list page (required, not renamed)
53-
│ ├── post.dart ------- Post page, list page (required, not renamed)
54-
│ ├── archives.dart --- Archives page, list page (required, not renamed)
55-
│ ├── tags.dart ------- Tags page, list page (required, not renamed)
56-
│ ├── tag.dart -------- Tag page, list page (required, not renamed)
57-
│ └── friends.dart ---- Custom template (optional, any name)
58-
├── config.json --------- Theme profile (Optional, recommended)
59-
└── style-override.dart - Theme Style Custom file (optional)
60-
```
6133
<br/>
6234

63-
As you can see, there are only five required files，`index`, `post`, `archives`, `tags`, `tag`
35+
As you can see, there are only five required files，`index.j2`, `post.j2`, `archives.j2`, `tags.j2`, `tag.j2`
6436
（The organization must be based on the corresponding directory）

‎docs/en-us/docs/theme/var.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ post: {
141141
abstract: '',
142142
description: 'A static blog writing client, welcome to Glidea',
143143
title: 'Hello Glidea',
144-
tags: [@tag, @tag, @tag], // Article tag array, specifically see the tag field below
144+
tags: ['Glidea', 'dev', 'test'], // Article tag array, specifically see the tag field below
145145
date: 'December 12o 2018, am',
146146
dateFormat: '2018-12-12', // Fields formatted according to Glidea in-app dates
147147
feature: 'post-images/hello-glidea.png', // If there is no cover picture, it is ''
@@ -178,7 +178,7 @@ themeConfig: {
178178
domain: "https://github.com",
179179
archivesPageSize: 50,
180180
archivesPath: "archives", // Archive page path prefix, which can be customized within the application, such as 'blog', 'news', etc
181-
dateFormat: "yyyy-MM-dd",
181+
dateFormat: "yyyy-MM-dd HH:mm:ss",
182182
feedCount: 10,
183183
useFeed: false,
184184
footerInfo: "Powered by <a href=\"https://github.com/wonder-light/glidea\" target=\"_blank\">Glidea</a>",

‎docs/zh-cn/docs/guide/ability.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<br/>
55

66
- 文章
7-
- [ ] 根据选择的主题来渲染 markdown, 并将起呈现在 preview
7+
- [ ] 根据选择的主题来渲染 markdown, 并将起呈现在 preview,
8+
- [ ] 需要优化 preview
9+
- [ ] 可以根据主题提供的配置类自定义渲染 markdown
810
- 渲染
11+
- [ ] 使用 Jinja2 来渲染模板文件
912
- [ ] 使用 dart 来渲染模板文件

‎docs/zh-cn/docs/theme/custom.md

Lines changed: 47 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -102,60 +102,51 @@
102102
}
103103
```
104104

105-
### style-override.dart
106-
107-
```dart
108-
void generateOverride(Map<String, dynamic> params) {
109-
var result = "";
110-
//暗黑皮肤
111-
if (params[skin] case String skin when skin != "white") {
112-
result += '''
113-
body{
114-
color:#dee2e6;
115-
}
116-
a,.link{
117-
color:#e9ecef;
118-
}
119-
''';
105+
### style-override.j2
106+
107+
```django
108+
{# 暗黑皮肤 #}
109+
{% if skin and skin != "white" %}
110+
body{
111+
color: #dee2e6;
120112
}
121-
//内容区最大宽度 - contentMaxWidth
122-
if (params[contentMaxWidth] case String value when value != "800px") {
123-
result += '''
124-
.main{
125-
max-width:${value};
126-
}
127-
''';
113+
a, .link{
114+
color: #e9ecef;
128115
}
129-
//正文内容文字大小 - textSize
130-
if (params[textSize] case String size when size != "16px") {
131-
result += '''
132-
.post-detail.post.post-contentp{
133-
font-size:${size};
134-
}
135-
''';
116+
{% endif %}
117+
118+
{# 内容区最大宽度 - contentMaxWidth #}
119+
{% if contentMaxWidth and contentMaxWidth != "800px" %}
120+
.main{
121+
max-width: {{ contentMaxWidth }};
136122
}
137-
//网页背景色 - pageBgColor
138-
if (params[pageBgColor] case String bg when bg != "#ffffff") {
139-
result += '''
140-
body{
141-
background:${bg};
142-
}
143-
''';
123+
{% endif %}
124+
125+
{# 正文内容文字大小 - textSize #}
126+
{% if textSize and textSize != "16px" %}
127+
.post-detail.post.post-content{
128+
font-size: {{ textSize }};
144129
}
145-
//文字颜色 - textColor
146-
if (params[textColor] case String color when color != "#333333") {
147-
result += '''
148-
body{
149-
color: ${color};
150-
}
151-
''';
130+
{% endif %}
131+
132+
{# 网页背景色 - pageBgColor #}
133+
{% if pageBgColor and pageBgColor != "#ffffff" %}
134+
body{
135+
background: {{ pageBgColor }};
152136
}
153-
//自定义CSS - customCss
154-
if (params.customCss case String css) {
155-
result += css;
137+
{% endif %}
138+
139+
{# 文字颜色 - textColor #}
140+
{% if textColor and textColor != "#333333" %}
141+
body{
142+
color: {{ textColor }};
156143
}
157-
return result;
158-
}
144+
{% endif %}
145+
146+
{# 自定义CSS - customCss #}
147+
{% if customCss %}
148+
{{ customCss }}
149+
{% endif %}
159150
```
160151

161152
是的，如你所见，自定义配置就是这么简单，清晰。下面让我们详细了解一下具体字段和使用方法：
@@ -284,21 +275,15 @@ void generateOverride(Map<String, dynamic> params) {
284275

285276
当然，在样式覆盖文件中也可以使用：
286277

287-
```dart
288-
void generateOverride(Map<String, dynamic> params) {
289-
// params 即自定义字段对象，可以根据字段值来添加自定义 css
290-
var result = '';
291-
// 正文内容文字大小 - textSize
292-
if (params[textSize] case String size when size != '16px') {
293-
result += '''
294-
body {
295-
font-size: ${size};
296-
}
297-
''';
278+
```django
279+
{# 当前上下文即为 customConfig #}
280+
{# 正文内容文字大小 - textSize #}
281+
{% if textSize and textSize != "16px" %}
282+
.post-detail.post.post-content{
283+
font-size: {{ textSize }};
298284
}
299-
// 最终结果会放在 `main.css` 的文件末尾
300-
return result;
301-
}
285+
{% endif %}
286+
{# 最终结果会放在 `main.css` 的文件末尾 #}
302287
```
303288

304289
到这里，相信你已经搞清楚如何给主题增加自定义配置能力了，快去开发一个属于自己的主题吧，分享给其他人会更佳呦！

‎docs/zh-cn/docs/theme/struct.md

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33

44
> 主题有一些强约定的目录结构和可选的静态资源目录
55
6-
7-
## j2 结构 :id=j2
6+
<br/>
87

98
```
109
fly --------------------- 主题文件夹名称 (建议用小写，中划线分隔)
@@ -28,37 +27,10 @@ fly --------------------- 主题文件夹名称 (建议用小写，中划线分
2827
│ ├── tag.j2 ---------- 标签详情页 (必须，不可更名)
2928
│ └── friends.j2 ------ 自定义模版 (可选，任意命名)
3029
├── config.json --------- 主题配置文件 (可选，推荐)
31-
└── style-override.dart - 主题样式自定义文件 (可选)
30+
└── style-override.j2 - 主题样式自定义文件 (可选)
3231
```
3332

34-
35-
## dart 结构 :id=dart
36-
37-
```
38-
fly --------------------- 主题文件夹名称 (建议用小写，中划线分隔)
39-
├── assets -------------- 资源文件夹（可选，不可更名）
40-
│ ├── media ----------- 主题静态资源存放目录（可选，不可更名）
41-
│ │ └── fonts ------- 字体图标文件夹（示例）
42-
│ │ └── images ------ 主题用图片文件（示例）
43-
│ ├── styles ---------- 样式文件夹（可选，不可更名）
44-
│ │ └── main.css ----- 主样式文件 (可选，不可更名)
45-
├── static -------------- 静态资源（可选，不可更名）
46-
│ │ └── robots.txt --- (示例)
47-
└── templates ----------- 页面模版文件夹（必须，不可更名）
48-
│ ├── _blocks --------- 页面模版文件夹（可选，可自定义命名）
49-
│ │ ├── footer.dart
50-
│ │ ├── head.dart
51-
│ │ ├── header.dart
52-
│ ├── index.dart ------ 主页，列表页 (必须，不可更名)
53-
│ ├── post.dart ------- 文章页 (必须，不可更名)
54-
│ ├── archives.dart --- 归档页 (必须，不可更名)
55-
│ ├── tags.dart ------- 标签列表页 (必须，不可更名)
56-
│ ├── tag.dart -------- 标签详情页 (必须，不可更名)
57-
│ └── friends.dart ---- 自定义模版 (可选，任意命名)
58-
├── config.json --------- 主题配置文件 (可选，推荐)
59-
└── style-override.dart - 主题样式自定义文件 (可选)
60-
```
6133
<br/>
6234

63-
如你所见，必须文件只有 5 个，`index`, `post`, `archives`, `tags`, `tag`
35+
如你所见，必须文件只有 5 个，`index.j2`, `post.j2`, `archives.j2`, `tags.j2`, `tag.j2`
6436
（需按照对应目录组织）

0 commit comments

Comments
 (0)