Share Tạo trang chủ Xenforo 2 bằng Articles XenPorta Pro 2

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
Chắc hẳn các bạn cũng thấy rất ít các bài viết chia sẻ phần Articles của addon [8WR] XenPorta 2 (Portal) PRO đặc biệt chỉ với các thiết kế đơn điệu ban đầu sẽ khiến trang chủ của bạn tỏ ra thua chị kém em so với các mã nguồn mở khác phải không nào. Rất đơn giản, mình sẽ chia sẻ các block Articles đẹp cho các bạn trang hoàng diễn đàn một cách dễ dàng. Bạn nào chưa cài đặt addon thì có thể tải về bản mới nhất TẠI ĐÂY.
Các bạn cũng có thể chia sẻ các block để mình tổng hợp luôn vào bài viết này nhé, nếu các bạn quan tâm đến chủ đề này thì để lại các trang chủ mà các bạn cảm thấy đẹp vào bình luận phía dưới để mình chia sẻ cho nhé. Hàng sẽ cập nhật rất nhanh chóng nhé :)
 

kalilinux

Binh nhì
Thành Viên Mới
Bài viết
1
Cảm xúc
0
Hi Bác!
Mình muốn tạo trang chủ như: otosaigon.com.
Phần Slide thì mình làm được rồi. Giờ còn mỗi cái phần bài viết bên dưới thôi.

Bác có thể chỉ dẫn thêm cho mình.
Chân thành cảm ơn bác
 

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
Ok để mình chia sẻ chắc tuần sau sẽ có
 
  • Like
Cảm xúc: kalilinux

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
Articles otosaigon.com
B1 vào admin.php?options/groups/EWRporta/
Kéo xuống Excerpt trim để là 250
B2 mở template EWRporta_articles.less thay toàn bộ bằng code sau:
[HIDEREACT=1,2,3,4,5,6]
Mã:
.porta-article-pager { margin-top: -(@xf-elementSpacer); }
.porta-article-loader { display: none; text-align: center; }

.porta-article-item
{
    margin-bottom: 0;
 
   
    .porta-article-header
    {
        display: block;
        overflow: hidden;
        position: relative;
        float: left;
    width: 30%;
        border-radius: 0!important;
       
       
       
        .porta-header-image
        {
            background-position: center;
            background-size: cover;
            height: @xf-EWRporta_header_height;
           
        }
       
        .porta-header-medio
        {
            background-position: center;
            background-size: cover;
            height: @xf-EWRporta_medio_height;
        }
   
        .porta-header-text
        {
            position: absolute; bottom: 0; left: 0; right: 0;
            .xf-EWRporta_header_title;

            >span
            {
                position: absolute; bottom: 0; left: 0; right: 0;
                padding: 0 @xf-elementSpacer;
            }
        }

        .porta-header-play
        {
            position: absolute;
            top: 0; bottom: 20px; left: 0; right: 0;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .fa--xf
            {
                color: @xf-textColorAttention;
                font-size: 100px;
                text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000;
            }
        }
    }

    .porta-article-date
    {
        float: left;
        padding: @xf-paddingLarge 0;
        margin-left: @xf-EWRporta_dateblock_margin;

        .porta-date-block
        {
            .xf-messageUserBlock;
            width: 50px;
            padding: 10px;
            text-align: center;
            text-transform: uppercase;
            white-space: nowrap;

            b { display: block; font-size: 1.5em; }
        }
    }

    .message-inner { display: block; }
    .message-body .bbWrapper { display: inline; }
    .block-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.porta-masonry
{
    margin: 0 ~"calc([email protected]{xf-sidebarSpacer} / 2)";
   
    .porta-article-item
    {
        display: inline-block;
        width: ~"calc(100% / @xf-EWRporta_masonry_columns)";
       
        .porta-article-container
        {
            margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
        }
    }
}

.porta-article-status
{
    display: none;
   
    .porta-article-ellipse
    {
        font-size: 20px;
        position: relative;
        width: 4em;
        height: 1em;
        margin: 10px auto;

        .loader-ellipse-dot
        {
            display: block;
            width: 1em;
            height: 1em;
            border-radius: 0.5em;
            background: @xf-textColor;
            position: absolute;
            animation-duration: 0.5s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
        }

        .loader-ellipse-dot:nth-child(1),
        .loader-ellipse-dot:nth-child(2) { left: 0; }
        .loader-ellipse-dot:nth-child(3) { left: 1.5em; }
        .loader-ellipse-dot:nth-child(4) { left: 3em; }

        @keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } }
        @keyframes slide { to { transform: translateX(1.5em) } }

        .loader-ellipse-dot:nth-child(1) { animation-name: reveal; }
        .loader-ellipse-dot:nth-child(2),
        .loader-ellipse-dot:nth-child(3) { animation-name: slide; }
        .loader-ellipse-dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
    }
}

