[blog]
Tiếp theo bài 3 chúng ta sẽ lấy bài viết hiển thị ra ngoài trang chủ như hình dưới, bài viết dạng lưới 2 cột như hình dưới. Bài 1 - Bài 2 các bạn xem dưới phần liên quan nhé.
Đầu tiên các bạn viết cho mình vài bài trong blog để chúng ta có bài để test nhé. Bao gồm cả bài viết có hình ảnh và không có hình ảnh.
Viết xong rồi thì các bạn vô HTML tìm chỗ thẻ H1 - Hello World và thêm cho mình đoạn HTML dưới
Sau khi thêm chúng ta được như hình dưới
Tiếp theo bạn tìm xóa đoạn này đi nhé
Sau đó lưu lại và F5 để load lại HTML và xem blog trên trình duyệt xem có nó hiển thị nội dung chưa, nếu có là bạn thành công rồi đó, còn chưa thì chắc chắn là không có trường hợp chưa :D
Sau khi bạn load lại HTML thì nó tự động thêm tiện ích Blog, đây chính là cái mà để nó đọc, load bài viết ra nhé, chức năng của nó là search, xem bài, xem label, xem trang...
Trong bố cục sẽ hiển thị tiện ích Blog
Và bài viết load ra ngoài trang chủ nó rất dài nên chúng ta cần viết lại HTML của nó như hình dưới.
Đầu tiên các bạn thêm một chút CSS vào trong thẻ <b:skin>
CSS
Tiếp bạn bạn nhấn CTRL + F tìm postCommentsAndAd như hình dưới, nó sẽ có 2 chỗ, các bạn tìm vị trí thứ 2 như hình nha
Bên trong nó sẽ như này
Các bạn sẽ thấy thẻ <article> .. </article> bên trong nó chứa thẻ <b:include data='post' name='post'/>
Sau đó bạn xóa hết <article> .. </article> từ thẻ mở tới thẻ đóng và thay bằng đoạn HTML sau
Sau đó bạn lưu lại, và view web lên để xem thành quả.
Giải thích đoạn HTML trên như sau
Rồi quay lại vấn đề chính là bài viết, nó bị lệch sang cả Siderbar bên phải thì các bạn nhấn CTRL + F tìm blog-posts hfeed container và xóa class container đi nhé.
Thẻ container này blog nó mặc định tạo ra và bị đụng với conteiner của Boostrap nên cần xóa đi. Sau đó bạn lưu lại và xem kết quả.
Tiếp theo chúng ta tiên hành điền lữ liệu vô đoạn HTML chúng ta vừa thêm, vì nó chỉ là tĩnh chưa có auto lấy bài.
Bây giờ các bạn cứ nhìn bảng dữ liệu của mình và điền vô thôi
Lấy link bài viết : <data:post.url/> cách điền vô thẻ a như sau expr:href = 'data:post.url'
Lấy tiêu đề bài viết: <data:post.title/> các điền vô thẻ title, alt như sau expr:title = 'data:post.title' hoặc thẻ alt expr:alt= 'data:post.title'
Lấy ngày: <data:post.date.day/>
Lấy tháng: <data:post.date.month/>
Lấy năm: <data:post.date.year/>
Lấy nguyên một chuỗi ngày / tháng / năm : <b:eval expr='data:post.date format "dd/MM/yyyy" ' />
Lấy thumb: Nếu có thumb thì hiện ngược lại hiển No-thumb
Hình thum có kích thước 400 x 200 nên mình để nó auto size luôn nhé, cắt hình 400px tỉ lệ 2:1
<b:if cond='data:post.featuredImage'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage resizeImage 400 resizeImage "2:1"' />
</a>
<b:else />
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUW1TTsVt9TL0M05k4LZW-8JKKi92Ass-7ieqLHicctUoOLFYkEYzBJgu3-WaO7zYYjEAlqP9JITN4tYe-ppqIzjKc_-nbomvNSeolZLP36Q4B-Wh6OaZNFF5GmfNqPoodu_hJTKaPWOCL/w400-h200-p-k-no-nu/safe_image.png' />
</a>
</b:if>
Cắt đoạn mô tả (150 là ký tự cần cắt, ngắn - dài bạn tự chỉnh)
<b:eval expr='data:post.body snippet {length: 150, links: false, linebreaks: false}'/>
Có đầy đủ thông tin data các bạn điền vô thôi nào.
Kết quả sau khi điền xong thẻ data
Tới đây tức là blog đã hoàn thiện đầy đủ chức năng rồi đó: Xem bài, search bài, Page, tìm kiếm... Các bạn test thử các trang và cảm nhận.
Tiếp theo chỉnh CSS cho đẹp tiêu đề nhé, mình cắt tiêu đề làm 2 hàng, nếu tiêu đề dài hơn 2 hàng thì thay bằng dấu 3 chấm nhé.
Bây giờ mình đổi lại thẻ tiêu đề cho bài viết, nó đang là H5 mình đổi lại thành H3, cả CSS nữa. Để cho nó chuẩn tý :D mất công họ cười
Sau đó tìm .blog-grid .blog-info h3
CSS tiêu đề và sửa như sau
Bây giờ thì nó đều và đẹp hơn trước, bạn check cả mobile và ipad, rất tuyệt rồi đó.
Xong bài 3 chờ tiếp các bài sau...
[/blog]
Tiếp theo bài 3 chúng ta sẽ lấy bài viết hiển thị ra ngoài trang chủ như hình dưới, bài viết dạng lưới 2 cột như hình dưới. Bài 1 - Bài 2 các bạn xem dưới phần liên quan nhé.
Đầu tiên các bạn viết cho mình vài bài trong blog để chúng ta có bài để test nhé. Bao gồm cả bài viết có hình ảnh và không có hình ảnh.
Viết xong rồi thì các bạn vô HTML tìm chỗ thẻ H1 - Hello World và thêm cho mình đoạn HTML dưới
<div class='row'> <b:section class='content-area' id='main' showaddelement='true'> <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='2' visible='true'></b:widget> </b:section> </div>
Sau khi thêm chúng ta được như hình dưới
Tiếp theo bạn tìm xóa đoạn này đi nhé
Sau đó lưu lại và F5 để load lại HTML và xem blog trên trình duyệt xem có nó hiển thị nội dung chưa, nếu có là bạn thành công rồi đó, còn chưa thì chắc chắn là không có trường hợp chưa :D
Sau khi bạn load lại HTML thì nó tự động thêm tiện ích Blog, đây chính là cái mà để nó đọc, load bài viết ra nhé, chức năng của nó là search, xem bài, xem label, xem trang...
Trong bố cục sẽ hiển thị tiện ích Blog
Và bài viết load ra ngoài trang chủ nó rất dài nên chúng ta cần viết lại HTML của nó như hình dưới.
Đầu tiên các bạn thêm một chút CSS vào trong thẻ <b:skin>
CSS
/*blog css */
.blog-grid{box-shadow:0 0 30px rgba(31,45,61,0.125);border-radius:5px;overflow:hidden;background:#ffffff;margin-top:15px;margin-bottom:15px}
.blog-grid .blog-img{position:relative}
.blog-grid .blog-img .date{position:absolute;background:#fc5356;color:#ffffff;padding:8px 15px;left:10px;top:10px;border-radius:4px}
.blog-grid .blog-img .date span{font-size:22px;display:block;line-height:22px;font-weight:700}
.blog-grid .blog-img .date label{font-size:14px;margin:0}
.blog-grid .blog-info{padding:20px}
.blog-grid .blog-info h5{font-size:22px;font-weight:700;margin:0 0 10px}
.blog-grid .blog-info h5 a{color:#20247b}
.blog-grid .blog-info p{margin:0}
.blog-grid .blog-info .btn-bar{margin-top:20px}
Tiếp bạn bạn nhấn CTRL + F tìm postCommentsAndAd như hình dưới, nó sẽ có 2 chỗ, các bạn tìm vị trí thứ 2 như hình nha
Bên trong nó sẽ như này
Các bạn sẽ thấy thẻ <article> .. </article> bên trong nó chứa thẻ <b:include data='post' name='post'/>
Sau đó bạn xóa hết <article> .. </article> từ thẻ mở tới thẻ đóng và thay bằng đoạn HTML sau
<b:if cond='data:view.isMultipleItems'> <div class="col-sm-6"> <div class="blog-grid"> <div class="blog-img"> <div class="date"> <span> 04 </span> <label> FEB </label> </div> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkpcdgX3tKvTjH7QxYbMA751yoLEZ4_wogDZeKMruj9AEQAgZEQBqbp78UlXWucRCRpZNEaAIjfAVWTopsfJ8I-Aq23MvK-2RwPe-abmMf__U2XO2nfphO_bt3PHnco-Q8pcRjLaIb7ub7/s1600/Untitled.png" title="" alt="" /> </a> </div> <div class="blog-info"> <h5> <a href="#"> Prevent 75% of visitors from google analytics </a> </h5> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <div class="btn-bar"> <a href="#" class="px-btn-arrow"> <span> Read More </span> <i class="arrow"> </i> </a> </div> </div> </div> </div> <b:else /> <article class='post-outer-container'> <!-- Post title and body --> <div class='post-outer'> <b:include data='post' name='post' /> </div> <!-- Comments --> <b:include cond='data:view.isSingleItem' data='post' name='commentPicker' /> <!-- Show ad inside post container, after comments, if single item. --> <b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd' /> </article> </b:if>
Sau đó bạn lưu lại, và view web lên để xem thành quả.
Giải thích đoạn HTML trên như sau
<b:if cond='data:view.isMultipleItems'> Bài viết ở Trang chủ, search, search label, search tìm kiếm, MultipleItems bài viết <b:else /> Mặc định của nó là đoạn <article>...</article > </b:if>
Rồi quay lại vấn đề chính là bài viết, nó bị lệch sang cả Siderbar bên phải thì các bạn nhấn CTRL + F tìm blog-posts hfeed container và xóa class container đi nhé.
Thẻ container này blog nó mặc định tạo ra và bị đụng với conteiner của Boostrap nên cần xóa đi. Sau đó bạn lưu lại và xem kết quả.
Tiếp theo chúng ta tiên hành điền lữ liệu vô đoạn HTML chúng ta vừa thêm, vì nó chỉ là tĩnh chưa có auto lấy bài.
Bây giờ các bạn cứ nhìn bảng dữ liệu của mình và điền vô thôi
Lấy link bài viết : <data:post.url/> cách điền vô thẻ a như sau expr:href = 'data:post.url'
Lấy tiêu đề bài viết: <data:post.title/> các điền vô thẻ title, alt như sau expr:title = 'data:post.title' hoặc thẻ alt expr:alt= 'data:post.title'
Lấy ngày: <data:post.date.day/>
Lấy tháng: <data:post.date.month/>
Lấy năm: <data:post.date.year/>
Lấy nguyên một chuỗi ngày / tháng / năm : <b:eval expr='data:post.date format "dd/MM/yyyy" ' />
Lấy thumb: Nếu có thumb thì hiện ngược lại hiển No-thumb
Hình thum có kích thước 400 x 200 nên mình để nó auto size luôn nhé, cắt hình 400px tỉ lệ 2:1
<b:if cond='data:post.featuredImage'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage resizeImage 400 resizeImage "2:1"' />
</a>
<b:else />
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUW1TTsVt9TL0M05k4LZW-8JKKi92Ass-7ieqLHicctUoOLFYkEYzBJgu3-WaO7zYYjEAlqP9JITN4tYe-ppqIzjKc_-nbomvNSeolZLP36Q4B-Wh6OaZNFF5GmfNqPoodu_hJTKaPWOCL/w400-h200-p-k-no-nu/safe_image.png' />
</a>
</b:if>
Cắt đoạn mô tả (150 là ký tự cần cắt, ngắn - dài bạn tự chỉnh)
<b:eval expr='data:post.body snippet {length: 150, links: false, linebreaks: false}'/>
Có đầy đủ thông tin data các bạn điền vô thôi nào.
Kết quả sau khi điền xong thẻ data
Tới đây tức là blog đã hoàn thiện đầy đủ chức năng rồi đó: Xem bài, search bài, Page, tìm kiếm... Các bạn test thử các trang và cảm nhận.
Tiếp theo chỉnh CSS cho đẹp tiêu đề nhé, mình cắt tiêu đề làm 2 hàng, nếu tiêu đề dài hơn 2 hàng thì thay bằng dấu 3 chấm nhé.
Bây giờ mình đổi lại thẻ tiêu đề cho bài viết, nó đang là H5 mình đổi lại thành H3, cả CSS nữa. Để cho nó chuẩn tý :D mất công họ cười
Sau đó tìm .blog-grid .blog-info h3
CSS tiêu đề và sửa như sau
.blog-grid .blog-info h3 {
font-size: 22px;
font-weight: 700;
margin: 0 0 10px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 25px;
-webkit-line-clamp: 2;
height: 50px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
Bây giờ thì nó đều và đẹp hơn trước, bạn check cả mobile và ipad, rất tuyệt rồi đó.
Xong bài 3 chờ tiếp các bài sau...
[/blog]