refactor: 文章详情页

app/index/controller/Article.php

@@ -20,8 +20,9 @@ class Article extends Common
         $param = request()->param([
             'pid',
             'cid',
-            'page/d' => 1,
-            'size/d' => 12,
+            'keywords' => null,
+            'page/d'   => 1,
+            'size/d'   => 12,
         ]);
 
         // 获取banner焦点图
@@ -55,7 +56,10 @@ class Article extends Common
                     'desc',
                     'image'
                 ])
+                ->withSearch(['title'], ['title' => $param['keywords']??null])
                 ->category($param['cid']??$categorys[0]['id'])
+                ->where('release_time', '<=', date('Y-m-d H:i:s'))
+                ->order(['sort' => 'asc', 'release_time' => 'desc', 'id' => 'desc'])
                 ->paginate([
                     'list_rows' => $param['size'],
                     'page'      => $param['page'],
@@ -71,6 +75,29 @@ class Article extends Common
      */
     public function detail()
     {
+        $id     = request()->param('id');
+        $detail = ArticleModel::withoutField([
+                'created_at',
+                'updated_at',
+                'deleted_at'
+            ])
+            ->bypk($id)
+            ->find();
+        View::assign('detail', $detail);
 
+        // 获取倒序或发布时间倒序3篇文章做为推荐文章
+        $recommends = ArticleModel::field([
+                'id',
+                'title',
+                'desc',
+                'image'
+            ])
+            ->where('id', '<>', $id)
+            ->order(['release_time' => 'desc', 'id' => 'desc'])
+            ->limit(3)
+            ->select();
+        View::assign('recommends', $recommends);
+
+        return View::fetch('detail');
     }
 }

app/index/lang/en-us.php

@@ -21,5 +21,15 @@ return [
         'faq'                   => 'FAQ',
         'faq_short_desc'        => 'What are you most concerned about',
         'faq_desc'              => 'Our customer support is available Manday to Friday 9am600pmAverage arswer time 24h',
+    ],
+    'article' => [
+        'detail_share'                 => 'SHARE',
+        'detail_leave_reply'           => 'Leave a Reply',
+        'detail_leave_reply_name'      => 'Name',
+        'detail_leave_reply_email'     => 'Email',
+        'detail_leave_reply_email_tip' => 'Your email address will not be pulished.',
+        'detail_leave_reply_comment'   => 'Comment',
+        'detail_leave_reply_submit'    => 'POST COMMENT',
+        'detail_recommend'             => 'Recommended for you',
     ]
 ];

app/index/lang/zh-cn.php

@@ -21,5 +21,15 @@ return [
         'faq'                   => '常见问题',
         'faq_short_desc'        => '回答您最关心的问题',
         'faq_desc'              => '客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内',
+    ],
+    'article' => [
+        'detail_share'                 => '分享',
+        'detail_leave_reply'           => '留言',
+        'detail_leave_reply_name'      => '名称',
+        'detail_leave_reply_email'     => '电子邮箱',
+        'detail_leave_reply_email_tip' => '您的电子邮件地址不会被公开',
+        'detail_leave_reply_comment'   => '留言',
+        'detail_leave_reply_submit'    => '提交留言',
+        'detail_recommend'             => '你可能还喜欢',
     ]
 ];

app/index/model/ArticleModel.php

@@ -20,18 +20,25 @@ class ArticleModel extends ArticleBaseModel
     // 语言范围查询
     public function scopeLanguage($query, $language)
     {
-        return $query->where('language_id', '=', $language);
+        $query->where('language_id', '=', $language);
     }
 
     // 首页推荐状态范围查询
     public function scopeRecommend($query, bool $stat = true)
     {
-        return $query->where('recommend', '=', (int)$stat);
+        $query->where('recommend', '=', (int)$stat);
     }
 
     // 文章分类范围查询
     public function scopeCategory($query, $category)
     {
-        return $query->where('category_id', '=', $category);
+        $query->where('category_id', '=', $category);
+    }
+
+    // 文章标题搜索器
+    public function searchTitleAttr($query, $value)
+    {
+        if (is_null($value)) return;
+        $query->where('title', 'like', "%$value%");
     }
 }

app/index/view/article/detail.html

@@ -0,0 +1,84 @@
+{extend name="public/base" /}
+{block name="title"}
+    {notempty name="detail.seo_title"}<title>{$detail.seo_title}</title>{else /}{__BLOCK__}{/notempty}
+{/block}
+{block name="seo"}
+    {notempty name="detail.seo_keywords"}
+    <meta name="keywords" content="{$detail.seo_keywords}" />
+    <meta name="description" content="{$detail.seo_desc}" />
+    {else /}
+    {__BLOCK__}
+    {/notempty}
+{/block}
+{block name="style"}
+<link rel="stylesheet" href="/static/index/css/articleDetail.css">
+{/block}
+{block name="main"}
+<div class="orico_Page_articleDetail">
+    <!--内容 -->
+    <div class="articleDetailMain">
+        <div class="atmleft">
+            <div class="blog_title">
+                <h2>{$detail.title}</h2>
+                <p>{$detail.desc}</p>
+            </div>
+            <!-- 文本渲染-->
+            <div class="blog_content">{$detail.content|raw}</div>
+        </div>
+        <div class="atmright">
+            <div class="blog_share">
+                <h3>{:lang('article.detail_share')}</h3>
+                <div class="share_list clearfix">
+                    <a class="atdit" target="_blank" href="https://weibo.com/">
+                        <img src="/static/index/images/share1.png" />
+                    </a>
+                    <a class="atdit">
+                        <img src="/static/index/images/share2.png" />
+                    </a>
+                    <a class="atdit" target="_blank" href="https://creator.xiaohongshu.com/login?redirectReason=401">
+                        <img src="/static/index/images/share3.png" />
+                    </a>
+                    <a class="atdit" href="javascript:shareCustomers();">
+                        <img src="/static/index/images/share4.png" />
+                    </a>
+                </div>
+            </div>
+            <div class="repply">
+                <h3>{:lang('article.detail_leave_reply')}</h3>
+                <form>
+                    <span>{:lang('article.detail_leave_reply_name')}</span>
+                    <input class="form-control itinp new_name" type="text" name="name" style="text-indent: 10px;">
+                    <span>{:lang('article.detail_leave_reply_email')}</span>
+                    <input class="form-control itinp new_email" type="email" name="email" style="text-indent: 10px; margin-bottom:0;">
+                    <p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.625rem;">{:lang('article.detail_leave_reply_email_tip')}</p>
+                    <span>{:lang('article.detail_leave_reply_comment')}</span>
+                    <textarea class="form-control itinp new_comment" rows="3" style="text-indent: 10px;width: 98%; margin-top: 0.625rem;margin-bottom: 0.625rem;border: 1px solid #DBDBDB;"name="comment"></textarea>
+                    <div class="comment_btn" style="color:#ffffff;">{:lang('article.detail_leave_reply_submit')}</div>
+                </form>
+            </div>
+        </div>
+    </div>
+    {notempty name="$recommends"}
+    <div class="xq">
+        <!-- 猜您喜欢 -->
+        <div class="love">
+            <div class="love1">
+                <p class="tt">{:lang('article.detail_recommend')}</p>
+                <p><img src="/static/index/images/1line.png" height="7"></p>
+            </div>
+            <ul class="love2">
+                {volist name="recommends" id="vo"}
+                <li>
+                    <a>
+                        <div class="lvimg"><img src="{$vo.image}"></div>
+                        <p class="lvtit">{$vo.title}</p>
+                    </a>
+                </li>
+                {/volist}
+                <div class="clear"></div>
+            </ul>
+        </div>
+    </div>
+    {/notempty}
+</div>
+{/block}

app/index/view/article/index.html

@@ -21,8 +21,10 @@
         </div>
         <!-- 搜索 -->
         <div class="categorySearch">
-            <i class="search_icon"></i>
-            <input type="text" placeholder="Search" class="search" id="article-search-in" value="">
+            <form action="{:url('article/index', ['pid' => $Request.param.pid])}" method="get">
+                <i class="search_icon"></i>
+                <input type="text" placeholder="Search" class="search" id="article-search-in" name="keywords" value="">
+            </form>
         </div>
         <!-- 切换内容 -->
         {notempty name="articles"}
@@ -30,7 +32,7 @@
             <div class="tbmain">
                 {volist name="articles" id="ar"}
                 <div class="Contenitem">
-                    <a>
+                    <a href="{:url('article/detail', ['id' => $ar.id])}">
                         <img src="{$ar.image}" />
                         <h3>{$ar.title}</h3>
                         <p>{$ar.desc}</p>
@@ -44,7 +46,4 @@
         {/notempty}
     </div>
 </div>
-{/block}
-{block name="script"}
-
 {/block}

public/static/index/css/articleDetail.css

@@ -1,7 +1,8 @@
 .orico_Page_articleDetail {
   width: 100%;
   position: relative;
-  height: 100vh;
+  min-height: 100vh;
+  padding: 3.75rem 0;
   overflow-y: auto;
   overflow-x: hidden;
   background: #f2f2f2;