@media (max-width: @xf-responsiveWide)
{
    .porta-masonry
    {
        .porta-article-item
        {
            width: ~"calc(100% / @xf-EWRporta_masonry_wide)";
        }
    }
}

@media (max-width: @xf-responsiveMedium)
{
    .porta-masonry
    {
        margin: 0 [email protected];

        .porta-article-item
        {
            width: ~"calc(100% / @xf-EWRporta_masonry_medium)";
        }
    }

    .porta-article-item .porta-article-date
    {
        margin-left: -10px;

        .porta-date-block
        {
            width: auto;
            padding: 10px 5px;
            transform: rotate(180deg);
            writing-mode: vertical-rl;

            b { display: inline; font-size: initial; }
        }
    }
}

@media (max-width: @xf-responsiveNarrow)
{
    .porta-masonry
    {
        .porta-article-item
        {
            display: block;
            width: 100%;

            .porta-article-container
            {
                margin: 0;
            }
        }
    }
   
    .porta-article-item .porta-article-date
    {
        display: none;
    }
}

.block.htq-porta-oto {
    background:#fafafa;
    padding:12px;
}

.block-container.porta-article-container {
   display: inline-block;
    border-radius: 0;
    border: 0;
    background: none;
    margin:0;
}
body .porta-article-item {
    position: relative;
    padding: 12px 0;
    border-top: 1px solid #dde6ec;
    &:first-child {
        border-top:0;
    }
    .message-body {
    margin: 0;
}
    .htq-article-info {
    color: #9faecd;
    font-size: 13px;
  margin-top: 15px;
    font-weight: 500;
        li {
            display:inline-block;
        }
        .article-author a {
            color: #f15a22;
        }
}
    .block-body.message-inner {
    display: inline-block;
    float: left;
    width: 70%;
    padding: 0 12px;
        padding-left:25px;
}
    .message-cell.message-main {
    padding: 0;
       
}
    .block-header {
    white-space: normal;
    overflow: unset;
    text-overflow: ellipsis;
    background: none;
    border: none;
    padding: 0;
    color: #f15a22;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 15px;
}

   
    @media (max-width:@xf-responsiveMedium) {
    .message-body .bbWrapper {
    display: block;
    font-size: 13px;
    max-height: 55px;
    overflow: hidden;
}
        .block-header {
    font-size: 17px;
    margin-bottom: 10px;
}
.porta-article-header .porta-header-image {
    height: 170px;
}
       
    }  
   
    @media (max-width:@xf-responsiveNarrow) {
        .porta-article-header,.block-body.message-inner {
            float: none;
    width: 100%;
            padding: 0;  
        }
        .message-body .bbWrapper {
   max-height: unset;
        }
    }
   
   
}
[/HIDEREACT]

