如何自定义Jimdo模板(十一) - 利用Content-ID设计出不同的编辑区布局

      由于自身的限制,Jimdo网站的页面布局,一旦确定下来以后,所有页面都是一样的。给人的感觉是比较呆板,缺少变化。曾经探讨过 乾坤大挪移 - Jimdo元素的绝对定位,那主要是为侧栏加些内容,或者为一些特殊的元素进行定位,总体来说,主编辑区 “Content” 还是完全一样的。本文讨论一下,如何利用 Content-ID 的不同,做出不同的 Content 页面。

      Jimdo 网站所以缺少变化,是因为它只有一个CSS布局文件,造成所有的页面都是千篇一律的版面。对于文本或图文混排的页面,或者是使用HTML代码的页面,我们在 Jimdo网站的美化 - Jimdo博客内容的排版 中已经做过讨论,可以通过一定的代码,重新排版。而对于“博客显示”、“闪客电影”、“RSS Feed”等添加的Jimdo元素,我们在CSS里对 “Content” 设计好宽度以后,它们只能以整个版面的宽度显示出来。受诸葛草帽 利用jimdo自带"博客显示"功能实现"最近更新"功能及其修饰美化 一文的启发,对Jimdo网站的源码进行分析,发现每个页面的 Contentr ID 都是不同的。这就是说,它为我们为不同的页面设计不同的效果,提供了条件,具体做法是在CSS对这些页面分别进行设计。

      通过分析与实验证明,以上的想法是可以实现的,感兴趣的朋友可以看一下本站首页、留言页面以及其他页面。虽然首页仍然添加了“博客显示“,但我们照样可以把它改成三栏结构;而留言页面,我只是试着加了个背景色。

      下面以本站首页为例,简单地介绍一下方法。

      首先,在未登录或浏览状态下查看页面源码,我们先查找"div id="content",在它的下方,可以看到<div id="cc-matrix-445394204"> ,它就是这个 Content 的ID。经观察,Jimdo网站上,它的形式都是一样的,每个页面只是数字不同。 

      知道了 Content-ID,我们就可以在CSS里对它进行单独的设计了。比如要加个背景色或背景图片的话,则可以添加如下代码:

#cc-matrix-445394204 {background:#f00;}   /* 红色背景 */

#cc-matrix-445394204 {background:url(bg.jpg) repeat-y;}  /* 用一个名字为bg.jpg的图片实现上下方向上的背景平铺 */

      我们感兴趣的当然不仅仅是加个背景色或背景图片,更主要的是布局的变化。我在首页所做的更改是,把主编辑区向中间推,左部留出一个区域当左侧栏。我的实际代码是:

#cc-matrix-445394204 {padding-left:255px;}

      这样,中间一栏是可以在页面上直接编辑的,我仍然加的“博客显示”,和右侧栏一样,它也是直接调用最近博文,而左侧栏空出的255px的区域,它是无法在页面上直接编辑的,这时候就用到了曾经介绍过的 乾坤大挪移 - Jimdo元素的绝对定位 ,只要是HTML代码,都可以用它将内容加到左侧栏上去。

      有的朋友可能会说,用这种方法,数百数千的页面,不是把人累死?其实,我们也没有必要对所有的页面都这样去设置,只要对关键的一些页面改一下就可以了,而且左侧栏放些广告什么的,很方便。对博客网站来说,可以改一下首页、主要的导航页面,同时,这些设置代码是可以共用的,只要在ID之间加“逗号”即可,并不会很复杂。

      本文只是初步的探索,起个抛砖引玉的作用吧,供感兴趣的朋友继续研究。

Write a comment

