昨天实现的功能。
需要修改部分代码来达到要求。
效果可以参见:
不过,有的文章页(文章内容为代码片段的)因为我做了定制了,会和无刷新冲突,所以那块排除了。
想深入了解PJAX技术可以参照文章:https://www.hellojava.com/article/722
修改步骤如下:
在/resouce/views/themes/default/layout/public.blade.php的最下面的jquery.js下加入代码
<script src="//cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script> <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script> <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
第一个是pjax的支持,下面两个是加载进度条,其实可以不需要,但是加上去打开页面的时候,地址下回出现一个进度条。
在 /resouce/views/themes/default/home/index.blade.php 搜索 @section('content') 然后在下面一行的
<div class="row mt-10">
里增加 id="container2"
使她成为
<div class="row mt-10" id="container2">
在/resouce/views/themes/default/article/下新增模板 show_pjax.blade.php.
内容为:
<div class="row mt-10" id="container2"> <div class="col-xs-12 col-md-9 main"> <div class="widget-question widget-article"> <h3 class="title">{{ $article->title }}</h3> @if($article->tags) <ul class="taglist-inline"> @foreach($article->tags as $tag) <li class="tagPopup"><a class="tag" href="{{ route('ask.tag.index',['id'=>$tag->id]) }}/articles">{{ $tag->name }}</a></li> @endforeach </ul> @endif <div class="content mt-10"> @if( strlen(trim($article->summary))>10 ) <div class="quote mb-20"> {{ $article->summary }} </div> @endif <div class="text-fmt page_container content1" id="content"> {!! $article->content !!} </div> <div class="post-opt mt-30"> <ul class="list-inline text-muted"> <li> <i class="fa fa-clock-o"></i> 发表于 {{ timestamp_format($article->created_at) }} </li> <li>阅读 ( {{$article->views}} )</li> @if($article->category) <li>分类:<a href="{{ route('website.blog',['category_slug'=>$article->category->slug]) }}" target="_blank">{{ $article->category->name }}</a> @endif </li> @if($article->status !== 2 && Auth()->check() && (Auth()->user()->id === $article->user_id || Auth()->user()->is('admin') ) ) <li><a href="{{ route('blog.article.edit',['id'=>$article->id]) }}" class="edit" data-toggle="tooltip" data-placement="right" title="" data-original-title="进一步完善文章内容"><i class="fa fa-edit"></i> 编辑</a></li> @endif </ul> </div> </div> <div class="text-center mt-10 mb-20"> <button id="support-button" class="btn btn-success btn-lg mr-5" data-source_id="{{ $article->id }}" data-source_type="article" data-support_num="{{ $article->supports }}">{{ $article->supports }} 推荐</button> @if($article->user->qrcode) <button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#payment-qrcode-modal-article-{{ $article->id }}" ><i class="fa fa-heart-o" aria-hidden="true"></i> 打赏</button> @endif @if(Auth()->check() && Auth()->user()->isCollected(get_class($article),$article->id)) <button id="collect-button" class="btn btn-default btn-lg" data-loading-text="加载中..." data-source_type = "article" data-source_id = "{{ $article->id }}" > 已收藏</button> @else <button id="collect-button" class="btn btn-default btn-lg" data-loading-text="加载中..." data-source_type = "article" data-source_id = "{{ $article->id }}" > 收藏</button> @endif </div> @if(Setting()->get('website_share_code')!='') <div class="mb-10"> {!! Setting()->get('website_share_code') !!} </div> @endif </div> <div class="widget-relation"> <div class="row"> <div class="col-md-6"> <h4>你可能感兴趣的文章</h4> <ul class="widget-links list-unstyled" id="intres"> @foreach($relatedArticles as $relatedArticle) @if($relatedArticle->id != $article->id) <li class="widget-links-item"> <a class="pjax" title="{{ $relatedArticle->title }}" href="{{ route('blog.article.detail',['article_id'=>$relatedArticle->id]) }}">{{ $relatedArticle->title }}</a> <small class="text-muted">{{ $relatedArticle->views }} 浏览</small> </li> @endif @endforeach </ul> </div> <div class="col-md-6"> <h4>相关问题</h4> <ul class="widget-links list-unstyled"> @foreach($relatedQuestions as $relatedQuestion) @if($relatedQuestion->id != $article->id) <li class="widget-links-item"> <a title="{{ $relatedQuestion->title }}" href="{{ route('ask.question.detail',['question_id'=>$relatedQuestion->id]) }}">{{ $relatedQuestion->title }}</a> <small class="text-muted">{{ $relatedQuestion->answers }} 回答</small> </li> @endif @endforeach </ul> </div> </div> </div> <div class="widget-answers mt-15"> <h2 class="h4 post-title">{{ $article->comments }} 条评论</h2> @include('theme::comment.collapse',['comment_source_type'=>'article','comment_source_id'=>$article->id,'hide_cancel'=>true]) </div> </div> <div class="col-xs-12 col-md-3 side"> <div class="widget-user"> <div class="media"> <a class="pull-left" href="{{ route('auth.space.index',['user_id'=>$article->user_id]) }}"><img class="media-object avatar-64" src="{{ get_user_avatar($article->user_id) }}" alt="不写代码的码农"></a> <div class="media-body "> <a href="{{ route('auth.space.index',['user_id'=>$article->user_id]) }}" class="media-heading">{{ $article->user->name }}</a> @if($article->user->title) <p class="text-muted">{{ $article->user->title }}</p> @endif <p class="text-muted">{{ $article->user->userData->articles }} 篇文章</p> </div> </div> </div> <div class="widget-box mt-30"> <h2 class="widget-box-title"> 作家榜 <a href="{{ route('auth.top.articles') }}" title="更多">?</a> </h2> <ol class="widget-top10"> @foreach($topUsers as $index => $topUser) <li class="text-muted"> <img class="avatar-32" src="{{ get_user_avatar($topUser['id'],'middle') }}"> <a href="{{ route('auth.space.index',['user_id'=>$topUser['id']]) }}" class="ellipsis">{{ $topUser['name'] }}</a> <span class="text-muted pull-right">{{ $topUser['articles'] }} 文章</span> </li> @endforeach </ol> </div> </div> </div> <script> document.title = '{{ $article->title }}'; </script>
因为我的模板有定制化数据,刚才去除了,这内容应该是和大家一样的只是去除了首尾而已。
/app/Http/Controllers/Blog/ArticleController.php
搜索:
将这个变量提取出来。加个判断。
$theme = "theme::article.show"; if($request->_pjax){ $theme = "theme::article.show_pjax"; }
将return那的代码改成
return view($theme )。。。。后面的一样
回到:/resouce/views/themes/default/layout/public.blade.php 在第一步的代码后面继续跟上
$('#container2').pjax('a")', '#container2'); $(document).on('pjax:start', NProgress.start).on('pjax:end', NProgress.done).on("pjax:timeout", function(event) { // 阻止超时导致链接跳转事件发生 event.preventDefault(); });
文章结束。
其他页面比如标签页、个人主页啥的都需要像第二步、第三步那样处理。
步骤放这了,大家修改结果因个人水平而已,本站是实现了,如果你们实现不了,也不要怪我文章写的不好。当然本人支持 收费人工帮助