| chuẩn bị cày ghost theme

Dựng Ghost lên thành local home blog, đương nhiên chỉ mình anh viết nhảm ở đó, jaoziện rườm rà mặc định của Ghost tuy đẹp nhưng nhiều thông tin thừa, không cần thiết fải hiển thị (ví zụ như author). Anh định dev con khác đơn jản hơn. Xấu cũng được, nhưng chỉ hiển thị vừa đủ thông tin cần thiết thôi.

update lần 1¹

modifying default?

Casper zùng font Georgia là mặc định, thằng này hiển thị tiếng Việt hơi tệ. Mặt khác idol của anh là bộ IBM Plex cơ, nên nom cái jaoziện default cũng không được thuận mắt lắm.

Tạo theme mới tinh không quá khó, nhưng modify dựa trên cấu trúc mặc định vẫn đỡ việc hơn. Nói là modify, nhưng về tổng thể coi như chế biến lại từ đầu. Quy trình dev zùng Gulp² của Casper theme là thứ anh hầu như mù tịt (rắc rối quá), nên chọn jảifap ngu hơn: zùng node-sass³.

Trong jaoziện admin, mục Design, bấm download Casper theme được file casper.zip. Lưu lại đâu đó, đổi tên thành simpleghost.zip rồi upload lại. Trong content/themes sẽ có thêm thư mục simpleghost. Active rồi sửa trong này là được.

package.json

Ghost dùng file này để chứa các thông tin config. Đây cũng chính là file chứa script để chạy khi dev theme. Anh xóa bớt thông tin thừa và sửa lại script trong này

1
2
3

"scripts": {
    "dev": "node-sass -w --source-map true --source-map-contents assets/sass -o assets/built --output-style compact"
},

Lưu ý cấu trúc thư mục assets cũng fải điều chỉnh lại chút cho fù hợp. Anh để lại các file *.js để zùng lại cho theme mới.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

C:\www\ghs\content\themes\simpleghost\assets
├── built
|  ├── infinitescroll.js
|  ├── infinitescroll.js.map
|  ├── jquery.fitvids.js
|  └── jquery.fitvids.js.map
├── js
|  ├── infinitescroll.js
|  └── jquery.fitvids.js
└── sass
   └── screen.scss

directory: 3 file: 7

Lúc làm theme cần chạy ghost (ghost start), sau đó cd vào thư mục theme (cd <path/to>/simpleghost) rồi chạy yarn dev là được. Khi chạy, Node-sass sẽ theo zõi assets/sass để nếu có thay đổi jì thì render ra screen.css trong built.

Zĩnhiên trong cấu trúc trên còn thiếu fonts folder, cái này anh sẽ copy vào sau.

Việc còn lại là sửa template (các file *.hbs) cho phù hợp là ngon.