Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Xây dựng một CMS: Cấu trúc và Giao diện

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building a CMS.
Building a CMS: goPress

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Có một xu hướng về máy chủ web theo hướng "thiết kế CMS phẳng". Điều này đơn giản là chỉ đến một Hệ thống Quản lý Nội dung (CMS) mà không lưu trữ thông tin của nó trong cơ sở dữ liệu. Thay vào đó, tất cả thông tin được lưu trữ trong các tập tin văn bản thuần túy. Vì nhiều máy chủ riêng ảo (VPS) ngày nay đang sử dụng ổ đĩa cứng dựa trên RAM, cách tiếp cận này thì nhanh hơn và an toàn hơn một chút.

Trong loạt bài này, tôi sẽ hướng dẫn cho bạn cách tạo một CMS có hệ thống tập tin phẳng (Flat File System) sử dụng một số công nghệ web tiêu chuẩn. Những hệ thống này không đầy đủ tính năng như những hệ thống khác, nhưng có những tính năng cơ bản cùng với thời gian đáp ứng tốt.

Với tất cả các thông tin trên ổ đĩa cứng, việc tổ chức tập tin trở thành một vấn đề lớn. Với suy nghĩ đó, thông tin trang web sẽ nằm trong một thư mục khác so với thông tin về giao diện và bố cục. Đồng thời, mỗi loại trang có thư mục riêng của nó bên trong thư mục site với một thư mục parts cho các bộ phận nhỏ của CMS. Điều này giữ cho mọi thứ nằm trong vị trí riêng của nó và tạo ra một hệ thống linh hoạt.

Cấu trúc Thư mục Chính

Trong thư mục mà trong đó bạn sẽ xây dựng dự án, hãy tạo các thư mục sau đây: src, site, và themes. Thư mục src sẽ chứa code của máy chủ, thư mục site là dành cho tất cả thông tin của trang web, và thư mục themes cho bố cục và thông tin về theme.

Trong thư mục themes, bạn cần tạo một thư mục layouts và một styling. Thư mục layouts sẽ chứa các bố cục trang web khác nhau. Bằng cách tách biệt thông tin bố cục khỏi thông tin về giao diện, các theme trở nên linh hoạt hơn nhiều. Hiện tại, sẽ có một bố cục được gọi là SingleCol.

Để tạo ra toàn bộ giao diện và bố cục, tôi sử dụng Sass, CompassSusy. Sass là một ngôn ngữ xử lý Stylesheet tùy biến. Nó đưa ra một cách làm thiết thực hơn để tạo các stylesheet CSS cho trang web của bạn. Compass là một extension (phần mở rộng) cho Sass. Sassy-buttons là một extension của Sass để tạo ra các nút bấm đẹp mắt trên trang web. Susy cũng là một extension để tạo ra một hệ thống Grid cho trang web của bạn.

Vì Ruby được cài đặt sẵn trên tất cả các máy Mac, nên bạn sẽ không cần cài đặt nó. Để cài đặt Ruby trên một hệ thống Windows, bạn sẽ cần phải tải về Windows Installer của Ruby. Trên Linux, bạn cần sử dụng trình quản lý gói (Package Manager) của hệ thống để cài đặt Ruby.

Một khi Ruby đã ở trong hệ thống của bạn, bạn có thể cài đặt Sass, Compass, Sassy-buttons và Susy bằng các lệnh sau:

Đối với hướng dẫn này, tôi đang sử dụng Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 và Susy 2.2.5. Tùy thuộc vào cấu hình hệ thống của bạn, bạn có thể phải chạy các lệnh này với sudo đằng trước chúng.

Bố cục

Để bắt đầu tạo các bố cục, hãy chạy các lệnh này trong thư mục SingleCol:

Điều này sẽ tạo ra thư mục sassstylesheets, và một tập tin có tên là config.rb. Vì tôi thích sử dụng css cho thư mục stylesheet, nên hãy đổi tên thư mục stylesheets thành css. Ngoài ra, hãy tạo một thư mục js cho bất kỳ các tập tin JavaScript cần thiết nào cho bố cục. Mở tập tin config.rb và làm cho nó trông giống như cái này:

Bây giờ, để tạo bố cục cơ bản của trang web, hãy tạo một tập tin trong thư mục layout đặt tên là template.html. Bên trong tập tin này, hãy thêm code sau:

Template này tạo ra một trang tiêu chuẩn cho trang web. Mỗi trang có một header với thanh điều hướng, một sidebar, một khu vực nội dung, và một khu vực footer. Thứ cuối cùng được nạp là các javascript cần thiết cho trang web.

Mỗi phần được đại diện bằng một macro Handlebar. Máy chủ khai triển các macro trước khi đưa nó đến với người dùng.

Trong thư mục sass, hãy tạo một tập tin có tên là base.scss và đặt code này vào:

