"Quickreply" for guests - "Trả lời nhanh" cho khách

[PVS]

"Quickreply" for guests - "Trả lời nhanh" cho khách

Thử nghiệm này khá rộng rãi, và nó dường như làm việc khá tốt trên style mặc định. Ngoài ra, điều này không chỉ cho editor trả lời nhanh đầy đủ cho khách, cũng không cho thấy bất cứ chức năng gì (ngoại trừ hình thức đăng nhập). Nó chỉ cho thấy một lĩnh vực sửa văn bản, với một vài "nút" dưới đây, đó là chỉ cần liên kết đến trang đăng nhập và đăng ký.

Bạn cần phải tải về Mosaic jQuery plugin (tải ở file đính kèm).

Nếu bạn không thoải mái với CSS, bạn không nên cài đặt này nếu bạn sử dụng bất cứ điều gì nhưng style mặc định nó sẽ yêu cầu bạn phải chỉnh sửa CSS. Lý do chính của tôi cho phát hành này là để những người khác có thể mở rộng về công việc của tôi, và làm cho nó tốt hơn.

Điều này sẽ yêu cầu bạn phải chỉnh sửa một số template và tải lên plugin jQuery của bên thứ 3 gọi là Mosaic (file đính kèm). Bạn cần phải giải nén nó và tải lên tập tin gọi là mosaic.1.0.1.min.js. Tôi đã tải lên nó trong js/mosaic/, nhưng bạn có thể sử dụng khá nhiều bất kỳ thư mục nào bạn muốn, nhưng bạn cần phải thực hiện một lưu ý về nơi bạn tải nó lên.

Khi đã xong, bạn cần phải bắt đầu chỉnh sửa template. Trước tiên, bạn cần phải tạo ra 2 template có tên là qr_guest và qr_guest.css. Trong qr_guest, dán mã này:

<xen:require css="qr_guest.css" />
<script type="text/javascript">
jQuery(function($){
$('.cover').mosaic({
animation:'fade',
opacity:'0.8',
speed:'slow'
});
});
</script>
<div class="quickReply message">
<xen:include template="message_user_info">
<xen:map from="$visitor" to="$user" />
<xen:set var="$isQuickReply">1</xen:set>
</xen:include>
<div class="mosaic-block cover">
<div class="mosaic-overlay">
<div class="details">
<div class="guestMessage">
<h2>Welcome to our site, guest</h2>
<p>Unfortunately you can't reply here until you log or sign up. Feel free to login using the form on the left, or register here</p><br />
<label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
</div>
<form action="{xen:link 'login/login'}" method="post" id="quickLogin">
<dl class="qrLogin">
<dt><label for="ctrl_pageLogin_login">{xen:phrase your_name_or_email_address}:</label></dt>
<dd><input type="text" name="login" value="{$defaultLogin}" id="ctrl_pageLogin_login" class="textCtrl" /></dd>
</dl>
<dl class="qrLogin">
<dt><label for="ctrl_pageLogin_password">{xen:phrase password}:</label></dt>
<dd>
<input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" />
</dd>
</dl>
<dl class="qrLogin qrsubmitUnit">
<dt>
<input type="submit" class="button primary" value="{xen:phrase log_in}" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" />
</dt>
<dd><label for="ctrl_pageLogin_remember" class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_pageLogin_remember" /> {xen:phrase stay_logged_in}</label></dd>
</dl>
<p><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser">{xen:phrase forgot_your_password}</a></p>
</form>
</div>
</div>
<textarea class="textCtrl Elastic mosaic-block cover" rows="5" name="message" style="overflow: hidden; "></textarea>
<div class="submitUnit qrGuest">
<a href="login/"  class="button primary">Post reply</a>
<a href="register/" class="button DisableOnSubmit">Register to post</a>
</div>
</div>
</div>

Trong qr_guest.css, dán mã này:

.details{ margin:15px 20px; }
.mosaic-overlay p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#ddd; text-shadow:1px 1px 0 rgb(0,0,0);}
.mosaic-overlay h2 { font:300 14px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#ddd; text-shadow:1px 1px 0 rgb(0,0,0);}
.mosaic-block {
position:relative;
overflow:hidden;
width:90%;
margin-left:15px;
padding-bottom: 10px;
}
{xen:helper clearfix, '.mosaic-block'}
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:95%;
margin-left: 0 10px;
height:100%;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
background: #000;
padding: 10px;
}
.quickReply { padding-top: 10px; padding-bottom: 30px; border-top: 1px solid @primaryLighterStill; }
.submitUnit.qrGuest { width: 90%; text-align: right; margin: 10px 25px; }
.qrLogin, .qrLogin dt, .qrLogin dd { float: left; padding-right: 15px; color: #fff;}
.qrLogin { margin-left: 5px; }
.qrLogin .textCtrl { width: 150px; }
.qrLogin.qrsubmitUnit { clear: both; }
.qrLogin .button { min-width: 85px; margin-right: 5px; }
.mosaic-block form { float: right; }
.mosaic-block .guestMessage { float: left; width: 350px; }
.mosaic-block #SignupButton { width: 160px; margin: 0 auto; }
.qrLogin #ctrl_pageLogin_remember { margin: 5px 0; }
#quickLogin p, #quickLogin a { clear: both; padding: 5px 5px; color: @mutedTextColor; }

Sau đó, bạn cần phải chỉnh sửa các template bao gồm template mới của bạn. Trước tiên, mở page_container_js_head, tìm dòng này:

<!--XenForo_Require:JS-->

Thêm vào đằng trước đoạn code dưới đây:

    <xen:if is="!{$visitor.user_id} AND {$contentTemplate} == 'thread_view'">
        <script src="js/mosaic/mosaic.1.0.1.min.js"></script>
    </xen:if>

Điều này nạp javascript bên ngoài, vì vậy hãy chắc chắn đường dẫn là chính xác. Sau đó, vào template thread_view tìm:

<xen:if is="{$canQuickReply}">
    <xen:include template="quick_reply">
        <xen:set var="$formAction">{xen:link 'threads/add-reply', $thread}</xen:set>
        <xen:set var="$lastDate">{$lastPost.post_date}</xen:set>
        <xen:set var="$showMoreOptions">1</xen:set>
    </xen:include>
</xen:if>

Thêm vào đằng sau đoạn code dưới đây:

<xen:if is="!{$canQuickReply}">
<xen:include template="qr_guest" />
</xen:if>

Lưu lại là xong. Khách sẽ nhìn thấy như thế này:

Bình thường

Khi rê chuột vào
​

Ngoài ra, nếu bạn muốn trang web chiều rộng cố định như thế này:

​

Một vài gợi ý về tùy biến:
Thông điệp của khách ở bên phải của biểu mẫu đăng nhập được xác định trong template qr_guest, chỉ cần chỉnh sửa phần này:

<div class="guestMessage">
<h2>Welcome to our site, guest</h2>
<p>Unfortunately you can't reply here until you log or sign up. Feel free to login using the form on the left, or register here</p><br />
<label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
</div>

Bạn có thể sử dụng bất kỳ thẻ html mà bạn muốn ở đây, chẳng hạn như liên kết tới trang đăng ký của bạn. Mọi thứ ở giữa <label for="...." và </label> là cho nút sign up now.

Tất cả các CSS được định nghĩa trong template qr_guest.css, vì vậy hầu hết các tùy biến nên được thực hiện ở đó. Tôi cố gắng để sử dụng các lớp XF tiêu chuẩn, và ở một số nơi tôi làm, nhưng cách mọi thứ được thiết lập, tôi đã phải làm lại nhiều nhất của nó, đặc biệt là về định vị vv. Nếu chiều rộng là tắt cho style của bạn, bạn sẽ cần nhìn vào CSS này:

.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:95%;
margin-left: 0 10px;
height:100%;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
background: #000;
padding: 10px;
}

Và:

.mosaic-block {
position:relative;
overflow:hidden;
width:90%;
margin-left:15px;
padding-bottom: 10px;
}

Từ số các mục: tuyệt đối được sử dụng trên một trong những yếu tố con (và điều này là phải cho các lớp overlay để làm việc), width: 100% sẽ phá vỡ vùng chứa nội dung, không có cách nào thực sự nhận được xung quanh này, trừ khi bạn sử dụng một style cố định chiều rộng.

Sử dụng có nguy cơ riêng, và mong đợi phải chỉnh sửa CSS một chút để làm cho nó trông đẹp trên trang web của bạn.

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

Nguồn: xenforo.com​

 

[THB]

cái này nhớ có a cái addon rồi. dùng dễ hơn. để tìm thử còn ko.

 

[tuna]

cái này nhớ có a cái addon rồi. dùng dễ hơn. để tìm thử còn ko.

có ko bác, em thấy có add on này có phải ko nhỉ, nhưng tìm mãi chưa thấy ai đăng
https://www.xenforo.rocks/resources/quick-reply-for-guest-pro.2099/