1，编辑 App\Http\Controllers\Index\ArticleController.php
<?php namespace App\Http\Controllers\Index; use App\Models\Admin\Article; class ArticleController extends BaseController { public function index(int $id){ Article::where('id',$id)->increment('click');//展示 页面一次,点击量就+1,前台模板用{{$artInfo->click}}来调用 $artInfo = Article::find($id); $cateId = $artInfo->cate_id;//栏目ID赋值给cateId，让文章页的当前左侧栏也高亮显示 return view('Index.article.article',compact('artInfo','cateId')); } }
2，文章页模板 \resources\views\Index\Article\article.blade.php 代码如下，主要编辑了 调用代码【注：文章内容调用不能用 {{$artInfo->content}} 这样页面显示内容时会把html源码原样输出，无法正常阅览内容。需用 {!!$artInfo->content!!}来输出转译后的文章内容】
<html lang="zh-CN" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>{{$artInfo->title}}</title> <meta name="robots" content="noindex,follow"> <link rel="stylesheet" id="wp-block-library-css" href="{{asset('static')}}/index/css/style.min.css?ver=5.2.3" type="text/css" media="all"> <link rel="stylesheet" id="zimeiti-2-style-css" href="{{asset('static')}}/index/css/style.css?ver=20200113" type="text/css" media="all"> <link rel="stylesheet" id="genericons-style-css" href="{{asset('static')}}/index/css/genericons.css?ver=5.2.3" type="text/css" media="all"> <link rel="stylesheet" id="zimeiti-2-responsive-style-css" href="{{asset('static')}}/index/css/responsive.css?ver=20200113" type="text/css" media="all"> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/simple-likes-public.js?ver=0.5"></script> <link rel="https://api.w.org/" href="https://www.zhutibaba.com/demo/zimeiti2/wp-json/"> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.zhutibaba.com/demo/zimeiti2/xmlrpc.php?rsd"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.zhutibaba.com/demo/zimeiti2/wp-includes/wlwmanifest.xml"> <link rel="prev" title="在WordPress网站写的第一篇文章" href="https://www.zhutibaba.com/demo/zimeiti2/292.html"> <link rel="next" title="海拔3800米的越野天堂" href="https://www.zhutibaba.com/demo/zimeiti2/90.html"> <link rel="canonical" href="https://www.zhutibaba.com/demo/zimeiti2/87.html"> <link rel="shortlink" href="https://www.zhutibaba.com/demo/zimeiti2/?p=87"> <link rel="alternate" type="application/json+oembed" href="https://www.zhutibaba.com/demo/zimeiti2/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.zhutibaba.com%2Fdemo%2Fzimeiti2%2F87.html"> <link rel="alternate" type="text/xml+oembed" href="https://www.zhutibaba.com/demo/zimeiti2/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.zhutibaba.com%2Fdemo%2Fzimeiti2%2F87.html&format=xml"> <link rel="pingback" href="https://www.zhutibaba.com/demo/zimeiti2/xmlrpc.php"> <style type="text/css" id="wp-custom-css"> .bx-wrapper .bx-controls-direction a, .bx-wrapper .bx-pager { z-index: 90; } </style> <style type="text/css"> /* Theme Colors */ /* Primary Color */ a:hover, .sf-menu li.sfHover li a:hover, .sidebar .widget a:hover, .site-footer .widget a:hover, .author-box a:hover, .page-content a:hover, .entry-content a:hover, article.hentry .edit-link a:hover, .comment-content a:hover, .entry-meta a:hover, .entry-title a:hover, .content-list .entry-title a:hover, .pagination .page-numbers:hover, .pagination .page-numbers.current, #site-bottom a:hover, .tab-titles li.active a, .entry-category a:after, .author-box .author-meta .author-name a:hover, #featured-grid h2.section-title span { color: #ff4c4c; } h2.section-title .title, .breadcrumbs h1 span.title, .tab-titles li.active a, .pagination .page-numbers:hover, .pagination .page-numbers.current, .sidebar .widget .widget-title span, #featured-grid h2.section-title span { border-bottom-color: #ff4c4c; } button, .btn, input[type="submit"], input[type="reset"], input[type="button"], .sf-menu li a:hover, .sf-menu li.sfHover a, .entry-category a, .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background-color: #ff4c4c; } @media only screen and (max-width: 767px) { #primary-nav { background-color: #ff4c4c; } } /* Secondary Color */ .site-header .search-icon:hover span, .site-header .search-icon:hover span:before, article.hentry .edit-link a, .author-box a, .page-content a, .entry-content a, .comment-author a, .comment-content a, .comment-reply-title small a:hover, .sidebar .widget a, .site-footer .widget a { color: #037ef3; } /* Tertiary Color */ #featured-grid .entry-like a.liked, h2.section-title .posts-counter strong, .popular-content .entry-meta .entry-like a.liked, .content-list .entry-meta.second-line .entry-like a.liked, .related-content .entry-meta .entry-like a.liked, .entry-tags .tag-links a, .widget_tag_cloud .tagcloud a { color: #76b852 !important; } .single #primary .entry-footer .entry-like a { background-color: #76b852; } .entry-tags .tag-links a, .widget_tag_cloud .tagcloud a { border-color: #76b852 !important; } </style> </head> <body class="post-template-default single single-post postid-87 single-format-standard wp-custom-logo"> <div id="page" class="site"> <div id="content" class="site-content container clear"> @include('Index.Layout.left') <!-- .left-col --> <div id="primary" class="content-area"> <div class="content-wrapper"> <main id="main" class="site-main"> <article id="post-87" class="post-87 post type-post status-publish format-standard has-post-thumbnail hentry category-sports category-sub-1 category-sub-3 category-sub-2 category-house category-edu category-news category-travel category-auto category-tech category-food category-finance tag-25 tag-26 tag-27"> <div class="single-breadcrumbs"> <span>您的位置</span> <i class="fa fa-angle-right"></i> <a href="{{route('index.index.index')}}">首页</a> <i class="fa fa-angle-right"> > </i> <a href="{{route('index.cate.index',$artInfo['cate_id'])}}">{{$artInfo->cate['cate_name']}}</a> </div> <header class="entry-header"> <h1 class="entry-title">{{$artInfo->title}}</h1> <div class="entry-meta"> <span class="entry-date"> 发布于 {{substr($artInfo->created_at,0,10)}} </span><!-- .entry-date --> {{--<span class="entry-comment"><a href="" class="comments-link">评论(3)</a></span>--}} <span class="entry-views">阅读<span class="view-count">({{$artInfo->click}})</span> </span> </div><!-- .entry-meta --> </header><!-- .entry-header --> <div class="entry-content"> {!!$artInfo->content!!} </div><!-- .entry-content --> <div class="entry-footer clear"> {{--<div class="entry-tags">--}} {{--<span class="tag-links"><span>标签:</span> <a href="https://www.zhutibaba.com/demo/zimeiti2/tag/%e6%a0%87%e7%ad%be1" rel="tag">标签1</a> <a href="https://www.zhutibaba.com/demo/zimeiti2/tag/%e6%a0%87%e7%ad%be2" rel="tag">标签2</a> <a href="https://www.zhutibaba.com/demo/zimeiti2/tag/%e6%a0%87%e7%ad%be3" rel="tag">标签3</a></span>--}} {{--</div><!-- .entry-tags -->--}} <!-- The Modal --> {{--<div id="myModal" class="modal">--}} {{--<!-- Modal content -->--}} {{--<div class="modal-content clear">--}} {{--<h3>给这篇文章的作者打赏</h3>--}} {{--<div class="ht_grid_1_2_custom">--}} {{--<img src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/img/weixin-code.png" alt="微信扫一扫打赏">--}} {{--微信扫一扫打赏--}} {{--</div>--}} {{--<div class="ht_grid_1_2_custom">--}} {{--<img src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/img/alipay-code.png" alt="微信扫一扫打赏">--}} {{--支付宝扫一扫打赏--}} {{--</div>--}} {{--<span class="close">×</span>--}} {{--</div>--}} {{--</div>--}} {{--<div class="entry-footer-right">--}} {{--<span class="entry-sponsor">--}} {{--<span id="myBtn" href="#"><i class="fa fa-jpy"></i> 打赏</span>--}} {{--</span>--}} {{--<span class="entry-like">--}} {{--<span class="sl-wrapper"><a href="https://www.zhutibaba.com/demo/zimeiti2/wp-admin/admin-ajax.php?action=process_simple_like&post_id=87&nonce=178f7d1a83&is_comment=0&disabled=true" class="sl-button sl-button-87" data-nonce="178f7d1a83" data-post-id="87" data-iscomment="0" title="点赞这篇文章"><span class="sl-count"><i class="fa fa-thumbs-o-up"></i> 点赞(79)</span></a><span class="sl-loader"></span></span> </span><!-- .entry-like -->--}} {{--</div>--}} </div><!-- .entry-footer --> </article><!-- #post-## --> <!-- .author-box --> <!-- .related-content --> <div class="popular-content entry-related"> <h2 class="section-title">热门文章</h2> <div class="popular-loop"> @foreach($artRes as $key => $hot) <div class="hentry"> <h2 class="entry-title"><span class="post-num num-{{$key+1}}">{{$key+1}}</span><a href="{{route('index.article.index',array('id'=>$hot['id']))}}">{{$hot->title}}</a></h2> <div class="entry-meta"> <span class="entry-views">阅读<span class="view-count">({{$hot->click}})</span> </span> </div> </div><!-- .hentry --> @endforeach </div><!-- .popular-loop --> </div><!-- .popular-content --> <!-- #comments --> </main><!-- #main --> </div><!-- .content-wrapper --> </div><!-- #primary --> <aside id="secondary" class="widget-area sidebar"> <div id="search-2" class="widget widget_search"><form id="searchform" method="get" action="https://www.zhutibaba.com/demo/zimeiti2/"> <input type="search" name="s" class="search-input" placeholder="请输入关键词" autocomplete="off"> <button type="submit" class="search-submit">搜索</button> </form></div> @include('Index.Layout.right') </aside><!-- #secondary --> </div><!-- #content .site-content --> <!-- .container --> </div><!-- #page --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?adffbbfa4c220a656094574941c145dc"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/superfish.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/jquery.slicknav.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/modernizr.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/html5.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/jquery.bxslider.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/qrcode.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/social-share.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-content/themes/zimeiti-2/assets/js/jquery.custom.js?ver=20180615"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-includes/js/comment-reply.min.js?ver=5.2.3"></script> <script type="text/javascript" src="https://www.zhutibaba.com/demo/zimeiti2/wp-includes/js/wp-embed.min.js?ver=5.2.3"></script> <div id="back-top" style="display: none;"> <a href="#top" title="返回顶部"><span class="genericon genericon-collapse"></span></a> </div> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; /*-----------------------------------------------------------------------------------*/ /* Slick Mobile Menu /*-----------------------------------------------------------------------------------*/ $('#primary-menu').slicknav({ prependTo: '#slick-mobile-menu', allowParentLinks: true, label: '导航' }); }); })(jQuery); </script> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <!-- WP Super Cache: 已禁用已知用户的缓存。 用户已登录或已找到cookie。 --> </body></html>
END