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

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

实现方法为:打开 ~\themes\landscape\layout\layout.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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值