147 lines
4.9 KiB
Markdown
147 lines
4.9 KiB
Markdown
# Writech Web-Doc
|
|
|
|
Static website for 深圳自然写科技 (Shenzhen Writech Technology Co., Ltd.) — built with Eleventy (11ty) and supporting multiple languages.
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 18+
|
|
- npm
|
|
|
|
## Setup
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Build
|
|
|
|
### Single locale
|
|
|
|
```bash
|
|
# Chinese
|
|
ELEVENTY_LOCALE=zh npx @11ty/eleventy
|
|
|
|
# English
|
|
ELEVENTY_LOCALE=en npx @11ty/eleventy
|
|
```
|
|
|
|
Output goes to `_site/`. Deploy the contents of `_site/` to your server.
|
|
|
|
### Using npm scripts (recommended)
|
|
|
|
```bash
|
|
npm run build:zh # build Chinese → _site/
|
|
npm run build:en # build English → _site/
|
|
|
|
npm run dev:zh # Chinese dev server with hot reload
|
|
npm run dev:en # English dev server with hot reload
|
|
```
|
|
|
|
you may edit package.json to add more dev/build commands
|
|
|
|
### Separate output directories
|
|
|
|
```bash
|
|
ELEVENTY_LOCALE=zh npx @11ty/eleventy --output=dist-zh
|
|
ELEVENTY_LOCALE=en npx @11ty/eleventy --output=dist-en
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── _data/
|
|
│ ├── locales.js ← list of available languages
|
|
│ ├── locale.js ← reads ELEVENTY_LOCALE env (default: "zh")
|
|
│ ├── site.js ← merges site.zh.json + site.en.json
|
|
│ ├── site.zh.json ← nav, hero, about, footer, brand rules, news summary
|
|
│ ├── site.en.json
|
|
│ ├── products.js ← merges products.zh.json + products.en.json
|
|
│ ├── products.zh.json ← 8 hardware products (array)
|
|
│ ├── products.en.json
|
|
│ ├── news.js ← merges news.zh.json + news.en.json
|
|
│ ├── news.zh.json ← 23 policy items in 3 categories
|
|
│ └── news.en.json
|
|
├── _includes/
|
|
│ ├── layouts/base.njk ← master layout (<head>, CSS, JS)
|
|
│ ├── nav.njk ← homepage navigation bar
|
|
│ ├── nav-news.njk ← news page navigation bar
|
|
│ ├── footer.njk ← footer with contact info
|
|
│ ├── product-card.njk ← single product detail card
|
|
│ └── news-card.njk ← single policy news card
|
|
├── css/style.css ← all site styles (extracted from original inline CSS)
|
|
├── js/main.js ← mobile menu, scroll animations, back-to-top
|
|
├── index.njk → /index.html
|
|
├── product.njk → /product/index.html
|
|
├── news.njk → /news/index.html
|
|
├── img/ ← passthrough to _site/img/
|
|
├── product/img/ ← passthrough to _site/product/img/
|
|
└── News/img/ ← passthrough to _site/News/img/
|
|
```
|
|
|
|
## How Templates Reference Data
|
|
|
|
Every page template gets a `locale` variable (set by `_data/locale.js` from the environment). Data files export `{ zh: ..., en: ... }`, so templates look up content dynamically:
|
|
|
|
```njk
|
|
<h1>{{ site[locale].hero.h1 }}</h1>
|
|
<p>{{ site[locale].hero.p | safe }}</p>
|
|
|
|
{% for product in products[locale] %}
|
|
{% include "product-card.njk" %}
|
|
{% endfor %}
|
|
```
|
|
|
|
Use `| safe` filter when the data contains HTML tags (e.g. `<br>`, `<strong>`).
|
|
|
|
## Adding a New Language
|
|
|
|
To add Japanese as a third language:
|
|
|
|
### 1. Add the locale code
|
|
|
|
```js
|
|
// src/_data/locales.js
|
|
module.exports = ["zh", "en", "ja"];
|
|
```
|
|
|
|
### 2. Create data files
|
|
|
|
```
|
|
src/_data/
|
|
├── site.ja.json ← translate from site.zh.json or site.en.json
|
|
├── products.ja.json ← translate all 8 products
|
|
└── news.ja.json ← translate 23 policy items (or set to empty categories)
|
|
```
|
|
|
|
### 3. Build
|
|
|
|
```bash
|
|
ELEVENTY_LOCALE=ja npx @11ty/eleventy --output=dist-ja
|
|
```
|
|
|
|
Deploy `dist-ja/` to your Japanese domain.
|
|
|
|
### Data file structure reference
|
|
|
|
**site.XX.json** — site metadata, navigation labels, hero text, download items, about section, footer content, brand rules, design rules, news hero/summary/trend text.
|
|
|
|
**products.XX.json** — array of 8 products, each with: `id`, `seq`, `name`, `enName`, `tableName`, `tableImage`, `tableEtymology`, `tableTag`, `intro`, `positioning`, `features[]`, `specs[]`, `images[]`, `installNote`, `hasSceneSection`.
|
|
|
|
**news.XX.json** — object with `categories[]`, each category having `title`, `tag`, `items[]`. Each item has: `seq`, `title`, `date`, `source`, `summary`, `url`, `poster`.
|
|
|
|
## Image Paths
|
|
|
|
All image paths in data files are absolute (start with `/`), e.g. `/product/img/Bink01.png`. This ensures images work correctly from any page regardless of URL depth.
|
|
|
|
## Existing Files
|
|
|
|
The original static files (`index.html`, `product/product.html`, `News/news.html`, `index.md`, `News/News-1.md`, `product/硬件商标.md`) are kept as reference and are not used by the Eleventy build. They can be removed once the new build is verified.
|
|
|
|
## Deployment
|
|
|
|
1. Build the desired locale: `npm run build:zh`
|
|
2. Copy `_site/` contents to your web server root
|
|
3. Repeat for other locales targeting different domains
|
|
|