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

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-30 09:12   28   0

作成效果见我的个人网站: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 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP