Playpen là gì?
Playpen là phiên bản gọn nhẹ, không cần đăng nhập của Amorfs Studio, cho phép bạn khám phá và thử nghiệm ngay các tính năng cốt lõi. Hãy xem đây như một môi trường sandbox, nơi bạn có thể thử mọi thứ trước khi cam kết dùng ứng dụng đầy đủ.
Amorfs Studio là một nền tảng giúp bạn biến dữ liệu của mình thành thứ gì đó đẹp mắt. Bạn có thể:
- Cá nhân hóa và sắp xếp thông tin của bạn
- Áp dụng các mẫu bố cục ấn tượng từ thư viện
- Hoặc tạo các thiết kế tùy chỉnh của riêng bạn
Playpen là gì?
Playpen là phiên bản gọn nhẹ, không cần đăng nhập của Amorfs Studio, cho phép bạn khám phá và thử nghiệm ngay các tính năng cốt lõi. Hãy xem đây như một môi trường sandbox, nơi bạn có thể thử mọi thứ trước khi cam kết dùng ứng dụng đầy đủ.
Amorfs Studio là một nền tảng giúp bạn biến dữ liệu của mình thành thứ gì đó đẹp mắt. Bạn có thể:
- Cá nhân hóa và sắp xếp thông tin của bạn
- Áp dụng các mẫu bố cục ấn tượng từ thư viện
- Hoặc tạo các thiết kế tùy chỉnh của riêng bạn
Playpen là gì?
Playpen là phiên bản gọn nhẹ, không cần đăng nhập của Amorfs Studio, cho phép bạn khám phá và thử nghiệm ngay các tính năng cốt lõi. Hãy xem đây như một môi trường sandbox, nơi bạn có thể thử mọi thứ trước khi cam kết dùng ứng dụng đầy đủ.
Amorfs Studio là một nền tảng giúp bạn biến dữ liệu của mình thành thứ gì đó đẹp mắt. Bạn có thể:
- Cá nhân hóa và sắp xếp thông tin của bạn
- Áp dụng các mẫu bố cục ấn tượng từ thư viện
- Hoặc tạo các thiết kế tùy chỉnh của riêng bạn
Bạn có thể làm gì trong Playpen?
Với Playpen, bạn có thể:
- Thử một loạt mẫu có sẵn
- Chỉnh sửa cả nội dung và thiết kế
- Xem trước kết quả ngay lập tức
- Lưu dưới dạng hình ảnh
Khi bạn đã hài lòng với tác phẩm của mình, chỉ cần nhấp vào “Lưu vào Studio” để:
- Tạo tài khoản
- Mở khóa trải nghiệm đầy đủ trong Amorfs Studio
Bạn có thể làm gì trong Playpen?
Với Playpen, bạn có thể:
- Thử một loạt mẫu có sẵn
- Chỉnh sửa cả nội dung và thiết kế
- Xem trước kết quả ngay lập tức
- Lưu dưới dạng hình ảnh
Khi bạn đã hài lòng với tác phẩm của mình, chỉ cần nhấp vào “Lưu vào Studio” để:
- Tạo tài khoản
- Mở khóa trải nghiệm đầy đủ trong Amorfs Studio
Bạn có thể làm gì trong Playpen?
Với Playpen, bạn có thể:
- Thử một loạt mẫu có sẵn
- Chỉnh sửa cả nội dung và thiết kế
- Xem trước kết quả ngay lập tức
- Lưu dưới dạng hình ảnh
Khi bạn đã hài lòng với tác phẩm của mình, chỉ cần nhấp vào “Lưu vào Studio” để:
- Tạo tài khoản
- Mở khóa trải nghiệm đầy đủ trong Amorfs Studio
Bắt đầu với Playpen
1. Hiểu về khung làm việc
Khung làm việc được chia thành hai khu vực chính: Edit và Preview
2. Chọn một mẫu
Nhấp vào menu thả xuống Template để khám phá các tùy chọn có sẵn, chẳng hạn như: Simple Card, Contact Card, Payment Card, Passport,...
Hãy thoải mái thử nghiệm và xem lựa chọn nào phù hợp nhất với trường hợp sử dụng của bạn.
3. Chỉnh sửa mẫu của bạn
Bên trong bảng Edit, có hai tab chính: Data và Design
3.1. Tab Data
- Viết dữ liệu của bạn theo định dạng Amorfs, các quy tắc cơ bản:
· Dùng - để có nghĩa là “có một”
· Dùng [ ] để mô tả chi tiết
· Mỗi phần kết thúc bằng ]
Ví dụ:Contact card [
- name [Jane Cooper]
- role [Sales manager]
- email [jane@work.com]
]
Bạn muốn hiểu sâu hơn về định dạng này?
Đọc thêm: Đọc tài liệu Amorfs đầu tiên của bạn
- Chỉnh sửa trực tiếp trên phần xem trước thẻ
Khi chỉnh sửa một thẻ, bạn sẽ thấy xem trước trực tiếp ở phía bên phải màn hình.
Bạn có thể chỉnh sửa thẻ của mình trực tiếp từ phần xem trước này:
· Nhấp đúp vào bất kỳ văn bản nào trên phần xem trước thẻ
· Chỉnh sửa hoặc xóa văn bản
· Dữ liệu trong trình chỉnh sửa sẽ tự động cập nhật
Đối với các chỉnh sửa nhanh, cách này cho phép bạn điều chỉnh nội dung trực quan mà không cần đụng vào định dạng.
Nếu bạn mắc lỗi, hãy dùng Ctrl + Z (hoặc Cmd + Z) để hoàn tác bất cứ lúc nào.
3.2. Tab Design
Đây là nơi bạn kiểm soát giao diện mẫu của mình bằng HTML và CSS để tạo một đoạn HTML.
Để kết nối thiết kế của bạn với dữ liệu thực, Amorfs sử dụng thứ gọi là placeholder.
Placeholder là gì?
Một placeholder là một dấu mốc trong thiết kế của bạn, cho hệ thống biết rằng: Hãy thay thế phần này bằng dữ liệu thật.
Nó luôn được viết trong dấu ngoặc nhọn kép:
Định dạng chuẩn: {{description}} cho chính phần mô tả. Điều này cần thiết để hỗ trợ đa ngôn ngữ.
{{description[?]} cho bất kỳ mục nào nằm dưới phần mô tả. Hoạt động cho cả văn bản và hình ảnh.
Ví dụ:{{name}}: {{name[?]}} → hiển thị name: Sam, Jack{{avatar[?]}} → hiển thị hình ảnh thực tế
📝 Quy tắc quan trọng (Phải nhớ):
Luôn dùng đúng định dạng:
{{expression...}}
Tránh dùng ngoặc nhọn đơn{expression}Tên trường phải khớp với Data của bạn
Tên bên trong placeholder phải giống chính xác như trong tab DataDùng placeholder hình ảnh đúng cách
- Trong HTML: bên trongsrc
- Trong CSS: bên trongurl(...)Dữ liệu trống sẽ không làm hỏng thiết kế của bạn
Nếu một trường không có dữ liệu, bố cục vẫn sẽ được giữ nguyên.
Tab Data | Tab Design |
|---|---|
profile_card [ - full name [Jane Doe] - avatar [https://example.com/avatar.png] ] | :template[{{#TEMPLATE}} <div class="profile-card"> <img src="{{avatar[?]}}" alt="" /> <div>{{full name[?]}}</div>. </div> {{#TEMPLATE}}] |
Bắt đầu với Playpen
1. Hiểu về khung làm việc
Khung làm việc được chia thành hai khu vực chính: Edit và Preview
2. Chọn một mẫu
Nhấp vào menu thả xuống Template để khám phá các tùy chọn có sẵn, chẳng hạn như: Simple Card, Contact Card, Payment Card, Passport,...
Hãy thoải mái thử nghiệm và xem lựa chọn nào phù hợp nhất với trường hợp sử dụng của bạn.
3. Chỉnh sửa mẫu của bạn
Bên trong bảng Edit, có hai tab chính: Data và Design
3.1. Tab Data
- Viết dữ liệu của bạn theo định dạng Amorfs, các quy tắc cơ bản:
· Dùng - để có nghĩa là “có một”
· Dùng [ ] để mô tả chi tiết
· Mỗi phần kết thúc bằng ]
Ví dụ:Contact card [
- name [Jane Cooper]
- role [Sales manager]
- email [jane@work.com]
]
Bạn muốn hiểu sâu hơn về định dạng này?
Đọc thêm: Đọc tài liệu Amorfs đầu tiên của bạn
- Chỉnh sửa trực tiếp trên phần xem trước thẻ
Khi chỉnh sửa một thẻ, bạn sẽ thấy xem trước trực tiếp ở phía bên phải màn hình.
Bạn có thể chỉnh sửa thẻ của mình trực tiếp từ phần xem trước này:
· Nhấp đúp vào bất kỳ văn bản nào trên phần xem trước thẻ
· Chỉnh sửa hoặc xóa văn bản
· Dữ liệu trong trình chỉnh sửa sẽ tự động cập nhật
Đối với các chỉnh sửa nhanh, cách này cho phép bạn điều chỉnh nội dung trực quan mà không cần đụng vào định dạng.
Nếu bạn mắc lỗi, hãy dùng Ctrl + Z (hoặc Cmd + Z) để hoàn tác bất cứ lúc nào.
3.2. Tab Design
Đây là nơi bạn kiểm soát giao diện mẫu của mình bằng HTML và CSS để tạo một đoạn HTML.
Để kết nối thiết kế của bạn với dữ liệu thực, Amorfs sử dụng thứ gọi là placeholder.
Placeholder là gì?
Một placeholder là một dấu mốc trong thiết kế của bạn, cho hệ thống biết rằng: Hãy thay thế phần này bằng dữ liệu thật.
Nó luôn được viết trong dấu ngoặc nhọn kép:
Định dạng chuẩn: {{description}} cho chính phần mô tả. Điều này cần thiết để hỗ trợ đa ngôn ngữ.
{{description[?]} cho bất kỳ mục nào nằm dưới phần mô tả. Hoạt động cho cả văn bản và hình ảnh.
Ví dụ:{{name}}: {{name[?]}} → hiển thị name: Sam, Jack{{avatar[?]}} → hiển thị hình ảnh thực tế
📝 Quy tắc quan trọng (Phải nhớ):
Luôn dùng đúng định dạng:
{{expression...}}
Tránh dùng ngoặc nhọn đơn{expression}Tên trường phải khớp với Data của bạn
Tên bên trong placeholder phải giống chính xác như trong tab DataDùng placeholder hình ảnh đúng cách
- Trong HTML: bên trongsrc
- Trong CSS: bên trongurl(...)Dữ liệu trống sẽ không làm hỏng thiết kế của bạn
Nếu một trường không có dữ liệu, bố cục vẫn sẽ được giữ nguyên.
Tab Data | Tab Design |
|---|---|
profile_card [ - full name [Jane Doe] - avatar [https://example.com/avatar.png] ] | :template[{{#TEMPLATE}} <div class="profile-card"> <img src="{{avatar[?]}}" alt="" /> <div>{{full name[?]}}</div>. </div> {{#TEMPLATE}}] |
Bắt đầu với Playpen
1. Hiểu về khung làm việc
Khung làm việc được chia thành hai khu vực chính: Edit và Preview
2. Chọn một mẫu
Nhấp vào menu thả xuống Template để khám phá các tùy chọn có sẵn, chẳng hạn như: Simple Card, Contact Card, Payment Card, Passport,...
Hãy thoải mái thử nghiệm và xem lựa chọn nào phù hợp nhất với trường hợp sử dụng của bạn.
3. Chỉnh sửa mẫu của bạn
Bên trong bảng Edit, có hai tab chính: Data và Design
3.1. Tab Data
- Viết dữ liệu của bạn theo định dạng Amorfs, các quy tắc cơ bản:
· Dùng - để có nghĩa là “có một”
· Dùng [ ] để mô tả chi tiết
· Mỗi phần kết thúc bằng ]
Ví dụ:Contact card [
- name [Jane Cooper]
- role [Sales manager]
- email [jane@work.com]
]
Bạn muốn hiểu sâu hơn về định dạng này?
Đọc thêm: Đọc tài liệu Amorfs đầu tiên của bạn
- Chỉnh sửa trực tiếp trên phần xem trước thẻ
Khi chỉnh sửa một thẻ, bạn sẽ thấy xem trước trực tiếp ở phía bên phải màn hình.
Bạn có thể chỉnh sửa thẻ của mình trực tiếp từ phần xem trước này:
· Nhấp đúp vào bất kỳ văn bản nào trên phần xem trước thẻ
· Chỉnh sửa hoặc xóa văn bản
· Dữ liệu trong trình chỉnh sửa sẽ tự động cập nhật
Đối với các chỉnh sửa nhanh, cách này cho phép bạn điều chỉnh nội dung trực quan mà không cần đụng vào định dạng.
Nếu bạn mắc lỗi, hãy dùng Ctrl + Z (hoặc Cmd + Z) để hoàn tác bất cứ lúc nào.
3.2. Tab Design
Đây là nơi bạn kiểm soát giao diện mẫu của mình bằng HTML và CSS để tạo một đoạn HTML.
Để kết nối thiết kế của bạn với dữ liệu thực, Amorfs sử dụng thứ gọi là placeholder.
Placeholder là gì?
Một placeholder là một dấu mốc trong thiết kế của bạn, cho hệ thống biết rằng: Hãy thay thế phần này bằng dữ liệu thật.
Nó luôn được viết trong dấu ngoặc nhọn kép:
Định dạng chuẩn: {{description}} cho chính phần mô tả. Điều này cần thiết để hỗ trợ đa ngôn ngữ.
{{description[?]} cho bất kỳ mục nào nằm dưới phần mô tả. Hoạt động cho cả văn bản và hình ảnh.
Ví dụ:{{name}}: {{name[?]}} → hiển thị name: Sam, Jack{{avatar[?]}} → hiển thị hình ảnh thực tế
📝 Quy tắc quan trọng (Phải nhớ):
Luôn dùng đúng định dạng:
{{expression...}}
Tránh dùng ngoặc nhọn đơn{expression}Tên trường phải khớp với Data của bạn
Tên bên trong placeholder phải giống chính xác như trong tab DataDùng placeholder hình ảnh đúng cách
- Trong HTML: bên trongsrc
- Trong CSS: bên trongurl(...)Dữ liệu trống sẽ không làm hỏng thiết kế của bạn
Nếu một trường không có dữ liệu, bố cục vẫn sẽ được giữ nguyên.
Tab Data | Tab Design |
|---|---|
profile_card [ - full name [Jane Doe] - avatar [https://example.com/avatar.png] ] | :template[{{#TEMPLATE}} <div class="profile-card"> <img src="{{avatar[?]}}" alt="" /> <div>{{full name[?]}}</div>. </div> {{#TEMPLATE}}] |
Khám phá Amorfs Studio
Khi bạn đã quen với việc sử dụng Playpen, bạn có thể chuyển sang Amorfs Studio để có đầy đủ bộ tính năng.
Trong Amorfs Studio, bạn có thể:
- Lưu và quản lý các mẫu của bạn
- Tải lên và lưu trữ hình ảnh
- Tạo Phòng để sắp xếp nội dung
- Chia sẻ từng mẫu riêng lẻ hoặc toàn bộ Phòng
👉 Tìm hiểu thêm về Amorfs Studio
Khám phá Amorfs Studio
Khi bạn đã quen với việc sử dụng Playpen, bạn có thể chuyển sang Amorfs Studio để có đầy đủ bộ tính năng.
Trong Amorfs Studio, bạn có thể:
- Lưu và quản lý các mẫu của bạn
- Tải lên và lưu trữ hình ảnh
- Tạo Phòng để sắp xếp nội dung
- Chia sẻ từng mẫu riêng lẻ hoặc toàn bộ Phòng
👉 Tìm hiểu thêm về Amorfs Studio
Khám phá Amorfs Studio
Khi bạn đã quen với việc sử dụng Playpen, bạn có thể chuyển sang Amorfs Studio để có đầy đủ bộ tính năng.
Trong Amorfs Studio, bạn có thể:
- Lưu và quản lý các mẫu của bạn
- Tải lên và lưu trữ hình ảnh
- Tạo Phòng để sắp xếp nội dung
- Chia sẻ từng mẫu riêng lẻ hoặc toàn bộ Phòng
👉 Tìm hiểu thêm về Amorfs Studio
Tóm tắt
Playpen giúp bạn:
- Bắt đầu ngay lập tức (không cần đăng nhập)
- Thử nghiệm tự do
- Hiểu cách Amorfs hoạt động
Truy cập Playpen.
Khi bạn đã sẵn sàng, hãy chuyển sang Amorfs Studio để mở khóa toàn bộ sức mạnh của nền tảng.
Tóm tắt
Playpen giúp bạn:
- Bắt đầu ngay lập tức (không cần đăng nhập)
- Thử nghiệm tự do
- Hiểu cách Amorfs hoạt động
Truy cập Playpen.
Khi bạn đã sẵn sàng, hãy chuyển sang Amorfs Studio để mở khóa toàn bộ sức mạnh của nền tảng.
Tóm tắt
Playpen giúp bạn:
- Bắt đầu ngay lập tức (không cần đăng nhập)
- Thử nghiệm tự do
- Hiểu cách Amorfs hoạt động
Truy cập Playpen.
Khi bạn đã sẵn sàng, hãy chuyển sang Amorfs Studio để mở khóa toàn bộ sức mạnh của nền tảng.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g d="M 0 48 L 0 0 L 48 0 L 48 48 Z M 48 24 C 48 10.745 37.255 0 24 0 C 10.745 0 0 10.745 0 24 C 0 35.255 7.749 44.7 18.203 47.293 L 18.203 31.334 L 13.254 31.334 L 13.254 24 L 18.203 24 L 18.203 20.84 C 18.203 12.671 21.899 8.885 29.919 8.885 C 31.44 8.885 34.064 9.183 35.137 9.481 L 35.137 16.129 C 34.571 16.069 33.587 16.04 32.364 16.04 C 28.429 16.04 26.909 17.531 26.909 21.406 L 26.909 24 L 34.748 24 L 33.401 31.334 L 26.909 31.334 L 26.909 47.824 C 38.793 46.389 48.001 36.271 48.001 24 Z M 33.4 31.334 L 34.747 24 L 26.908 24 L 26.908 21.406 C 26.908 17.531 28.428 16.04 32.363 16.04 C 33.586 16.04 34.57 16.069 35.136 16.129 L 35.136 9.481 C 34.063 9.182 31.439 8.885 29.918 8.885 C 21.899 8.885 18.202 12.671 18.202 20.84 L 18.202 24 L 13.253 24 L 13.253 31.334 L 18.202 31.334 L 18.202 47.293 C 20.058 47.754 22 48 23.999 48 C 24.983 48 25.954 47.94 26.907 47.824 L 26.907 31.334 L 33.399 31.334 Z" fill="transparent" height="48.00000039337158px" id="WNOEGeyhI" width="48.001px"><path d="M 0 48 L 0 0 L 48 0 L 48 48 Z" fill="transparent" height="48px" id="Lf36xoeO5" width="48px"/><path d="M 48 24 C 48 10.745 37.255 0 24 0 C 10.745 0 0 10.745 0 24 C 0 35.255 7.749 44.7 18.203 47.293 L 18.203 31.334 L 13.254 31.334 L 13.254 24 L 18.203 24 L 18.203 20.84 C 18.203 12.671 21.899 8.885 29.919 8.885 C 31.44 8.885 34.064 9.183 35.137 9.481 L 35.137 16.129 C 34.571 16.069 33.587 16.04 32.364 16.04 C 28.429 16.04 26.909 17.531 26.909 21.406 L 26.909 24 L 34.748 24 L 33.401 31.334 L 26.909 31.334 L 26.909 47.824 C 38.793 46.389 48.001 36.271 48.001 24 Z" fill="rgb(8, 102, 255)" height="47.8243px" id="Fi98aqQOS" width="48.001px"/><path d="M 20.148 22.45 L 21.494 15.115 L 13.655 15.115 L 13.655 12.521 C 13.655 8.646 15.176 7.155 19.111 7.155 C 20.333 7.155 21.317 7.185 21.883 7.244 L 21.883 0.596 C 20.81 0.298 18.186 0 16.666 0 C 8.646 0 4.949 3.786 4.949 11.955 L 4.949 15.115 L 0 15.115 L 0 22.45 L 4.949 22.45 L 4.949 38.409 C 6.805 38.869 8.747 39.115 10.746 39.115 C 11.73 39.115 12.701 39.055 13.654 38.94 L 13.654 22.45 L 20.147 22.45 Z" fill="rgb(255, 255, 255)" height="39.11523px" id="o10gvlFLv" transform="translate(13.253 8.885)" width="21.883200000000002px"/></g></svg>)