美文网首页
2019-06-14 Voyager 的介紹以及使用 (二) B

2019-06-14 Voyager 的介紹以及使用 (二) B

作者: zivhsiao | 来源:发表于2019-06-14 16:43 被阅读0次

Voyager 的介紹

相信各位同好已經玩過了,沒有玩過可以先看過我的第一篇 Voyager 的介紹以及使用 (一) 增加自己的印象

這一篇是針對沒有玩過的人而寫出來,增加自己與旁人的印象,希望大家有個基礎吧,裏面的 DB 沒有用過很高級的技巧,希望看過的同好給予指教

Laravel 剛開始的畫面

這是它原本的畫面,表示你的伺服器目前是運作的很好,現在要針對它來進行修改,找到樣板之後的修改,所需要的時間大概 10~20 分鐘就可以了

先找個樣板來用

從 ColorLib 去找,有蠻多的免費樣板,只是要保留它的 footer 建立的文字就可以使用,現在都以免費的爲主

Stuff: https://colorlib.com/wp/template/stuff/

樣板有了,只是需要做大幅度的修改才行,畢竟只有 Blog

這是 Stuff 樣板原本的樣子

前臺開始修改

一開始看直接去看 routes/web.php

原本是這個樣子,直接由 welcome 這個 view 爲主

Route::get('/', function(){

    return view('welcome');

});

我先用 php artisan 建立一個 Controller

php artisan make:controller HomeController

再來開啓 HomeController.php,在它的 class 底下建立如下

public function home(){

    return view('layouts.app');

}

先在 views 建立 layouts/app.blade.php

然後複製樣板的 index.html 進去

這時候可以看到它的畫面,是跟 Stuff 的畫面一樣

修改程式以及樣板

修改樣板變成這樣,把它的選單、文字以及大圖都拿掉

還有 css、fonts、images、js、sass 這些都複製到 public 底下

還有 layouts/app.blade.php 樣板裏面,只要是載入 css 以及 js 的部分,全部改爲載入 asset('載入的檔案')

就讓它單純只是 Blog

樣板的規劃

layouts/app.blade.php 是只要的樣板,其它都是依附它延伸出來的

詳細的看樣板如何做的

app.blade.php

blog/view.blade.php

layouts/app.blade.php

接着 Post 就有 5 篇文章,這 5 篇文章的內容是取自 [假文產生器 MoreText](http://more.handlino.com/)

這些不是讓大眾閱讀,而是亂數假文產生器去產生的內容,看排版的狀況

後端的 Post 的文章

修改 HomeController

把 HomeController 調整

use TCG\Voyager\Models\Post;

...

public function home(){

    $posts = Post::select('posts.*', 'categories.name', 'posts.id as post_id')

        ->join('categories', 'categories.id', '=', 'posts.category_id')

        ->where('posts.status', '=', 'PUBLISHED')->orderBy('posts.id', 'desc')->get();

    return view('app', ['posts' => $posts]);

}

他會出現如圖,感覺有點樣子了

建立一個 Blog 的 Controller 吧

直接輸入下方的指令

php artisan make:controller BlogController

這裏只是有個地方不一樣,因爲載入的資料只有一筆,所以會有不同的地方

public function home($id){

    $post = Post::join('categories', 'categories.id', '=', 'posts.category_id')

                ->where([['posts.status', 'PUBLISHED'], ['posts.id', $id]])->first();

    return view('blog.view', ['post' => $post]);

}

直接瀏覽器去測試,可以看到 Post 的標題、內容、圖檔、類別、日期等,看看是否列出來

然後 Developer Tools 可以列出來 Facebook 以及 Twitter 只要屬於分享的部分,直接就可以列出來的方式

這樣就完成了,如果還是不懂的話,可以參考我的 github

GitHub zivhsiao/laravel-blog

相关文章

  • 2019-06-14 Voyager 的介紹以及使用 (二) B

    Voyager 的介紹 相信各位同好已經玩過了,沒有玩過可以先看過我的第一篇 Voyager 的介紹以及使用 (一...

  • 2019-06-14 Voyager 的介紹以及使用 (一)

    Voyager 是什麼? Voyager 是一個管理界面,可以很輕易的為你的 app 建構 CRUD 功能,建構不...

  • 不止自我介紹,也是內心讀白

    心靈自由寫作第二篇之“自我介紹” 今天的寫作主題是“自我介紹”,回想起對自己的過往介紹,往往是比较简单,现在一个人...

  • 自我介紹

    中心主題是我的名字:「傳」送紙飛機,來「測」(徹)量飛的高度。 兩旁的主幹分別介紹我的家庭、我的出家和學歷簡介、工...

  • node介紹

    1、node介紹node.js是一个基于chromeV8引擎的javascript,运行时。nodejs使用高效、...

  • 自己紹介

    初めまして、私は藩詩こうと申します。 今は東レでエアクリニング事業部門に配属され、空気清浄機フィルタとろ材の営業を...

  • 自我介紹

    姓寧名紅,字如心,號恕閣主人。 中共党員,1996年加入中國共產黨; 法學學士,1998年畢業於蘇州大學法學院,師...

  • 27 紹介

    27、紹介 上司の紹介(初対面の者同士は名刺交換) 大洋商事の応接室で 太田:失礼致します。伊藤:お待ちしておりま...

  • 梅花易數: a Type Thoeretical Descrip

    本文簡單介紹了梅花易數,它是這樣形式的數 [a,b,c,d], 其中 a:1-8, b: 1-8, 而(c,d) ...

  • 硕士英语课后翻译(unit 4 text B)

    4-b-1 At the foot of these fairy mountains, the voyager m...

网友评论

      本文标题:2019-06-14 Voyager 的介紹以及使用 (二) B

      本文链接:https://www.haomeiwen.com/subject/ggupfctx.html