Hexo博客实现首页和子页面不同layout布局

69 阅读 0 评论 46 点赞

我是靠谱客的博主朴实雨，最近开发中收集的这篇文章主要介绍Hexo博客实现首页和子页面不同layout布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作成效果见我的个人网站：http://meiweiping.cn

实现方法为：打开 ~themeslandscapelayoutlayout.ejs

将里面的全部内容改为以下代码，将各<%- partial('_partial/ahead_links', null, {cache: !config.relative_link}) %>部分的呃呃内容改为自己的内容即可。

<%- partial('_partial/head') %>
<% if (is_post()){ %>
<body>
<% } %>
<% if (is_page()){ %>
<body>
<% } %>
<div id="container">
<div id="wrap">
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<div id="content" class="outer">
<% if (is_home()){ %>
<!-- 修改section "main"-->
<section id="main">
<table bgcolor=#eee style="vertical-align:top;"
width="100%">
<!-- last row margin -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=100% colspan="5" height=1px> &nbsp;&nbsp;
<br>
</tr>
<!-- 以下是新增的Google广告代码-->	<!-- 自定义宽度 -->
<style type="text/css">
.adslot_1 { min-width:320px; max-width:(column-width + gutter-width) * columns; width:100%; height: 100px; }
@media (min-width: 500px) { .adslot_1 { height: 60px; } }
@media (min-width: 800px) { .adslot_1 { height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-7390437336363898"
data-ad-slot="9075736497"</ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- Google广告代码结束-->
<!-- 0th row 顶部链接 -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=100% colspan="5" height=1 px>
<%- partial('_partial/ahead_links', null, {cache: !config.relative_link}) %>
</td>
</tr>
<!-- 1st row 趣味百科 and 最新博文 以及 右侧插件栏-->
<tr style="vertical-align:top;">
<!--
手动添加网站logo图片 -->
<td style="text-align:left; vertical-align: top;" top=0 width=38% height=1 px><%- partial('_partial/category_quweibaike', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align: top;" width=2% height=1 px>
</td>
<td style="text-align:left; vertical-align: top;" top=0 width=38% height=1 px><%- partial('_partial/recent_posts', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align: top;" width=2% height=1 px>
</td>
<!-- rowspan all for widgets 右侧插件栏-->
<td style="text-align: left; vertical-align: top;" width=20% rowspan="5" height=1 px>
<%- partial('_partial/google_search', null, {cache: !config.relative_link}) %>
<a href="http://phdmeiwp.github.io/%E7%85%A7%E7%89%87/"><img src='http://i2.muimg.com/567571/bfb9c2a6286f84c0.png' width=100%
title="欢迎点击访问图片墙" align=center></a>
<%- partial('_partial/broadcast', null, {cache: !config.relative_link}) %>
<br><a href="http://phdmeiwp.github.io/%E8%AE%BA%E6%96%87%E5%86%99%E4%BD%9C%E7%BB%8F%E9%AA%8C/"><img src="http://i2.muimg.com/588926/05d01559fbd9d081.png" align=center width=100% ></a>
<br><a href="http://phdmeiwp.github.io/%E6%9C%9F%E5%88%8A%E4%B8%8E%E6%8A%95%E7%A8%BF/"><img src="http://i2.muimg.com/588926/10e64af4270bda93.png" align=center width=100% ></a>
<br><a href="http://phdmeiwp.github.io/%E5%9F%BA%E9%87%91%E7%94%B3%E8%AF%B7/"><img src="http://i4.buimg.com/588926/9fc5f8fca84d3fc7.png" align=center width=100% ></a>
<br><br><a href="http://phdmeiwp.github.io/%E6%96%87%E5%8C%96%E4%BC%A0%E6%89%BF/"><img src="http://i1.piimg.com/588926/331d0e3905d037be.png" align=center width=100% ></a>
<br><a href="http://phdmeiwp.github.io/%E8%8A%B1%E9%B8%9F%E8%99%AB%E9%B1%BC%E7%99%BE%E7%A7%91/"><img src="http://i2.muimg.com/588926/ad726ab651d541b2.png" align=center width=100% ></a>
<br><a href="http://phdmeiwp.github.io/%E5%90%8D%E8%A8%80%E8%AD%A6%E5%8F%A5/"><img src="http://i2.muimg.com/588926/48d1316c5f6abfd5.png" align=center width=100% ></a>
<!-- 添加两张带二维码的banner图片 -->
<br><a href="http://phdmeiwp.github.io/"><img src="http://i4.buimg.com/588926/b529b549850f450a.png" align=center width=100% ></a>
<!-- 根据排版内容对齐看是否添加第二张图片
<br>
<br><a href="http://meiweiping.github.io/"><img src="http://i1.piimg.com/588926/ff4d7ec1701d4546.png" align=center width=100%></a>
-->
<%- partial('_partial/visitor_counter', null, {cache: !config.relative_link}) %>
</td>
</tr>
<!-- 2nd row 图片1 parts-->
<tr style="vertical-align:top;">
<td style="text-align:center; vertical-align:top;" width=78% colspan="3" height=1px>
<a href="http://PhDmeiwp.github.io/%E6%96%87%E5%8C%96%E4%BC%A0%E6%89%BF/"><img src="https://ooo.0o0.ooo/2017/05/29/592c164750c57.jpg" align=center width=100%></a>
</td>
</tr>
<!-- 3th row R语言 and statistic -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=38%　height=1 px><%- partial('_partial/category_Ryuyan', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align:top;" width=2% height=1 px>
</td>
<td style="text-align:left; vertical-align:top;" width=38% height=1 px><%- partial('_partial/category_statistic', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align:top;" width=2% height=1 px>
</tr>
<!-- 4th row isotope parts and article parts -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=38%　height=1 px><%- partial('_partial/category_isotope', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align:top;" width=2% height=1 px>
</td>
<td style="text-align:left; vertical-align:top;" width=38% height=1 px><%- partial('_partial/category_article', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align:top;" width=2% height=1 px>
</tr>
<!-- 5th row 科研工具 and 他山之石 parts -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=38%　height=1 px><%- partial('_partial/category_xiaogongju', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align:top;" width=2% height=1 px>
</td>
<td style="text-align:left; vertical-align:top;" width=38% height=1 px><%- partial('_partial/category_tashanzhishi', null, {cache: !config.relative_link}) %>
</td>
<td style="text-align:left; vertical-align:top;" width=2% height=1 px>
</tr>
<!-- 6nd row 图片2 parts-->
<tr style="vertical-align:top;">
<td style="text-align:center; vertical-align:top;" width=100% colspan="5" height=1 px>
<a href="https://meiweiping.github.io"><img src="https://ooo.0o0.ooo/2017/05/29/592c0f1832239.gif" align=center width=100%></a>
</td>
</tr>
<!-- 7rd row 底部友情链接 -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=100% colspan="5" height=1 px>
<%- partial('_partial/bottom_links', null, {cache: !config.relative_link}) %>
</td>
</tr>
<!-- last row margin -->
<tr style="vertical-align:top;">
<td style="text-align:left; vertical-align:top;" width=100% colspan="5" height=1px> &nbsp;&nbsp;
<br>
</tr>
</table>
</section>
<% } else {%>
<section id="main" style="float:none;"><%- body %></section>
<% } %>
</div>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
</div>
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
<%- partial('_partial/after-footer') %>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/3372900/blog/911534