B3: Mở template EWRporta_articles_macros thay toàn bộ bằng code sau:
[HIDEREACT=1,2,3,4,5,6]
Mã:
<xf:macro name="articles_block" arg-link="!" arg-articles="!" arg-catlinks="!" arg-attachments="!"
        arg-page="!" arg-perPage="!" arg-total="!" arg-data="">

    <xf:css src="message.less" />
    <xf:css src="EWRporta.less" />
    <xf:css src="EWRporta_articles.less" />
   
    <xf:if is="property('EWRporta_infinite') AND $page == 1 AND $total > $perPage">
        <xf:set var="$infnt">1</xf:set>
        <xf:js src="8wayrun/porta/infinite.js" />
    </xf:if>

    <xf:if is="property('EWRporta_masonry')">
        <xf:set var="$msnry">1</xf:set>
        <xf:js src="8wayrun/porta/images.js" />
        <xf:js src="8wayrun/porta/masonry.js" />
    </xf:if>
   
    <xf:js src="8wayrun/porta/portal.js" />
   
    <div class="block htq-porta-oto"
            data-click="{{ property('EWRporta_infinite_click') }}"
             data-after="{{ property('EWRporta_infinite_after') }}"
             data-history="{{ property('EWRporta_infinite_history') }}">
        <xf:foreach loop="$articles" i="$i" value="$article"><xf:trim>
            <xf:macro name="article_block"
                arg-article="{$article}"
                arg-catlinks="{$catlinks.{$article.thread_id}}"
                arg-attachments="{$attachments}" />
        </xf:trim><xf:widgetpos id="ewr_porta_articles_after_article" context-i="{$i}" /></xf:foreach>
    </div>
   
    <xf:if is="$infnt">
        <div class="block porta-article-status">
            <div class="porta-article-ellipse infinite-scroll-request">
                <span class="loader-ellipse-dot"></span>
                <span class="loader-ellipse-dot"></span>
                <span class="loader-ellipse-dot"></span>
                <span class="loader-ellipse-dot"></span>
            </div>
        </div>

        <div class="block porta-article-loader">
            <xf:button class="porta-article-button button--cta">{{ phrase('EWRporta_load_more...') }}</xf:button>
        </div>
    </xf:if>
   
    <div class="block porta-article-pager">
        <div class="block-outer block-outer--after">
            <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
                link="{$link}" data="{$data}" wrapperclass="block-outer-main" />
        </div>
    </div>
</xf:macro>



<xf:macro name="article_block" arg-article="!" arg-catlinks="!" arg-attachments="!">
    <div class="porta-article-item">
        <div class="block-container porta-article-container">

            <xf:if contentcheck="true">
                <a class="porta-article-header" data-cache="false"
                    data-xf-click="{{ (!property('EWRporta_header_linked') && $article.article_icon.type == 'medio')
                        ? 'overlay' : '' }}"
                    href="{{ (!property('EWRporta_header_linked') && $article.article_icon.link)
                        ? $article.article_icon.link : link('threads', $article.Thread) }}">
                   
                    <xf:contentcheck>
                        <xf:macro name="article_header"
                            arg-article="{$article}"
                            arg-attachments="{$attachments}" />
                    </xf:contentcheck>

                </a>
            <xf:else />
                <h2 class="block-header">
                    <a href="{{ link('threads', $article.Thread) }}">
                        <xf:if is="$article.Thread.prefix_id">{{ prefix('thread', $article.Thread, 'html', '') }}</xf:if>
                        {{ $article.article_title ?: $article.Thread.title }}
                    </a>
                </h2>
            </xf:if>

            <div class="block-body message-inner">
               
                <div class="message-cell message-main">

                    <div class="message-body">
                        <div class="porta-header-text">
                        <h2 class="block-header">
                    <a href="{{ link('threads', $article.Thread) }}">
                        <xf:if is="$article.Thread.prefix_id">{{ prefix('thread', $article.Thread, 'html', '') }}</xf:if>
                        {{ $article.article_title ?: $article.Thread.title }}
                    </a>
                </h2>
                    </div>
                        <xf:if contentcheck="true">
                            <div class="porta-block-icon">
                                <xf:contentcheck>
                                    <xf:macro name="article_icon"
                                        arg-article="{$article}"
                                        arg-attachments="{$attachments}" />
                                </xf:contentcheck>
                            </div>
                        </xf:if>

                        {{ bb_code($article.article_excerpt, 'ewr_porta_article', $article.Thread.FirstPost) }}

                        <xf:if is="$article.article_break">
                            <a href="{{ link('threads', $article.Thread) }}">{$article.article_break}</a>.
                        </xf:if>
                       
                        <div class="htq-article-info">
                        <li class="article-author">
                                    <a href="{{ link('ewr-porta/authors', $article.Thread.User) }}">
                                        {{ $article.Thread.User ? $article.Thread.User.username : $article.Thread.username }}</a>
                                </li>
                                <li>
                                    - <a href="{{ link('threads', $article.Thread) }}" class="u-concealed">
                                        <xf:date time="$article.article_date" data-full-old-date="true" /></a>
                                </li>
                           
                       
                                <li>
                                    - Bình luận: {$article.Thread.reply_count|NUMBER}
                                </li>
                                <li>
                                   
                                    - Lượt xem: {$article.Thread.view_count|NUMBER}
                                </li>
                               
                           
                        </div>
               
                       
                    </div>
                </div>
            </div>

           
        </div>
    </div>
