使用PJAX实现Tipask全站无刷新。

昨天实现的功能。需要修改部分代码来达到要求。效果可以参见: https://www.hellojava.com/ 不过，有的文章页（文章内容为代码片段的）因为我做了定制了，会和无刷新冲突，所以那块排除了...

昨天实现的功能。

需要修改部分代码来达到要求。

效果可以参见:

https://www.hellojava.com/

不过，有的文章页（文章内容为代码片段的）因为我做了定制了，会和无刷新冲突，所以那块排除了。

想深入了解PJAX技术可以参照文章:https://www.hellojava.com/article/722

修改步骤如下:

第一步在主框架引入 jquery.pjax

在/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">

第三步，新增文章的PJAX模板

在/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::article.show"

将这个变量提取出来。加个判断。

$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();
});

文章结束。

其他页面比如标签页、个人主页啥的都需要像第二步、第三步那样处理。

步骤放这了，大家修改结果因个人水平而已，本站是实现了，如果你们实现不了，也不要怪我文章写的不好。当然本人支持收费人工帮助

发表于 2017-11-16 11:12
阅读 ( 14870 )
分类：二次开发