Cài đặt EasyBuilder và Đăng ký EasyWeb account
Download EasyBuider, giải nén và chạy file
EasyWeb Builder.exe
Đăng ký tài khoản EasyWeb miễn phí. Tài khoản này dùng để quản lý danh sách website bạn đang sở hữu hoặc được phân quyền truy cập, giúp bạn chia sẻ, quản lý theo nhóm dễ dàng hơn.
Lưu ý
EasyBuider hiện tại hoạt động trên HĐH Windows (Linux or Mac sẽ được hỗ trợ trong thời gian tới.)
Với người dùng Việt Nam, sử dụng link download từ server trong nước Fshare để có được tốc độ cao hơn so với nước ngoài.
Tạo mới website
Khởi động và đăng nhập vào phần mềm EasyBuilder. Sau khi đăng nhập thành công, hiển thị trang quản lý tất cả website của bạn
Bấm vào nút
Create new site
trên phần mềm EasyBuider.Chọn 1 website mẫu trong danh sách website mà EasyWeb cung cấp, ví dụ Pillar
Sau khi download thành công, sẽ vào trang quản lý cho website vừa tạo
- Lúc này website của bạn đã sẵn sàng
Chạy website và chỉnh sửa trên máy cá nhân
Bấm vào
Build
, EasyBuilder sẽ khởi động và chạy website trên máy cá nhân.Website của bạn sẽ hiển thị lên ngay trên EasyBuilder. Nhưng bạn cũng có thể xem nó trên trình duyệt Chrome, FireFox hoặc IE bằng cách bấm vào
On Browser
Trên EasyBuilder, có nhiều chế độ thiết bị để hiển thị Website của bạn, như màn hình Smartphones, tablets, ...
Chạy website và xem ngay trên máy cá nhân là tính năng nổi trội của công cụ EasyBuilder
Điều chỉnh nội dung và kiểm tra thay đổi ngay lập tức
Bạn có thể thay đổi bất kì thông tin hiển thị trên website, từ nội dung tới giao diện hiển thị.
Mọi thay đổi khi được lưu trên EasyBuilder (bấm vào nút Save hoặc Ctrl + S
) sẽ được áp dụng ngay lập tức trên website
Trong hình bên dưới, thử xóa từ themes
trên Content Form của EasyBuilder và xem dòng chữ này biến mất trên website. Tham khảo các phần bên dưới để biết cách thay đổi website theo ý muốn của bạn.
Triển khai website vào thực tế
Website của bạn hiển thị tại máy cá nhân như thế nào, sẽ hiển thị trên thực tế như vậy. Do đó cần kiểm tra kĩ trước khi triển khai. Và sử dụng domain (hoặc sub-domain) cá nhân để truy cập
Bấm
Init
thiết lập thông tin ban đầu cho việc Lưu trữ dữ liệu trên server cũng như triển khai vào thực tếHiện tại chỉ có lựa chọn dùng github để lưu, bạn cần tạo account github.com cũng như tạo ra 1 repository mới hoàn toàn và điền các thông tin tương ứng vào form
Thiết lập domain riêng của bạn, bằng cách bấm vào
Set Domain
nằm trong dropdown nằm kềDeploy
Sau khi Init thành công, chỉ cần bấm
Deploy
để triển khai website lên Githubcác lần sau chỉ cần
Sync
lưu trữ dữ liệu để tiếp tục công việc trên máy khác
Url của Github có dạng folder,
xxx.github.io/repo-name/
, nên website sẽ không hiển thị đúng như Xem trên máy cá nhân. Cần sử dụng domain riêng của bạn để hoàn tất việc triển khai.
Sơ lược về Layout (giao diện) của trang web
Layout
được định nghĩa là tập hợp HTML, CSS
code dùng để hiển thị giao diện của một trang web. Giao diện hiển thị cho người dùng hoàn toàn được quyết định bởi cách lập trình, xây dựng Layout.
EasyWeb cho phép bạn tự do phát triển
Layout
cho website của mình mà không phụ thuộc vào server,PHP, Asp.Net, Java,...
như các nền tảng lập trình web hiện tại.
Dữ liệu định nghĩa trong Content
cũng được dễ dàng hiển thị ra Layout
bằng cách sử dụng thư viện HandleBarJS. Ví dụ cơ bản
- Định nghĩa biến trong Content
"tieu-de" : "Đây là website của bạn"
- Lấy dữ liệu của biến này trong phần Layout
<h1> {{tieu-de}} </h1>
- Trang web sẽ hiển thị
<h1>Đây là website của bạn</h1>
{{...}}
là cú pháp cơ bản nhất của HandlebarJS để hiển thị dữ liệu được định nghĩa trong Content
ra Layout
.
Danh sách các cú pháp thường dùng
Binding dữ liệu cơ bản
{{...}}
lấy dữ liệu cơ bản{{{...}}}
lấy dữ liệu nhưng encodeHTML,CSS
Binding đối tượng
"đối tượng" : { "thuộc-tính-1" : "giá trị" }
- Sử dụng dấu
.
, `{{đối-tượng.thuộc-tính-1}}
- Sử dụng dấu
Binding array:
"đối-tượng" : [
{},
{}
]
- Sử dụng dấu
.[:num]
- Lặp giữa các phần tử, sử dụng
{{#each}} ... {{/each}}
<h2>{{đối-tượng.[0]}}</h2> //cho phần tử đầu tiên
{{#each đối-tượng}}
<li>{{this}}<li>
{{/each}}
Phân loại theo Danh Mục (Category) hay Chủ đề (Tags)
Các nội dung như bài viết, sản phẩm thường phân loại theo Danh Mục (Category) hay Chủ đề (Tags). Như vậy, sẽ có một số bài viết cùng thuộc một danh mục, và danh mục này có thể thuộc một danh mục lớn hơn theo cấu trúc (cây) Danh Mục (Category Tree) của website.
Các nội dung cũng được phân chia theo Chủ Đề (tags). Tuy nhiên hơi khác với Danh Mục, không có cấu trúc cây cho Chủ Đề, các Chủ Đề là độc lập không phục thuộc lẫn nhau. Và một nội dung có thể thuộc nhiều chủ đề khác nhau
Tóm gọn, nếu muốn phân loại nội dung theo cấu trúc, thứ tự cây, hãy sử dụng Danh Mục. Còn muốn gom nhóm theo nhiều Chủ Đề, chúng ta sẽ sử dụng Tags. EasyWeb hỗ trợ song song hai kiểu Category và Tags tùy theo nội dung của từng website
Chi tiết về cách thiết lập Danh Mục và Chủ Đề, tham khảo phần "Category" và "Tags
Tạo Trang Danh Mục
- Các trường thông tin cho phép thay đổi của một Danh Mục (được giải thích trong hướng dẫn phía trước)
{
children: [],
parent: 'parent-category',
href: 'url',
files: [],
category: '',
"sortBy": "date",
"reverse": false,
"metadata": {
"name" : "Configuration"
},
"displayName": "document.configuration",
"perPage": 12,
"noPageOne": true,
"layout": "default.category.html",
"first": ":categoryPath/index.html",
"path": ":categoryPath/page/:num/index.html"
}
Ngoài các thuộc tính được giải thích trong hướng dẫn trước, EasyWeb còn có các thuộc tính mặc định
children: [], // danh sách Danh Mục con (nếu có)
parent: 'parent-category', //Tên của Danh Mục cha
href: 'url', //link truy cập Danh Mục này
files: [], //chứa bài viết chi tiết thuộc danh mục
category: '', //tên của Danh Mục
Với
AllCategory
, thuộc tínhparent
sẽ là null.
1.Dữ liệu của Danh Mục
Tất cả Danh Mục của website được quản lý bởi Danh Mục gốc
AllCategory
, và sử dụng cú pháp HandleBar để truy cập
- Sử dụng
lookupCategory
truy cập 1 Danh Mục. Sau đây là 1 đoạn HTML code của trang Danh Mục
{{#with (lookupCategory AllCategory 'path-of-category') }}
<h1>Danh Muc <a href="#{{href}}">{{metadata.name}}</a> </h1>
{{#each files}}
<li><a href="#{{path}}">{{title}}</a></li>
{{/each}}
{{/with}}
Với đoạn code mẫu trên, chúng ta có thể lấy dữ liệu href
hoặc metadata.name
của Danh Mục. Hoặc Lấy được danh sách bài viết chi tiết thuộc Danh Mục này trong thuộc tính files
- Hoặc truy cập trực tiếp thuộc tính của Danh Mục nếu muốn
{{#each (lookupCategory AllCategory 'path-of-category' 'files') }}
<li><a href="#{{path}}">{{title}}</a></li>
{{/each}}
2. Phân trang trên trang Danh Mục
Phân trang chỉ hiển thị trên
layout
mà trang Danh Mục đang sử dụng. Ví dụ"layout": "default.category.html"
- Trong trang html của Danh Mục, dữ liệu phân trang được truy cập qua thuộc tính
pagination
có cấu trúc
pagination: {
name: name,
category: category,
displayName: pageOptions.displayName,
categoryPath: categoryPath,
index: length,
num: length + 1,
pages: pages,
files: [],
getPages: createPagesUtility(pages, length),
previous: ,
next: ,
first: ,
last: ,
}
Ví dụ code bên dưới
<h1>Danh Mục: {{pagination.category}{{pagination.name}}<h1>
<h3>List Files</h3>
{{#each pagination.files}}
<a href="/{{path}}">{{title}}</a>
{{/each}}
{{#if pagination.previous}}
<a href="/{{pagination.previous.path}}">Previous page</a>
{{/if}}
{{#if pagination.next}}
<a href="/{{pagination.next.path}}">Next page</a>
{{/if}}
Trong ví dụ trên
pagination.files
chứa danh sách bài viết chi tiết của trang hiện tại sẽ hiển thị trên Trang Danh Mục.pagination.next.path
là đường dẫn tới trong tiếp theo (nếu có) trong Trang Danh Mục này.
Tổng quan về Category (Danh mục) và Tags (tạm gọi là chủ đề)
Category (Danh Mục) là phần không thể thiếu để phân loại nội dung. Ngoài các trang đơn, website thường có nhiều trang có cấu trúc dữ liệu và giao diện giống nhau và được gom chung thuộc vào một Danh Mục cụ thể.
Danh Mục của Website có thể lồng nhau, Danh Mục con nằm trong Danh Mục lớn hơn, chia thành nhiều cấp theo cấp trúc Cây (Category Tree).Những website Ecommerce là ví dụ rõ ràng nhất cho cấu trúc nhiều cấp Cây Danh Mục.
Khác với việc mỗi trang chỉ thuộc một Danh Mục duy nhất, nhiều Tags (Chủ Đề) có thể thiết lập cho 1 trang. Chủ đề sẽ giúp cho việc truy cập vào các trang liên quan nhanh chóng chỉ với 1 lần truy cập, thay vì phải đi nhiều cấp như Danh Mục
Category và Tags của EasyWeb được xây dựng dựa trên các tính năng Category và Tags của các framewok nổi tiếng như Wordpress, và đủ sức đáp ứng nhiều yêu cầu cấu trúc khác nhau của website
- EasyWeb sử dụng 2 biến mặc định
AllCategory, AllTags
để quản lý chứa tất cả các Danh Mục và Chủ Đề trong website.
Tạo mới Danh Mục
- Bấm vào
Category
để tạo mới Danh Mục. Điền tên của Danh Mục vào trườngdisplayName
,fileName
tương ứng được tạo ra.
EasyWeb sử dụng cú pháp
.
khi đặt tênfileName
để tạo mối quan hệ giữa hai Danh Mục. Nếu muốn tạo Danh Mục con, hãy đặt tên sao chofileName
có cấu trúcdanh-muc.danh-muc-con.json
. Để làm được điều này,displayName
nhập vào có thể chưa hợp lý, nhưng chúng ta có thể điều chỉnh sau.
- Danh Mục vừa tạo mới sẽ hiển thị trong tab
Meta
, chứa tất cả danh mục của website
Thiết lập Trang Danh Mục
Ngoài việc gom nhóm bài chi tiết, Danh Mục có thể được hiển thị trên website dưới 1 trang Danh Mục, là trang tổng hợp danh sách bài chi tiết thuộc danh mục đó. Trang này cho phép phân trang nếu số lượng bài chi tiết quá nhiều.Và có thể chứa dữ liệu riêng cho chính Danh Mục đó, như banner, hình ảnh, ...
- Dữ liệu của Danh Mục gồm các trường thông tin
{
"sortBy": "date",
"reverse": false,
"metadata": {
"name" : "Configuration"
},
"displayName": "document.configuration",
"perPage": 12,
"noPageOne": true,
"layout": "default.category.html",
"first": ":categoryPath/index.html",
"path": ":categoryPath/page/:num/index.html"
}
Cấu hình giao diện trang Danh Mục
layout
dùng để thiết lập giao diện mà trang Danh Mục sẽ áp dụng, mặc định làdefault.category.html
.first
,path
dùng thiết lập đường dẫn tới Trang Danh Mục này, cũng như cơ chế phân trang tương ứngperPage
: số lượng bài chi tiết trong 1 page của Trang Danh Mục. Các bài viết này được sắp xếp bởi thiết lậpsortBy
áp dụng cho thuộc tính của bài viết chi tiết.
Dữ liệu của trang Danh Mục
Dữ liệu dành riêng cho trang Danh Mục được thiết lập trong
metadata
theo cấu trúc json. Bạn tùy ý bổ sung các dữ liệu này
- Ví dụ: Nếu muốn Tên hiển thị Danh Mục khác với
displayName
, có thể tạo ra 1 trường thông tin mới với dữ liệu mong muốn như bên dưới
"metadata":
{
"name" : "Configuration"
},
Chi tiết cách sử dụng các thuộc tính này để tạo trang Danh Mục, xem hướng dẫn tiếp theo
Sử dụng Danh Mục
Danh mục là phần quan trọng để phân loại nội dung website