[Tut] Giao diện trang chủ XenPotal phong cách báo chí

Chuyên mục 'Xenforo', người gửi admin, 23/6/12.

  1. admin Administrator

    Hôm trước mình có viết bài viết này trên diễn đàn vietxf.com nhưng do diễn đàn bên đó chập chờn nên move về đây cho mọi người tham khảo.

    Nhiều bạn hỏi cách làm trang chủ như diễn đàn làm đẹp của mình nên mình viết bài hướng dẫn này.

    Vì là lần đầu tiên mình viết Tut nên có phần nào chưa rõ mọi người thông cảm nhé.

    - Ý tưởng giao diện: Mình lấy ý tưởng từ trang 2sao.vn

    - Nguyên lý:
    + Giao diện, bố cục:

    - Lặp lại nhiều lần Block Recent News.
    - Chỉnh sửa CSS để căn hình ảnh và mô tả.
    + Thuật toán:
    Phần recent news sẽ lấy ra số lượng tin cố định (cấu hình trong Admin), ví dụ ở đây mình lấy 5 tin.
    Tạo 1 biến i để chạy vòng lặp duyệt tin từ 1 tới 5.
    Nếu i < 3 (tức i=1, i=2): Hiển thị đoạn code gồm ảnh và trích dẫn
    Trái lại thì in ra tiêu đệ

    Chú ý: Phần trích đẫn phải là text (tức là đã bỏ hết các thẻ html).

    Tất cả phần này đều thao tác trên file Recent News.

    Mình gửi fiel Recent News . XML để mọi người tham khảo


    Code:
    <xen:foreach loop="$RecentNews7" value="$news" i="$i">
     
    <xen:if is="{$i} < 3">
     
    <h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
     
    <xen:if is="{$news.promote_icon} != 'disabled'">
     
    <xen:if hascontent="true">
     
    <xen:contentcheck>
     
    <xen:if is="{$news.attach}">
     
    <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
     
    <xen:elseif is="{$news.medio}" />
     
    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
     
    <a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
     
    </div>
     
    <xen:elseif is="{$news.image}" />
     
    <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" style="max-height: 150px; max-width: 150px;" /></a>
     
    <xen:else />
     
    <xen:avatar user="$news" size="m" itemprop="photo" />
     
    </xen:if>
     
    </xen:contentcheck>
     
    </xen:if>
     
    </xen:if>
     
    <div class="newsText">{xen:raw $news.messageText}</div>
     
    <div class="clearFix"></div>
     
    <xen:else />
     
    <h3><a href="{xen:link threads, $news}" class="newsTitle more">{$news.title}</a></h3>
     
    </xen:if>
     
    </xen:foreach
     
    
    Trong phần code có phần chữ đỏ là thể hiện nhưng điều mình nói như trên . Mọi người tự sửa theo ý mình nhẹ

    Còn việc tạo nhiều Block Recent News mọi người xem bài này nhé:

    http://www.yly.vn/threads/cach-tao-nhieu-block-recent-news-cho-xenportal.412/

    Cuối cùng: Bạn nào có nhã ý đặt text link với mình nhé: Diễn đàn mỹ phẩm

    <a href="http://www.yly.vn" target="_blank" title="Diễn đàn làm đẹp">Diễn đàn làm đẹp</a>

    Cảm ơn tất cả, chúc mọi người thành công .

    Các bạn có thể tham khảo thêm vật tư sản phẩm ngành kính chúng tôi

    Wed site : http://kinhcuongluchanoi.vn/

    Báo giá kính cường lực
    Báo giá cửa kính cường lực
    Báo giá cửa lùa kính cường lực
    Báo giá cửa nhôm kính Việt Pháp
    Báo giá cầu thang kính cường lực
    Báo giá lan can kính cường lực
    Báo giá cabin tắm kính cường lực
    Báo giá cửa nhựa lõi thép
    Báo giá kính mầu ốp bếp

    Web site :http://kinhcuongluc.comfor.vn/

    Báo giá kính cường lực
    Báo giá cửa kính cường lực
    Báo giá cửa lùa kính cường lực
    Báo giá cabin tắm kính cường lực
    Báo giá lan can kính cường lực
    Báo giá cầu thang kính cường lực
    Báo giá cửa nhôm kính Việt Pháp
    Báo giá cửa nhựa lõi thép.

    Web site :http://kinhhanoi.vn/

    Báo giá kính cường lực
    Báo giá cửa kính cường lực
    Báo giá cửa lùa kính cường lực
    Báo giá cabin tắm kính cường lực
    Báo giá lan can kính cường lực
    Báo giá cầu thang kính cường lực
    Báo giá cửa nhôm kính Việt Pháp
    Báo giá cửa nhựa lõi thép.

    Chia sẻ

    Attached Files:

  2. dproks

    dproks New Member

    Tham gia:
    23/6/12
    Bài viết:
    4
    "Like" đã nhận:
    0
    Bạn ơi cho mình hỏi làm sao để Export full toàn bộ code trong XML của Block (RecentNews) hả bạn ! MÌnh Export ra mà nó chỉ nhận được 1 phần trên còn phần CSS dưới và phần nội dung bên dưới bay mất tiêu !
  3. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    Mình vào phần Block rồi Export ra bình thường bạn à.

    Attached Files:

  4. bizzuu

    bizzuu New Member

    Tham gia:
    5/7/12
    Bài viết:
    9
    "Like" đã nhận:
    0
    Cho mình hỏi mình đã đổi lại tên và khi add block nó báo: Template titles must be unique. The specified title is already in use.
    Mình đã làm nhiều cách vẫn ko add đuợc bác nào giúp mình vấn đề này với
  5. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    Lỗi này là do bạn bị trùng tên Template. Chắc do bạn chưa sửa kỹ trong file .XML, bạn nên dùng lệnh Search và Replace cho nhanh và đầy đủ.

    @All: Nhiều bạn có nhu cầu nên mình gửi lại phần Block của mình bao gồm cả phần đã sửa. Các bạn chỉ cần Upload file PHP lên host và Import file XML trong trang admin là được.

    Có gì thắc mắc các bạn cứ gửi tại đây nhé.

    Attached Files:

    bizzuu likes this.
  6. bizzuu

    bizzuu New Member

    Tham gia:
    5/7/12
    Bài viết:
    9
    "Like" đã nhận:
    0
    Cảm ơn nhé đã add được nhưng chưa có kết quả ;)
  7. tkhanhlinh

    tkhanhlinh New Member

    Tham gia:
    27/7/13
    Bài viết:
    1
    "Like" đã nhận:
    1
    Em đang làm cái trang chủ phong cách báo chí, tuy nhiên vẫn chưa tìm dc cái hotnews slide nào cài thành công cả, anh có thể chia sẻ cho ae cái block bác đang dùng hoặc tương tự (như của kenhsinhvien.net chẳng hạn) được không. thanks!
  8. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    Chào bạn !

    Slide dạng kenhsinhvien thì mình chưa xem qua. Có thời gian mình sẽ làm giúp bạn.

    Mình gửi đính kèm slide mình đang dùng nhé.

    https://www.dropbox.com/s/hfjv1g2d6rik04i/yly slide.rar

    Pass: www.yly.vn
    tkhanhlinh likes this.
  9. tkhanhlinh86

    tkhanhlinh86 New Member

    Tham gia:
    29/7/13
    Bài viết:
    2
    "Like" đã nhận:
    0
    Up file RecentNews8.php vào library/EWRporta/Block, sau đó cài block, chọn chuyên mục cho block, vào layouts đặt block vào Position: Mid-Right (trước block RecentNews). Tuy nhiên ra trang chủ thì không thấy hiện gì cả. Phải chỉnh thế nào để nó hoạt động anh?
    p/s nick trước em đăng bài bị báo lỗi "vượt quá số lượng bài đăng" nên phải tại nick mới
  10. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    Uh, Vì spam nhiều nên mình hạn chế 3 bài/ ngày. Bạn có thể Inbox cho mình. Module này là lấy ảnh Slide nên bạn cần Promote bài viết thì nó mới hiển thị (Chú ý đến cả thời gian cache nữa) vì vậy mà của bạn không hiển thị.

    Nếu bạn muốn cứ bài mới thì hiển thị ra thì PM mình. Mình sẽ sửa cho bạn.
    tkhanhlinh86 likes this.
  11. tkhanhlinh86

    tkhanhlinh86 New Member

    Tham gia:
    29/7/13
    Bài viết:
    2
    "Like" đã nhận:
    0
    Hôm qua em vào không đăng được bài, hôm nay vào cũng không được nên mới phải tạo nick mới. Em muốn cứ bài mới là tự động đưa lên cái slide đó, đỡ phải chỉnh :) . Anh cố giúp em với nhé.
  12. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    tkhanhlinh likes this.
  13. ttkhanhlinh

    ttkhanhlinh New Member

    Tham gia:
    29/7/13
    Bài viết:
    1
    "Like" đã nhận:
    0
    Hình ảnh thì đủ rồi, còn kích thước của slide chỉnh ở đâu anh? Em chỉnh thông số width="405" ở EWRblock_RecentNews8.css thì ảnh và chữ thu lại nhưng nền trắng không thu lại cho vừa với 2 cột tin ở dưới, nó vẫn cứ rộng hơn. Bác xem hình rồi giúp em với. Em mới tập làm forum nên mù tịt khoản css, hỏi anh hơi nhiều :D
    [​IMG]
  14. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    Cái này thì bạn đưa lên đi rồi đưa Demo mình xem cho.

    Còn để sửa nó, đơn giản nhất là bạn tìm tất cả chỗ nào có 405 thì thay bằng số bạn muốn trong file EWRblock_RecentNews8.css.
  15. hiendi

    hiendi New Member

    Tham gia:
    6/10/13
    Bài viết:
    3
    "Like" đã nhận:
    0
    Admin ơi cho mình hỏi với,
    Các phần tin tức, và các tin vắn ở cột bên phải, làm sao để tạo được hình ảnh bé chứ không phải lấy nguyên hình ảnh trong forum ra vậy?
    Cảm ơn bạn nhiều.
  16. vandung

    vandung Administrator

    Tham gia:
    4/9/13
    Bài viết:
    7
    "Like" đã nhận:
    0
    Bạn ơi cái này thì 1 là bạn đính kèm ảnh trong bài viết, nó sẽ tự động lấy ảnh thumbnail.

    Còn nếu không thì phải viết 1 đoạn Cron Job để cắt ảnh đại diện rồi dùng code gọi ra. Hiện tại mình đang áp dụng cái này cho Website yly.vn
  17. hiendi

    hiendi New Member

    Tham gia:
    6/10/13
    Bài viết:
    3
    "Like" đã nhận:
    0
    Cảm ơn bạn rất nhiều, mình thấy nhiều site chỉ làm được cái ảnh thumbnail nhưng thực ra đó vẫn là ảnh lớn mà chỉnh kích thước nhỏ lại.
    Bạn có thể hướng dẫn mình cái phần cắt ảnh đại diện thành nhỏ lại rồi gọi ra được ko? Mình thấy bạn tối ưu được vậy thì giảm dung lượng cho web rất tuyệt.
    Giúp mình với nhé.
  18. Khắc Dũng

    Khắc Dũng New Member

    Tham gia:
    2/12/13
    Bài viết:
    1
    "Like" đã nhận:
    0
    2 bác cho hỏi , muốn chỉnh cho cái cột bên trái nó xếp theo kiểu hàng ngang thay vì cứ chọn số bài hiển thị nó cứ dọc xuống thì làm sao :(
  19. admin

    admin Administrator Staff Member

    Tham gia:
    1/4/12
    Bài viết:
    1,072
    "Like" đã nhận:
    12
    Mình chưa hiểu ý bạn lắm.
    Nôm na nếu bạn muốn nó hiển thị sang bên trái thì thêm doạn sau trong CSS
    text-align: left;
    float: left;
  20. mimoza

    mimoza New Member

    Tham gia:
    27/6/14
    Bài viết:
    1
    "Like" đã nhận:
    0
    Tạo ra các block rồi, chạy được ở style này. Nhưng đem các block này sang style khác thì chỉnh như thế nào để nó chạy được vậy admin?