</xf:macro>





<xf:macro name="article_header" arg-article="!" arg-attachments="!">
    <xf:if is="{{ property('EWRporta_header') }}">
        <xf:if is="$article.article_icon.type == 'medio' AND {$article.article_icon.data}">
            <div class="porta-header-medio"
                style="background-image: url('{{ base_url($article.article_icon.data.image) }}');">
            </div>
            <div class="porta-header-play"><xf:fa icon="fa-play-circle" /></div>
        <xf:elseif is="$article.article_icon.type == 'attach' AND {$attachments.{$article.article_icon.data}}" />
            <div class="porta-header-image"
                style="background-image: url('{{ link('full:ewr-porta/attachments', $attachments.{$article.article_icon.data}) }}');">
            </div>
        <xf:elseif is="$article.article_icon.type == 'image' AND $xf.options.EWRporta_icon_external" />
            <div class="porta-header-image"
                style="background-image: url('{$article.article_icon.data}');">
            </div>
        </xf:if>
    </xf:if>
</xf:macro>

<xf:macro name="article_icon" arg-article="!" arg-attachments="!">
    <xf:if is="!property('EWRporta_header') AND
            $article.article_icon.type == 'attach' AND
            {$attachments.{$article.article_icon.data}}">
        <a href="{{ link('threads', $article.Thread) }}">
            <img border="0"
                alt="{$attachments.{$article.article_icon.data}.filename}"
                src="{$attachments.{$article.article_icon.data}.thumbnail_url}" />
        </a>
    <xf:elseif is="!property('EWRporta_header') AND
            $article.article_icon.type == 'image' AND
            $xf.options.EWRporta_icon_external" />
        <a href="{{ link('threads', $article.Thread) }}">
            <img border="0"
                alt="{$article.article_icon.data}"
                src="{$article.article_icon.data}" />
        </a>
    <xf:elseif is="$article.article_icon.type == 'avatar'" />
        <xf:avatar user="$article.Thread.User" size="s"
            defaultname="{$article.Thread.username}" itemprop="image" />
    </xf:if>
</xf:macro>
[/HIDEREACT]

Ưu điểm: Hiển thị dạng list đẹp đã tối ưu Responsive hoàn hảo
Nhược điểm: Không sử dụng được block dạng masonry, bạn nào muốn đồng thời sử dụng cả 2 block khi chọn widget vui lòng inbox có tính phí thiết kế.
Demo ảnh

Demo Online: https://www.otosaigon.com/
 

hatbuimo123

Binh nhì
Thành Viên Mới
Bài viết
1
Cảm xúc
1
mình làm rồi mà nó ra thế này chứ k đc như của bạn, mình sai chỗ nào vậy ạ, làm ơn chỉ giúp
1590108457761.png


Với cả cái feature nó k tự chạy được
nhờ Admin chỉ điểm giùm
cảm ơn rất nhiều
 
Sửa lần cuối:
  • Love
Cảm xúc: hellomoto

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
Cho mình xem demo xem lỗi nhé
 

thahtrung06

Binh nhì
Thành Viên Mới
Bài viết
19
Cảm xúc
0
Mình muốn thêm widget nhưng nó chỉ hiển thị ở phần articles thì làm thế nào vậy ads?
widget.png
Xin cảm ơn!
 
Sửa lần cuối:

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
bạn chọn widget XenPorta > Articles list: Sidebar
 
  • Like
Cảm xúc: thahtrung06

thahtrung06

Binh nhì
Thành Viên Mới
Bài viết
19
Cảm xúc
0
bạn chọn widget XenPorta > Articles list: Sidebar
Mình chọn rồi nhưng nó hiển thị, tách hẳn 1 cột bên phải nhưng mình chỉ muốn có 1 cột bên phải ở phần articles, còn các phần khác như feature thì giữ nguyên.
 
Phòng chát
  1. Chưa có nội dung nào, hãy là người đầu tiên !
Top