Code sass này nạp trong các phong cách reset của compass để vô hiệu hoá các phong cách mặc định của trình duyệt. Sau đó, nó nạp và thiết lập susy để tạo ra bố cục grid thích hợp cho tất cả các phần tử của trang web.

css cho hệ thống điều hướng là ở phía sau các định nghĩa trang. Các menu thả xuống ẩn sẽ hiện ra khi di chuyển chuột lên trên. Điều này tạo ra một hệ thống menu chỉ bằng css.

Tất cả những phong cách này giúp định nghĩa cấu trúc cơ bản của trang web. Không có phong cách nào tạo ra giao diện cho trang web, chỉ xác định vị trí của nó. Tất cả các phong cách trang trí được xử lý bởi nội dung trong thư mục styling.

Giao diện

Trong thư mục styling, hãy tạo một thư mục có tên là Basic. Khởi tạo thông tin sass như đã làm đối với thư mục layouts/SingleCol. Trong thư mục này, hãy chạy lệnh sau:

Việc này sẽ tạo ra thư mục sassstylesheets, và một tập tin có tên là config.rb. Vì tôi thích sử dụng css cho thư mục stylesheet, nên hãy đổi tên thư mục stylesheets thành css. Đồng thời, tạo một thư mục js cho bất kỳ JavaScript nào để tạo theme. Mở tập tin config.rb và làm cho nó giống như cái sau đây:

Để trang trí các nút bấm ở trên trang web, tôi thích sử dụng sassy-buttons. Do đó, nó là yêu cầu trước tiên, và sau đó là cấu trúc thư mục.

Trong thư mục Basic/sass, tạo tập tin Basic.scss với thông tin sau:

Code này định nghĩa cách trang web sẽ hiển thị. Nó định nghĩa nền, màu sắc, phông chữ, vân vân... để tạo nên giao diện cho một trang web điển hình.

Thư mục styling/Basic chứa các tập tin cần thiết cho giao diện mặc định của trang 404, header, footer và sidebar của trang web. Do đó, hãy tạo tập tin 404.html và thêm code này vào:

Đây là trang lỗi 404 cơ bản. Bạn phải cẩn thận với thông tin được đưa ra ở đây, vì bạn không muốn tiết lộ quá nhiều thông tin về cách trang web của bạn hoạt động. Vì điều này sẽ được đặt trong khu vực nội dung của trang, nên nó sẽ dễ dàng để cho người dùng điều hướng khỏi nó.

Tiếp theo, tạo tập tin header.html với nội dung này:

Đây chỉ là một header sườn mà không có mô tả, nhưng nó cho CMS một cái gì đó để hiển thị.

Tiếp theo, hãy tạo tập tin footer.html có nội dung sau:

Tiếp theo, tạo tập tin sidebar.html có nội dung sau:

Một lần nữa, đây là những phần giữ chỗ. Tất cả các tập tin này được sao chép vào thư mục site/parts và thay đổi theo nhu cầu của trang web. Những cái này là ở đây để cho máy chủ có thứ gì đó cùng với tên của chúng để sử dụng trên máy chủ trong trường hợp người dùng quên để tạo ra chúng.

Cấu trúc của Trang web

Với theme và bố cục đã được định nghĩa, đã đến lúc tạo ra nội dung và cấu trúc cơ bản cho trang web thật sự. Trong thư mục site, tạo các thư mục parts, pages, posts, images, css, js.

Parts

Thư mục parts sẽ chứa các đoạn code nhỏ của html/css/javascript sẽ tạo ra một đơn vị duy nhất được đặt ở nhiều vị trí của trang web. Các bộ phận này được tải lên máy chủ và kết hợp với nội dung của trang khi cần. Đối với trang demo của chúng ta, hãy tạo ra các bộ phận sau:

  • footer.html với code sau:
  • head.html với code sau:
  • header.html với code sau:
  • navbar.html với code sau:
  • sidebar.html với code sau:
  • socialmedia.html với code sau:

Máy chủ nạp các bộ phận này bằng tên mà không cần phần mở rộng trong template Handlebar để khai triển. Ví dụ, bất cứ chỗ nào mà bộ phận socialmedia.html cần phải được đặt, thì bạn đặt macro {{socialmedia}}} ở đó. Đồng thời, những bộ phận này có thể là HTML, Markdown hoặc bất kỳ định dạng nào khác mà máy chủ có thể xử lý. Trong các máy chủ mà tôi sẽ tạo ra, các loại tập tin được hỗ trợ là HTML, Jade/Amber, và Markdown. Tôi sẽ đi vào những chi tiết này trong hướng dẫn tạo máy chủ thật sự.

Pages

Tất cả các trang cho trang web sẽ được đặt trong thư mục pages. Còn bây giờ, hãy tạo các tập tin sau cùng với nội dung của chúng:

  • main.html với code sau:
  • flatcms.md với code sau:
  • about.md với code sau:

Đây là các trang demo cho trang web. Tập tin bắt buộc duy nhất là main.html vì máy chủ sẽ nạp nội dung trang này vào bộ nhớ và phục vụ từ bộ nhớ. Những điều đó giúp tăng tốc độ tải front-page của trang web. Hai trang khác có phần mở rộng md vì chúng ở trong định dạng Markdown. Máy chủ sẽ dịch nội dung sang HTML trước khi nhúng vào bố cục của trang web.

Nhìn chung, các trang chứa thông tin không thay đổi nhiều theo thời gian. Chúng cung cấp cho người xem thông tin về trang web, mục đích và mục tiêu của nó.

Các trang có thể phân cấp một cách tự nhiên bằng cách tạo thư mục và các thư mục con cùng với các trang. Những cái tên thư mục này tạo ra các địa chỉ đến thư mục của các trang này.

Posts

Không giống pages, posts chứa các phần tử được cập nhật thường xuyên, ví dụ như, các bài viết và các tin tức hàng ngày/hàng tuần/hàng tháng. Khu vực này được dự kiến ​​sẽ thay đổi thường xuyên. Trong thư mục posts, hãy tạo ra hai thư mục mới: blogsnews. Trong mỗi thư mục này, hãy tạo một thư mục flatcms. Những thư mục này sẽ chứa các bài viết và các tin tức cho trang web Flat CMS.

Trong thư mục posts/blogs/flatcms, hãy tạo các tập tin sau:

  • index.amber với những nội dung sau:
  • flatcms.md với những nội dung sau:

index.amber là một template Jade để định nghĩa các bài viết khác nhau trong blog. Hệ thống template HTML Jade giúp dễ dàng thêm nội dung mới với một định dạng chuẩn xác. Các tham số cho macro tạo nên các phần tử khác nhau. Bạn có thể tìm hiểu thêm về Jade trên Tuts+.

Ở đây, phần mở rộng được sử dụng là amberngôn ngữ Go tương ứng của JadeAmber. Vì đó là nơi tôi bắt đầu, nên đó là cách tôi đã thực hiện nó. Nếu bạn muốn thay đổi phần mở rộng, đồng thời hãy nhớ thay đổi nó trong code cho máy chủ thích hợp.

Trong thư mục posts/news/flatcms, hãy tạo các tập tin sau:

  • index.amber với những nội dung sau:
  • flatcms.md với những nội dung sau:

Điều này tạo ra các mục tin tức cho trang demo. Trong trang web của tôi, tôi sử dụng cấu trúc tương tự cho các bài hướng dẫn và viết code các trang demo.

Images

Tất cả các trang web đều có hình ảnh. Trong thiết lập này, tất cả các hình ảnh nằm trong thư mục site/images. Đối với trang demo này, chỉ có các hình biểu tượng mạng xã hội sẽ được đặt ở đây. Bạn có thể lấy hình ảnh từ tập tin tải về.

CSS cho Trang web

Ngay cả với css cho bố cụccss để trang trí, thì sẽ có những lúc bạn sẽ muốn có các quy tắc css đặc biệt. Thư mục site/css chứa tất cả các tập tin css mang những hoàn thiện đó vào trang web. Tất cả các tập tin trong layout, styling, và site/css sẽ được biên dịch cùng với nhau thành một tập tin css. Vì vậy, hãy tạo thư mục site/css/final để chứa tập tin đã biên dịch này. Bây giờ, tạo tập tin site/css/site.css với những nội dung sau:

Không quá nhiều điều ở đây—chỉ là một định nghĩa cho một lớp clear. Bạn có thể thêm những gì bạn muốn, nhưng nó phải là thứ gì đó không rơi vào danh mục bố cục hoặc kiểu dáng.

Script cho Trang web

Thư mục site/js chứa tất cả các tập tin JavaScript đặc biệt cho trang web. Những tập tin này sẽ được biên dịch lại và giảm tối đa dung lượng để tải trang web nhanh hơn. Còn bây giờ, hãy tạo thư mục site/js/final cho script đã được biên dịch và tập tin site/js/01-site.js với các nội dung sau:

Không có quá nhiều thứ ở đây ngay lúc này. Tuy nhiên, khi trang web của bạn cần JavaScript tùy biến, bạn có thể đặt nó ở đây.

Vì script sẽ được biên dịch lại với nhau, nên tôi đánh số chúng theo thứ tự cần nạp. Phương thức biên dịch các script lại với nhau sẽ nạp chúng theo thứ tự số.

Tự động hoá Với Gulp

