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

npm install

Build

Single locale

# 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)

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

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:

<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

// 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

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