Comments: 29
  • #1

    138photo (Monday, 18 October 2010 02:16)

    打开就有惊艳的感觉 抢个沙发慢慢看 看来不用换JIMDO了

  • #2

    网上邻居 (Monday, 18 October 2010 02:25)

    138photo:你好!
    这么晚了还来光顾,谢谢!呵呵,也是夜猫子哦。

  • #3

    网型网秀 (Monday, 18 October 2010 05:45)

    半夜醒来,前来观望。
    其实可以利用Body的ID,这样页面的所有属性都可以单独编辑咯。CSS中加入代码,行如:“#page数字 #id(或.class){代码}”

  • #4

    网上邻居 (Monday, 18 October 2010 07:42)

    网型网秀:
    嗯,本文探讨的是利用“content”(主编辑区)ID的不同,设计出不同的“content”。Body是整个页面,如果利用它的ID不同进行设计的话...哇,那样不得了,不是整个页面都颠覆了?找时间试试。

  • #5

    诸葛草帽 (Monday, 18 October 2010 11:46)

    厉害!呵呵,过来一看,耳目一新!

  • #6

    网型网秀 (Monday, 18 October 2010 12:03)

    邻居快点行动哟!等我回来的话,这场革命就是我发动了噢,呵呵

  • #7

    网上邻居 (Monday, 18 October 2010 19:55)

    诸葛草帽:
    本文是看了你的文章受到点启发,做了个简单试验,抛砖引玉,期待诸葛草帽有更多的发现!

  • #8

    网上邻居 (Monday, 18 October 2010 20:11)

    网型网秀:
    生活是生活,网络也是生活的一部分。期待早日回归,虽然Jimdo不代码网络的全部,更不代表生活的全部...

  • #9

    138photo (Monday, 18 October 2010 20:26)

    期待期待,我们受益了.我是忙于生计,整天想着怎么做排名,到处做广告,都没心思研究这个.哎..

  • #10

    淘宝600家园 (Monday, 18 October 2010 21:05)

    呵呵,不错哦~~~~

  • #11

    Suitear (Tuesday, 19 October 2010 01:54)

    手写!永远赶不上功能的开放,动态的迅速生成,当然了这也是进步!

  • #12

    Suitear (Tuesday, 19 October 2010 02:16)

    好吧,光记得打击你,忘了给你提示,现在才发现?由于变量分为C和S两部分,动态生成,所以就是你已经发现了,每一个编辑区是有着不同的ID,那么请注意,每一个页面都有page-id,默认使用class类的定义,当你使用page的id声明,什么情况自己琢磨,虽然你说了,不用每个页面都搞。可是也挺累的了!不过我已经确定搞一个Jimdo手工站!

  • #13

    Suitear (Tuesday, 19 October 2010 02:20)

    再补充,S不变,你比我懂!

  • #14

    网上邻居 (Tuesday, 19 October 2010 20:39)

    138photo:你好!
    古人说:“玩人丧德,玩物丧志。”如果不是专业做网站, 业余时间来玩玩这个Jimdo,还是不错的。毕竟生活是第一,玩是第二,或者更往后排。我也是有空才来学习、摸索这个Jimdo,权当打发时光...说白了,玩心太大。

  • #15

    网上邻居 (Tuesday, 19 October 2010 21:11)

    Suitear:
    很喜欢你这种坦率的性格,在这里说什么都没关系,不存在打击不打击的问题。
    用过Jimdo的人可能都会发现,Jimdo这个平台,有很多别人没法比拟的优点,同时也有很多不如意的地方。我只是从业余爱好者的角度,来探讨一些适合自己或者说令自己满意的方法。
    关于手动和自动,Jimdo如果能像别的博客那样,在侧栏上完美地自动调用最新文章、最新留言什么的,谁还没事找事呢?(注:目前我的右侧栏博文是自动调用的。)
    另外,关于布局,现在不管是官方模板还是自定义模板,都是千篇一律,所有的页面都是一个样子,没有一点变化。本文只是初步探索,只是把主编辑区做点变化。其实,Jimdo的布局,可以变化的更大,实验已经证明,具体方法还待完善...

  • #16

    Suitear (Tuesday, 19 October 2010 22:00)

    那我期待你最终的完善!

  • #17

    3m3 (Sunday, 24 October 2010 09:23)

    喜欢原创,正在模仿。

  • #18

    网上邻居 (Sunday, 24 October 2010 10:51)

    做的很漂亮,比我这个好看。

  • #19

    3m3 (Sunday, 24 October 2010 11:39)

    邻居这样说我很受用,其实全是模仿贵站的。

  • #20

    独星 (Sunday, 24 October 2010 20:23)

    想在博文页面中隐藏sidebar,该怎么隐藏?

  • #21

    网上邻居 (Monday, 25 October 2010 06:26)

    曾试过“display:block;”,不理想,现在用的是“visibility:hidden;width:0px;height:0px”,除了IE6以外,效果还是不错的。

  • #22

    周江岭|阅读老板|牛简历 (Monday, 13 December 2010 16:56)

    看了你的内容,非常精彩
    1)我也是JIMDO用户,挑了N个模板,有一个非常不错
    2)现在我遇到麻烦了,想着,栏目,左边栏目放文本(2/3或者4/5),右边(剩下的)并且把
    菜单栏,挤出来
    我的QQ,1297800724
    JIMDO网站
    www.niujianli.com
    欢迎指点,3Q

  • #23

    kissmemydear (Wednesday, 18 May 2011 18:00)

    请教下如何设计不同的页面效果
    我CSS下:#page-725564155 #id {

    }
    我试用不行呀

  • #24

    网上邻居 (Wednesday, 18 May 2011 20:04)

    kissmemydear:
    这个问题在留言这里说不清楚,你可以看下我首页的CSS。简单地说,首先要设计好基本的布局(全局)代码,然后再根据需要,以page-id为基础,对需要改变的页面做相应的设计。

  • #25

    kissmemydear (Thursday, 19 May 2011 16:48)

    谢谢你的及时回复,慢慢来,jimdo只是爱好的部分,
    请问jimdo爱好者有什么地方可以及时聊天,如QQ群的东西吗?

  • #26

    网上邻居 (Thursday, 19 May 2011 20:38)

    kissmemydear:你好!
    据我所知,Jimdo好象有四五个QQ交流群,我参与的不是太多,这里只能提供两个我比较熟悉的群号:43613904、70442050。

  • #27

    7zuan (Monday, 23 May 2011 18:58)

    希望你能把图片贴上。 不然很难看懂

  • #28

    jsjzx (Monday, 06 June 2011 00:11)

    唉,太完美了,感谢分享

  • #29

    Louis Vuitton iPhone 6S Plus Wallet Cases (Monday, 11 April 2016 17:11)

    All you do is seat the battery in the Friend, then slide the package back into the phone. Nice and simple, aside from the muscle required to extract the battery in the first place. Other Friends, such as the virtual reality glasses and the 360 degree camera, plug into the phone’s USB-C port and draw their power from it.