Cài đặt EasyBuilder và Đăng ký EasyWeb account

1. Download EasyBuider, giải nén và chạy file EasyWeb Builder.exe

2. Đă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

1. 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

2. Bấm vào nút Create new site trên phần mềm EasyBuider.

3. Chọn 1 website mẫu trong danh sách website mà EasyWeb cung cấp, ví dụ Pillar

4. 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 Github

• cá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 encode HTML,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}}

• 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ính parent 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ường displayName, fileName tương ứng được tạo ra.

EasyWeb sử dụng cú pháp . khi đặt tên fileName để 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 cho fileName có cấu trúc danh-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 ứng

• perPage: 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ập sortBy á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