- Tham gia
- 28/02/2015
- Bài viết
- 16,828
- Được Like
- 12,687
Randomising content - Tạo nội dung ngẫu nhiên cho XenForo 2
Nội dung ngẫu nhiên có thể được sử dụng theo nhiều cách khác nhau, trong đó phổ biến nhất là cho hình ảnh và logo header hoặc banner quảng cáo.
Hướng dẫn này sẽ giải thích làm thế nào nó có thể được thực hiện đơn giản với hai dòng code (trớ trêu thay lại mất hàng trăm dòng văn bản giải thích).
Theo mục đích của hướng dẫn này, chúng ta sẽ thêm một hình ảnh vào vị trí quảng cáo
Chuẩn bị hình ảnh
Bước đầu tiên là chuẩn bị hình ảnh của bạn.
Việc đặt tên cho hình ảnh là quan trọng.
Tất cả chúng phải có cùng tên gốc, kết thúc bằng một số nguyên khác bắt đầu từ 1 theo thứ tự số và có cùng phần mở rộng tệp, trong ví dụ này là
Vì vậy, như bạn có thể thấy, tất cả chúng đều được đặt tên là
Cuối cùng, tất cả chúng đều kết thúc bằng một số từ 1 đến 5. Không được có khoảng trống trong những con số này - ví dụ, bạn không thể đánh số chúng 1, 2, 4, 6, 8, nếu muốn ngẫu nhiên giữa 5 hình ảnh.
Bạn có thể đặt tên chúng theo cách bạn muốn, miễn là bạn tuân theo quy ước đó.
Một ví dụ khác sẽ là:
Tạo một thư mục
Bạn có thể tải chúng lên bất cứ nơi nào bạn muốn.
Tạo code
Tiếp theo, chúng ta tạo code cho việc tạo số ngẫu nhiên.
Điều này chỉ đơn giản là:
Ở đây chỉ có hai thành phần quan trọng.
Đầu tiên là
Nó có thể là bất cứ thứ gì bạn thích.
Thứ hai là
Giá trị đó phải khớp với số lượng hình ảnh mà bạn muốn làm.
Sự ngẫu nhiên đến từ thời gian máy chủ, được gọi qua
Dòng code tiếp theo sẽ gọi các hình ảnh. Đó là HTML tiêu chuẩn với một chút cú pháp XF cho đường dẫn tương đối và để tạo tên tệp.
Chia nhỏ điều đó, bạn sẽ có thể thấy rằng:
Dấu
Vì vậy, trong trường hợp này, đường dẫn hình ảnh cho hình ảnh đầu tiên là
Tất nhiên, bạn có thể mở rộng code để thêm URL, văn bản thay thế, kiểu, v.v.
Ví dụ:
Thêm code
Bước cuối cùng là thêm code vào template, đối với hướng dẫn này là vị trí quảng cáo
Vậy là xong.
Bây giờ mỗi khi trang được làm mới, một trong năm hình ảnh sẽ được hiển thị.
Chúc các bạn thành công.
Nội dung ngẫu nhiên có thể được sử dụng theo nhiều cách khác nhau, trong đó phổ biến nhất là cho hình ảnh và logo header hoặc banner quảng cáo.
Hướng dẫn này sẽ giải thích làm thế nào nó có thể được thực hiện đơn giản với hai dòng code (trớ trêu thay lại mất hàng trăm dòng văn bản giải thích).
Theo mục đích của hướng dẫn này, chúng ta sẽ thêm một hình ảnh vào vị trí quảng cáo
Container header, hình ảnh này sẽ thay đổi ngẫu nhiên giữa 5 hình ảnh khác nhau.Chuẩn bị hình ảnh
Bước đầu tiên là chuẩn bị hình ảnh của bạn.
Tất cả chúng phải có cùng tên gốc, kết thúc bằng một số nguyên khác bắt đầu từ 1 theo thứ tự số và có cùng phần mở rộng tệp, trong ví dụ này là
.png.Vì vậy, như bạn có thể thấy, tất cả chúng đều được đặt tên là
image và sau đó là thêm dấu phân tách _, điều này không cần thiết nhưng nó giúp tên tệp dễ đọc hơn.Cuối cùng, tất cả chúng đều kết thúc bằng một số từ 1 đến 5. Không được có khoảng trống trong những con số này - ví dụ, bạn không thể đánh số chúng 1, 2, 4, 6, 8, nếu muốn ngẫu nhiên giữa 5 hình ảnh.
Bạn có thể đặt tên chúng theo cách bạn muốn, miễn là bạn tuân theo quy ước đó.
Một ví dụ khác sẽ là:
- banner1.jpg
- banner2.jpg
- banner3.jpg
- banner4.jpg
- banner5.jpg
Tạo một thư mục
/images mới trong /styles/default như sau:
Tạo code
Tiếp theo, chúng ta tạo code cho việc tạo số ngẫu nhiên.
Điều này chỉ đơn giản là:
HTML:
<xf:set var="$int" value="{{ ($xf.time % 5) + 1 }}" />Ở đây chỉ có hai thành phần quan trọng.
Đầu tiên là
$int là tên bạn đang gán cho biến.Nó có thể là bất cứ thứ gì bạn thích.
Thứ hai là
5 trong ($xf.time % 5).Giá trị đó phải khớp với số lượng hình ảnh mà bạn muốn làm.
Sự ngẫu nhiên đến từ thời gian máy chủ, được gọi qua
$xf.time.Dòng code tiếp theo sẽ gọi các hình ảnh. Đó là HTML tiêu chuẩn với một chút cú pháp XF cho đường dẫn tương đối và để tạo tên tệp.
HTML:
<img src="{{ base_url(('styles/default/images/image_' . $int . '.png')) }}" />Chia nhỏ điều đó, bạn sẽ có thể thấy rằng:
- tham chiếu đến thư mục chúng ta đã tạo trước đó -
/images - với tên tệp hình ảnh, chúng ta đã lưu chúng dưới dạng -
image_(không có số nguyên) - biến có tên ở trên -
$int(cung cấp số nguyên) - và phần mở rộng tệp -
.png
Dấu
. thực hiện nối với $int, vì vậy đường dẫn hình ảnh kết quả là styles/default/images/image_$int.png, trong đó $int là giá trị từ 1 đến 5.Vì vậy, trong trường hợp này, đường dẫn hình ảnh cho hình ảnh đầu tiên là
styles/default/images/image_1.png.Tất nhiên, bạn có thể mở rộng code để thêm URL, văn bản thay thế, kiểu, v.v.
Ví dụ:
HTML:
<a href="https://www.example.com">
<img src="{{ base_url(('styles/default/images/image_' . $int . '.png')) }}" alt="Header image" width="300" height="150" />
</a>Thêm code
Bước cuối cùng là thêm code vào template, đối với hướng dẫn này là vị trí quảng cáo
Container header.
HTML:
<xf:set var="$int" value="{{ ($xf.time % 5) + 1 }}" />
<img src="{{ base_url(('styles/default/images/image_' . $int . '.png')) }}" />
Bây giờ mỗi khi trang được làm mới, một trong năm hình ảnh sẽ được hiển thị.
Nguồn: xenforo.com
Bài viết liên quan
Bài viết mới
