menu

Trang web này được tạo ra như thế nào?

Đăng lúc 20/07/2017, trong chuyên mục Không phân loại

Bài viết sẽ chia sẻ với bạn cách thức để tạo một trang web có giao diện và hoạt động giống trang web mà bạn đang xem.

Nguồn sử dụng

Host

Tôi tạo trang dựa trên host miễn phí của Github Pages. Trang này dành riêng cho việc tạo trang web cá nhân và các trang dự án. Nếu bạn biết về Git thì sẽ không lạ gì Github. Thường bạn sẽ tạo một trang dạng https://tencuaban.github.io với tencuaban cũng chính là account Github của bạn và tencuaban.github.io chính là một repository.

Nhược điểm là repository bạn tạo sẽ public và mọi người ai cũng có thể biết source code trang web của bạn. Một gợi ý nhỏ là bạn có thể tạo trang web kiểu trang web dự án bằng cách tạo một repository private và commit trang web lên nhánh gh-pages.

Giao diện

Giao diện tôi dùng là MatJek đã có chỉnh sửa nhiều. Bạn có thể download các giao diện miễn phí khác tại đây.

Editor

Tôi dùng Sublime Text để chỉnh sửa các file html, javascript, css cũng như các file code khác liên quan. Riêng phần soạn thảo bài viết, tôi dùng trình soạn thảo markdown là Abricotine. Cả hai phần mềm này đều miễn phí.

Nếu bạn muốn chỉnh sửa hoặc tạo logo/avatar, bạn có thể dùng trình vẽ vector miễn phí Gravit.

Chỉnh sửa giao diện gốc

Một số lưu ý

Theme MatJek được viết dựa trên bộ mã nguồn của Materialize. Do đó mọi thủ thuật trên Materialize đều có tác dụng trên MatJek.

Bạn nên tạo một file \assets\css\tuy-chinh.css và thêm các tùy chỉnh của riêng bạn trong này. Một số thay đổi gốc do không thể tùy chỉnh trên các file gốc (vì lấy nguồn từ Materialize), bạn có thể “ghi đè” lên hoặc dùng !important để ép cho giao diện theo ý muốn (kinh nghiệm của tôi).

Có hai sự lựa chọn cho bạn khi muốn thêm tuy-chinh.css vào trang web.

  • Tích hợp nó vào trong thẻ <head>
  • Tích hợp nó vào trong YAML font matter của các layout, ví dụ css: ["tuy-chinh.css"]

Chỉnh sửa thông tin trong file _config.yml

Bạn cần chỉnh sửa một số thông tin trong file cài đặt này để trang web là của bạn

  • title : tên trang web của bạn
  • description : mô tả trang web
  • url: địa chỉ trang web của bạn
  • paginate: số post cho mỗi trang để phân trang.
  • user : tên của bạn
  • user_email : địa chỉ email của bạn
  • contact_url : trang cá nhân của bạn
  • google_tracking_id : thêm id của Google Analysis để nó theo dõi lượng truy cập trang web của bạn. Nếu chưa có, bạn có thể tạo ở trang này.
  • disqus_shortname : shortname Disqus để thêm phần comment cho trang web của bạn. Nếu chưa có tài khoản cũng như chưa tạo trang comment cho trang web, bạn có thể vào đây.

Chia cột các cards

Theo mặc định thì theme MatJek không có chia cột ở ngoài trang chủ. Nếu bạn muốn chia cột cho các cards hay bất cứ gì một cách tự động, bạn có thể đặt các cards ấy ở trong một thẻ <div> với class có nội dung sau

.chia-cot{
    -webkit-columns: 350px 2; /* Chrome, Safari, Opera */
    -moz-columns: 350px 2; /* Firefox */
    columns: 350px 2;
}

Trong đó 2 là số cột và 350px là chiều rộng tối thiểu của mỗi cột, nhỏ hơn số này thì nó sẽ tự động về một cột. Xem thêm về chia cột tại w3school.

Thay đổi icon

Icons được sử dụng bởi font Material-Icons của Google. Bạn có thể tham khảo cách sử dụng cũng như danh sách các icons có sẵn tại đây.

Một gợi ý nhỏ cho bạn, thay vì dùng font Material-Icons của Google, bạn có thể dùng font Awesome thay thế. Font Awesome đa dạng hơn tuy nhiên bạn phải cài đặt nó lên trang web của bạn (không khó) sau đó mới dùng được.

Thay đổi avatar, favicon và banner ẩn

Bạn thay các file user.jpgfavicon.ico trong thư mục \assets\res\ tương ứng là avatar và favicon trang web của bạn. Nếu bạn tạo một file khác với phần mở rộng khác hoặc tên khác, bạn cần mở file \_include\header.html lên và chỉnh sửa tương ứng.

Nói thêm, nếu bạn muốn chèn một banner ẩn cho trang web thì bạn có thể thêm dòng code sau vào trong thẻ <head> ở file _includes\header.html

<meta property="og:image" content="/assets/res/banner.png" />

Trong đó, bạn cần tạo/tìm một file hình tên banner.png với kích thước tầm $1000 \times 500$ pixels và đặt trong thư mục \assets\res\.

Banner ẩn sẽ có tác dụng khi bạn chia sẻ đường link trang web lên facebook, khi ấy thumbnail hình ảnh cho bài viết chính là banner.png.

Thay đổi projects thành categories

Mặc định khi bạn nhấn vào Projects ở bên sidebar trái của theme MatJek, bạn sẽ thấy những project mà chủ trang web đang folk (những project công khai). Ở đây tôi đã thay project này thành liệt kê các categories và đặt tên nó là Chủ đề. Bạn làm tương tự như trong file \categories.html nhưng giao diện thẻ thì bạn giữ nguyên ý tưởng từ file \projects.html gốc.

Font chữ

Font chữ mặc định của MatJek là Roboto, tôi đã thay nó bằng font Maven Pro. Riêng font chữ tựa đề trang thì tôi dùng Dancing Script. Cả ba font này đều miễn phí trên Google Fonts.

Hiển thị tên của mục và thẻ

Các thẻ thì bạn có thể viết tiếng Việt và có khoảng trắng, riêng các mục (categories) thì bạn phải viết không dấu và không khoảng trắng (ví dụ ten-cua-muc). Tuy nhiên khi hiển thị bạn muốn hiển thị Tên Của Mục thì làm ra sao?

Bạn tạo một file _data\categories.yml (tạo thư mục _data ngoài thư mục gốc trước). Bên trong file categories.yml bạn điền vào danh sách các categories của trang bạn theo dạng

- slug: ten-mục-1
  name: Tên Mục 1

- slug: ten-mục-2
  name: Tên Mục 2

Khi bạn cần truy xuất đến Tên Mục thì bạn tạo thêm một dòng {% for %} để duyệt hết tất cả các phần tử trong file categories.yml và so sánh nó với các categories của trang, khi nào giống (giống slug) thì cho xuất ra cái name.

{% for cat in site.categories | sort %}
  {% for catDat in site.data.categories %}
    {% if catDat.slug == cat[0] %}
      {% assign catego = catDat %}
    {% endif %}
  {% endfor %}
  {% if catego %}
      Xuất ra {{ catego.name }}
  {% endif %}
{% endfor %}

Thêm một số chức năng

Thêm công thức toán

Mặc định Kramdown trên Jekyll hỗ trợ gõ công thức toán dạng LaTeX. Bạn gõ $cong-thuc-toan$ cho các công thức cùng dòng văn bản và $$cong-thuc-toan$$ cho các công thức riêng dòng.

Nếu như kramdown có vấn đề, bạn có thể thêm thủ công bằng cách thêm vào thẻ <head> đoạn code tích hợp Mathjax sau

<script type="text/x-mathjax-config">
	MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Thêm mục tìm kiếm

Tìm kiếm này sử dụng lunr.js. Thật tình thì tôi không rõ làm ngọn ngành thế nào, tôi chỉ “bắt chước” chức năng tìm kiếm của một theme trên mạng và nó thành công. Tôi làm như sau

Đầu tiên bạn download tất cả các file cần thiết này tại đây. Sau khi giải nén ra, bạn sẽ được một số files và tôi đã để sẵn vào một số thư mục mà bạn cũng nên tạo hoặc chép các file tương ứng vào các thư mục cùng tên như thế.

  1. Bạn đặt search.html ở ngoài thư mục gốc của trang, đây là trang hiển thị kết quả tìm kiếm của bạn, nó cũng bao gồm một ô tìm kiếm.
  2. Bạn chép hết các file trong thư mục _include vào thư mục _include trên trang của bạn (nếu không có thì tạo một thư mục với tên như thế). Đây là form tìm kiếm kèm theo các icon.
  3. Bạn chép các file trong thư mục js vào thư mục js trên trang của bạn, nếu chưa có thì tạo 1 thư mục như thế. Đây là các file javascript cần có.
  4. Bạn chép các file trong _sass vào thư mục css trên máy bạn, lưu ý cần phải chỉnh sửa file search.html ở bước 1 hoặc tích hợp css trong thư mục này vào trang của bạn vì đây là thư mục chứa các file css có tác dụng trang trí cho khung và trang tìm kiếm.

Thêm mục lục

Mặc định trình Kramdown trên Jekyll hỗ trợ tạo mục lục tự động cho trang, chỉ cần bạn dùng hai dòng code sau ở đầu mỗi post là được.

*  Auto generated table of contents
{:toc}

Nhớ là phải có một list ở trước {:toc} thì mới có tác dụng.

Thêm nút “lên đầu trang”

Bạn dùng đoạn code sau và đặt nó vào trogn layout trang web của bạn. Kết quả giống như trên trang này. Riêng việc bạn thay /images/cd-top-arrow.svg bởi hình khác.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/backtotop.js"></script>
<style type="text/css">
.cd-top {
  display: inline-block;
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 2%;
  right: 2%;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #bbb url(/images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
</style>

<a href="#0" class="cd-top">Top</a>

Thêm form newsletter

Bạn vui lòng đọc bài viết này để biết thêm chi tiết.

Tạo SSL miễn phí cho trang web

Bạn muốn trang của mình có https thay vì http, vui lòng đọc bài viết này để biết cách làm.

Tôi đã tham khảo bài viết này. Các bạn sử dụng đoạn code sau

{% assign RELATED_POSTS_THRESHOLD = 3 %}
<ul>
  {% assign related_post_count = 0 %}
  {% for post in site.related_posts %}
    {% if related_post_count == RELATED_POSTS_THRESHOLD %}
      {% break %}
    {% endif %}
    {% for tag in post.tags %}
      {% if page.tags contains tag %}
        <li>
          <h3>
            <a href="{{ site.baseurl }}{{ post.url }}">
              {{ post.title }}
              <small>{{ post.date | date_to_string }}</small>
            </a>
          </h3>
        </li>
        {% assign related_post_count = related_post_count | plus: 1 %}
        {% break %}
      {% endif %}
    {% endfor %}
  {% endfor %}

  {% assign posts_left = RELATED_POSTS_THRESHOLD | minus: related_post_count %}
  {% unless posts_left == 0 %}
    {% for post in site.related_posts %}
      {% if posts_left == 0 %}
        {% break %}
      {% endif %}

      {% assign already_related = false %}
      {% for tag in post.tags %}
        {% if page.tags contains tag %}
          {% assign already_related = true %}
          {% break %}
        {% endif %}
      {% endfor %}
      {% unless already_related %}
        {% assign posts_left = posts_left | minus: 1 %}
        <li>
          <h3>
            <a href="{{ site.baseurl }}{{ post.url }}">
              {{ post.title }}
              <small>{{ post.date | date_to_string }}</small>
            </a>
          </h3>
        </li>
      {% endunless %}
    {% endfor %}
  {% endunless %}
</ul>
tôi tự học
thiết kế web
jekyll
github
tạo website
Top