Tutorial 2x Randomising content - Tạo nội dung ngẫu nhiên cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,581
Được Like
8,108
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 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.

images.png

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à .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
Sau đó, chỉ cần tải hình ảnh lên máy chủ.
Tạo một thư mục /images mới trong /styles/default như sau:

directory.png

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à:
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')) }}" />

container_header.png

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ị.

header_image.png

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

virutmt

Thượng Đế
Tham gia
03/10/2017
Bài viết
134
Được Like
26
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 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.

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à .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
Sau đó, chỉ cần tải hình ảnh lên máy chủ.
Tạo một thư mục /images mới trong /styles/default như sau:

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à:
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')) }}" />

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.


Nguồn: xenforo.com​
Vậy nếu đây là vị trí chia sẻ cho nhiều quảng cáo banner khác nhau? mỗi ảnh là 1 link thì làm sao?
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,581
Được Like
8,108
Nếu vậy thì phải dùng cách khác nhé.
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Top Bottom