Config: site/config/_default/config.yaml
Params: site/config/_default/params.yaml
Menus: site/config/_default/menus.yaml
Languages: site/config/_default/languages.yaml
Icon: site/assets/media/icon.png
Logo: site/assets/media/logo.png
Themes: site/data/themes/<theme-name>.toml
I18n: site/i18n/<langCode>.yaml
title: WowchemyPrototype # Website name
baseurl: 'https://example.com/' # Website URL
defaultContentLanguage: enfont_size: 'S|M|L'
description: 'A wowchemy prototype.'
appearance:
# use your theme (eg.alphabiz)
theme_day: alphabiz
theme_night: alphabiz
design:
css_class: # body class
css_style: # body style
name = "alphabiz" # theme name
font = 'minimal'
menu_blur = true # enable backdrop-filter blur
menu_border = true # enable menu bottom border
menu_hover = true # enable menu item hover
[light]
# Primary
primary = ""
# Backgrounds
background = ""
# Menu
menu_primary = ""
menu_text = ""
menu_text_active = ""
menu_title = ""
# Link (optional, default color: primary)
link = ""
link_hover = ""
link_decoration = ""
# Section (optional, default color: transparent)
home_section_odd: ""
home_section_even: ""
[dark]
primary = ""
# etc...
main:
- name: Home
url: /
weight: 10
- pre: "<<"
name: About
post: ">>"
url: about/
weight: 20
# etc...header.navbar.enable
header.navbar.highlight_active_link
header.navbar.align
header.navbar.show_language
header.navbar.show_translations
header.navbar.show_day_night # day night toggle
header.navbar.show_search # search button
header.navbar.show_logo
header.image.width, height # logo sizealign: l | c | r
show_logo:
show website title if false
assets: assets/media/logo.png or logo.svg
footer:
text: 'wowchemy prototype'
show_translations: true
copyright:
notice: '© {year} Me'put your module into assets/js/_vendor folder, then config plugins_vendor prop in the params.yaml
site/assets/js/_vendor/tween.js
params.js
plugins_vendor: [tween]put your js file into assets/js folder, then config plugins_js prop in the params.yaml
site/assets/js/particles.js
params.js
plugins_js: [particles]Set your default language
config.yaml
defaultContentLanguage: enen:
languageCode: en
title: 'Alphabiz Official Website'
contentDir: content/en
zh:
languageCode: zh
title: 'Alphabiz 中文官网'
contentDir: content/zh-
Config localization props in config into sub map (eg.
title) -
Move the files in
contentto its subfoldercontent/en, and supplement the translated content in your second language foldercontent/zh
Create i18n file <langCode>.yaml (eg.site/i18n/en.yaml)
Duplicate params.yaml to params.<langCode>.yaml
Config your localization props in params like footer
params.en.yaml
locale:
date_format: 'Jan 2, 2006'
footer:
text: 'a footer static text'
copyright:
notice: '© {year} wowchemy prototype. All Rights Reserved'params.zh.yaml
locale:
date_format: '2006 Jan 2'
footer:
text: '一段页脚静态文本'
copyright:
notice: '© {year} wowchemy prototype. 版权所有'params.yaml
# general params
appearance:
theme_day: alphabiz
theme_night: alphabiz
font_size: LGeneral params (eg.appearance) in params.yaml will be extended by the localization params file
(eg.params.zh.yaml)
You can set i18n field id as menuItem name and config your i18n file
menus.yaml
main:
- name: menu_item_home
url: /
weight: 10
- name: menu_item_post
url: post/
weight: 20
- name: menu_item_about
url: about/
weight: 100i18n/en.yaml
- id: menu_item_home
translation: Home
- id: menu_item_post
translation: Post
- id: menu_item_about
translation: Abouti18n/zh.yaml
- id: menu_item_home
translation: 主页
- id: menu_item_post
translation: 博客
- id: menu_item_about
translation: 关于Duplicate menus.yaml to menus.xx.yaml if you want to config a menu with different structure
menus.en.yaml
main:
- name: Home
url: /
weight: 10
- name: Post
url: post/
weight: 20
- name: About
url: about/
weight: 100
- name: Twitter
url: twitter/
weight: 110
menus.zh.yaml
main:
- name: 主页
url: /
weight: 10
- name: 博客
url: post/
weight: 20
- name: 关于
url: about/
weight: 100type: widget_page
headless: false
active: true
title
subtitle
design.background.color
design.background.gradient_start
design.background.gradient_end
design.background.video.path
design.background.image.path
design.background.image.image_size
design.background.image.image_position
design.background.image.image_opacity
design.background.image.image_darken
design.spacing.padding
design.clip_path
design.css_class
design.css_style
design.columnstype: hero
headless: false
weight: 10
active: true
hero_media: 'foo.jpg'
# site/assets/media/foo.jpg
# jpg | svg
title: 'text'
cta.url: 'url'
cta.icon_pack: 'fas | fab | far | fal'
cta.icon: 'text'
cta.label: 'text'
cta_alt.url: 'url'
cta_alt.label: 'text'
cta_note.label: 'text'
design.flip: 'bool'
hero_style:
media_rounded: true
design:
background:
image: 'background_earth.png' # site/assets/media/background_earth.png
image_size: contain
image_position: top
image_opacity: '0.6'
image_parallax: false
css_class: fullscreen # fullscreen background
baseof.html
<html>
{{ partial "site_head" }}
<body>
{{ partial "search" }}
<div class="page-header">
{{ partial "navbar" }}
</div>
<div class="page-body">
{{ block "main" }}{{ end }}
</div>
<div class="page-footer">
<div class="container">
{{ partial "site_footer" }}
</div>
</div>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent