Thiết kế website động với mã nguồn Drupal 7 – phần 8

Nếu chưa quen thao tác trên website Drupal 7 giao diện tiếng Anh thì bạn có thể chuyển sang giao diện tiếng Việt để thuận tiện hơn cho quá trình sử dụng. Drupal 7 không những giúp quản trị thay đổi ngôn ngữ mặc định trên website mà còn có khả năng hỗ trợ khách truy cập website tự chuyển đổi ngôn ngữ khi cần thiết, tức là bạn có thể tạo ra một website đa ngôn ngữ. Ngoài ra, phần này cũng giới thiệu về cách tạo hiệu ứng trình diễn bài viết.

            Đầu tiên, bạn cần tải module Internationalization (hay i18n) tại địa chỉ http://drupal.org/project/i18n và tải thêm các module hỗ trợ tại địa chỉ này. Sau đó, bạn chép các module này vào thư mục news\sites\all\modules rồi tiến hành kích hoạt (gồm các module: Veriable, Language icon, Language Switcher). Lưu ý, bạn cần phải kích hoạt hai module Content translation và Locale  trong nhân của Drupal trước khi thực hiện. Tiếp theo, bạn cài đặt thêm các ngôn ngữ khác tương tự như cách cài đặt ngôn ngữ tiếng Việt.

 Để tạo tùy chọn ngôn ngữ trong kiểu nội dung (Add content), bạn cần phải thiết lập hỗ trợ đa ngôn ngữ cho kiểu nội dung đó. Bạn vào menu Structure bấm Content types, rồi bấm Edit ở kiểu nội dung cần thiết lập. Ví dụ, với kiểu nội dung Article, bạn chọn thẻ Edit  bấm vào mục Publishing options rồi chọn Enable with translation ở cửa sổ bên phải, bấm Save content type. Sau này, khi biên tập nội dung bài viết thì sẽ xuất hiện thêm một mục tùy chọn Language trong kiểu nội dung  đang dùng.

            Để thực hiện, bạn vào menu Configuration, tìm khung Media, bấm vào liên kết Image Style. Bạn bấm Add Style rồi nhập chữ fullzize vào ô Style name, bấm Create new style. Trong khung Effect, bạn chọn Resize rồi bấm nút Add, nhập hai kích thước vào ô Width, Height (Width: 400, Height: 280). Thực hiện tương tự đối với kiểu ảnh thu nhỏ thumbsize.

+ Link field: ô Label (nhập vào Slider Link), ô field_(nhập vào slider_link), khung Type of data to store (chọn Link), bấm Save, bấm Save field settings. Sau đó, bạn cần thiết lập về kiểu hiển thị mục Slider Link trong kiểu nội dung Article Slider rồi bấm bấm Save settings.

            Để tạo kiểu hiển thị mới, bạn vào menu Structure, bấm vào liên kết Views, bấm Add new view. Bạn nhập vào ô View name tên kiểu hiển thị (ví dụ Article Slider), chọn Content ở khung Show, chọn Article Slider ở khung of type. Bạn bỏ dấu chọn ở ô Create a page, rồi đánh dấu chọn vào ô Create a block, chọn Slideshow ở trường Display Format, chọn fields ở trường of, bấm Continue & edit.

Bạn thực hiện thêm một lần nữa các thao tác trên đối với dạng hình ảnh thu nhỏ (thumbsize), tức là đến bước Image style chọn thumbsize nhưng bạn cần đánh dấu chọn vào ô Exclude from display  . Trước khi thiết lập kiểu trình diễn, bạn cần tải về gói tập tin tạo hiệu ứng jQuery Cycle Plugin tại địa chỉ http://malsup.com/jquery/cycle/. Sau khi tải về, bạn tiến hành giải nén vào thư mục libraries (news\sites\all\libraries\), rồi tạo một thư mục con trong thư mục này (tên là jquery.cycle), sao chép tập tin jquery.cycle.all.min.js vào thư mục con vừa tạo. Trở lại khung Display ở cửa sổ quản trị, bạn bấm Settings ở mục Formats.

Trong hộp thoại hiện ra, bạn cần thiết lập ở các mục: List type (chọn Unordered list), Effect (chọn fade), Action (chọn Pause on hover), Widgets (có thể chọn các tùy chọn trong Top widgets hoặc Bottom widgets). Nếu chọn Paper ở mục Bottom widgets thì bạn thêm các tùy chọn khác: Paper type (chọn Fields), Paper fields (chọn Content Slider Image và Activate Slide and Pause on Pager Hover), bấm Apply (all displays).

 

- Kích hoạt và thiết lập cho block View: Article Slider

 

            Đến đây, bạn đã có được khung trình diễn bài viết và chỉ cần đặt vào một khung tính năng trên website (có thể xem lại ở mục 4 phần 3). Sau khi kích hoạt xong, bạn bấm configuration của block View: Article Slider rồi nhập <none> vào ô Block Title để không hiển thị tiêu đề của khung tính năng, bấm Save block.

BÙI THANH LIÊM