Cách đơn giản nhất để tăng tốc độ tải trang là càng có ít yêu cầu HTTP nhất càng tốt. Do đó, tốt nhất là kết hợp tất cả các tập tin CSS và JavaScript thành một tập tin. Cách tốt nhất để biên dịch các tập tin này là với một build script. Thực hiện nó mỗi khi máy chủ nhận nhận được một yêu cầu là một sự lãng phí thời gian xử lý.

Lựa chọn script tự động chạy của tôi là Gulp. Gulp chạy trên Node.js. Do đó, hãy truy cập trang web Node.js và tải về chương trình cho hệ thống của bạn. Một khi bạn đã cài đặt Node.js, bạn có thể cài đặt Gulp với những lệnh sau:

Việc này sẽ cài đặt Gulp và tất cả các mô-đun của Gulp mà tôi sử dụng trong build script. Bây giờ, ở đầu thư mục của bạn, tạo tập tin gulpfile.js với những nội dung sau:

Việc này sẽ biên dịch tất cả các CSS và JavaScript thành một tập tin duy nhất: tập tin site/css/final/final.css cho CSS, và tập tin site/js/final/final.js cho JavaScript. Nó cũng sẽ thêm các quy tắc tiền tố trình duyệt (browser prefix) cho CSS. Chỉ cần chạy lệnh sau trong thư mục cao nhất:

Gulp sẽ biên dịch tất cả các tập tin của chúng ta và để chúng ở đúng vị trí. Mỗi tác vụ được định nghĩa trong tập tin gulpfile.js có thể được chạy một cách riêng lẻ bằng cách đặt tên tác vụ phía sau lệnh gulp. Bạn có thể tìm hiểu thêm về Gulp trên Tuts+.

Tập tin Cấu hình Máy chủ

Tất cả các máy chủ đều cần thông tin cấu hình. Do đó, trong thư mục gốc, hãy tạo tập tin server.json với thông tin sau:

Tập tin json này mô tả thông tin về bố cục, giao diện để sử dụng, địa chỉ và cổng máy chủ sẽ lắng nghe, tên chính cho trang web với một tiêu đề phụ, một cờ Cache để bật và tắt bộ nhớ đệm cho các mục đích gỡ lỗi , và vị trí của các thư mục khác nhau được sử dụng cho trang web. Bằng cách cung cấp các thông tin này cho máy chủ trong tập tin json, máy chủ có thể linh hoạt, với ít thông tin được ghi trực tiếp.

Tải Trang web lên Máy chủ

Hầu hết mọi người đều sử dụng một FTP client để sao chép các tập tin lên máy chủ của họ. Điều này rất dễ thực hiện, nhưng khác nhau rất nhiều tuỳ theo hệ thống và các chương trình được sử dụng. Nhưng có một số lựa chọn khác.

Bạn có thể thiết lập một daemon trên Dropbox để nạp trang web từ tài khoản Dropbox của bạn. Trang Dropbox Wiki có các hướng dẫn chi tiết để thiết lập điều này. Vấn đề duy nhất là các tập tin được tự động tải lên máy chủ khi bạn thực hiện bất kỳ thay đổi nào. Đôi khi, bạn sẽ muốn thực hiện thay đổi mà không cần chúng phải chuyển lên máy chủ. Nếu đúng như vậy, bạn cũng có một vị trí không phải là Dropbox chứa tất cả các tập tin của trang web và một vị trí của Dropbox. Khi hoàn tất, tạo một tác vụ trong tập tin Gulp của bạn để sao chép các tập tin trang web mới đến vị trí của Dropbox.

Dropzone 3 Setup for CMS Uploading
Thiết lập Dropzone 3 để Tải lên CMS

Cách làm ưa thích của tôi là sử dụng Dropzone 3. Bạn có thể lập trình Dropzone 3 với Ruby hoặc Python để thực hiện bất kỳ loại hành động nào trên một tập tin được thả vào nó. Nó còn có sẵn nhiều chức năng. Có một tập tin hành động được xây dựng để tải lên một trang FTP/SFTP. Tôi tạo ra một mục tiêu Dropzone 3 cho mỗi thư mục chính trên trang web của tôi. Sau đó, khi tôi muốn thay đổi hoặc thêm một tập tin, tôi chỉ cần kéo nó vào mục tiêu dropzone của thư mục tương ứng. Bạn có thể tìm hiểu thêm về Dropzone 3 với bài viết của tôi Viết Các Hành động trong Dropzone 3.

Tóm tắt

Những tập tin cơ bản này sẽ tạo ra một trang web có giao diện như sau:

Demo Site in Browser
Trang Demo trên Trình duyệt

Đây chỉ mới là sự khởi đầu! Bây giờ, với cấu trúc trang web đã hình thành, đã đến lúc bắt đầu xây dựng các máy chủ web. Hãy tham gia cùng tôi trong hướng dẫn tiếp theo, nơi tôi sẽ xây dựng một máy chủ web dựa trên ngôn ngữ Go cho trang web demo này.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.