Jimdo自定义模板揭密:Jimdo首页及博客页面CSS的独立设计方法

      接触Jimdo久了,也看了它很多网站,越来越觉得它的布局单调了一点 — 无论是采用系统提供的模板,还是一般的自定义模板,每一个Jimdo网站,所有的页面,基本上都是一个样式。这种方法的优点是,整个网站看上去结构简洁,条理清楚,整齐划一。但同时,它的缺点也很明显,那就是,这样的网站,看上去非常单调,缺少变化。就这个问题,谈点本人最近的研究体会,看看如何利用CSS,设计出变化的Jimdo网站首页及博客页面。

      Jimdo网站所以会出现上面所述的问题,是由Jimdo的结构决定的。因为它是一个在线编辑平台,从原理上讲,它的模板,本来就是一个HTML+CSS的单页面结构。在它的布局中,HTML决定了它的框架,CSS决定了各个部分的样式。其中,HTML代码是唯一的,整个网站都是一样的,目前来看,很难通过它做出什么变化。而CSS方面,可以变化的就相对比较多了。

      关于上述问题,网上邻居很久前就做过探讨,比如:《乾坤大挪移 - Jimdo元素的绝对定位》、《利用Content-ID设计出不同的编辑区布局》、《利用Page-ID对基本布局进行版块调整》、《介绍一个动态修改Jimdo网站模板CSS样式表的JS代码》等等,它们的共同缺点是,都适用于单页面的设计,无法通过某一CSS代码,对某一特定页面进行批量设计。

      我们分析一下Jimdo网站的页面,发现也就那么几种,具体来讲可以这么简单分类一下

一、基本页面

       这是模板决定的页面,也就是导航菜单中的“新建页面”,具体使用上,大概可以是这些,如:博客显示,留言之类。

二、首页

      它是整个网站的内容索引,在网站建设中,它的作用是相当重要的。你的网站做的是否漂亮,内容是否吸引访客,有时候有着举足轻重的作用。

三、博客页面

      Jimdo虽然一个建站平台,不是一个博客网站,但博客却是Jimdo的一个重要组成部分,这一点可以从它的结构上看出来 — Jimdo的博客地址是相对独立的,不是通过导航菜单“新建”出来的。一个Jimdo网站通过导航菜单“新建”数百数千的页面来,真是难以想像。因此,即使不做博客,也建议通过Jimdo博客功能创建网站内容。

      那么,我们通过什么来识别网上邻居上面所划分的几种页面,然后在CSS里对它们进行独立设计呢?

      我们先看下网上邻居对Jimdo网站源码的分析,下面复制的是本人网站上<body>部分的比较:

基本页面:

<body class="body cc-page cc-pagemode-default cc-content-parent" id="page-1294097787">

主页:

<body class="body cc-page cc-page-index cc-indexpage cc-pagemode-default cc-content-parent" id="page-270431404">

博客页面:

<body class="body cc-page cc-page-blog cc-pagemode-default cc-content-parent" id="page-1297197887">

      相信对代码比较敏感的朋友一下子就看出它们异同来了:我们不看id,id 选择器在每个HTML文档中只能出现一次,我们看class,看上面红色标注的部分,class 选择器在HTML文档中是可以重复使用的。也就是说,根据上面的代码,我们可以得出这样的结论cc-indexpage 是首页的类选择器cc-page-blog 是博客页面的类选择器。换言之,我们可以在Jimdo模板的CSS设计里,在基本代码的基础上,在它前面加上"cc-indexpage"“cc-page-blog”,即可分别对首页和博客页面进行独立的设计。

      具体代码这里就不举例了,发挥你的想像和智慧吧,想怎么设计都可以。作为演示,本站将博客页面的主栏和侧栏进行了位置对换,感兴趣的朋友可以切换几个页面看看。

相关文章:

脚本之家myFocus焦点图在Jimdo网站上的演示 (Sat, 27 Jul 2013)
>> Read More

分享一种Jimdo博客日期/时间显示样式的自定义代码 (Sun, 17 Feb 2013)
>> Read More

介绍一个动态修改Jimdo网站模板CSS样式表的JS代码 (Sun, 03 Feb 2013)
>> Read More

Jimdo“图文混排”元素及其代码演示 (Fri, 25 Jan 2013)
>> Read More

介绍一种完美修改Jimdo网站页脚部分的方法 (Thu, 10 Jan 2013)
>> Read More

无觅“热门文章”插件背景颜色的修改及CSS自定义方法 (Sun, 30 Dec 2012)
>> Read More

分享一种Jimdo博客日期时间显示样式代码 (Thu, 04 Oct 2012)
>> Read More

百度空间背景音乐播放器及其在Jimdo网站上的调用 (Sun, 13 May 2012)
>> Read More

2012年第30届夏季伦敦奥运会开幕倒计时JS代码 (Wed, 18 Apr 2012)
>> Read More

百度空间音乐播放器在Jimdo等博客上的调用方法 (Mon, 09 Apr 2012)
>> Read More

Write a comment

Comments: 7
  • #1

    网型网秀 (Tuesday, 12 March 2013 05:09)

    邻居提到的方法不错,不过有点可能你忽略了,类cc-page-index和cc-indexpage实际上某些特殊的页面也有,比如网站地图、登录页面、搜索页面(/search)等,所以不能简单地判断为主页。

  • #2

    网型网秀 (Tuesday, 12 March 2013 05:30)

    所以可以使用CSS多类选择器,格式如:
    .cc-indexpage.cc-pagemode-default{...}
    不过可能不支持IE6。

  • #3

    网上邻居 (Tuesday, 12 March 2013 15:07)

    网型网秀:
    文中所述的分类,肯定不是很合理或很到位,文中“主页”只是中文的一种说法,留言中列举的一些页面,如果仔细看一下它的id,就知道是怎么一回一事了。呵呵,本文仅供感兴趣的朋友参考...

  • #4

    Coach Factory Outlet (Tuesday, 23 April 2013 05:23)

    Love is not a thing to understand
    Love is not a thing to feel
    Love is not a thing to give and receive
    Love is a thing only to become and eternally be

  • #5

    fairymodel (Sunday, 15 September 2013 11:37)

    真的很不错,再仔细学习中。

  • #6

    彩票合买 (Monday, 04 November 2013 14:58)

    很久没来了,很不错了

  • #7

    YSL iPhone 6 Plus Cases (Monday, 11 April 2016 16:52)

    the Galaxy S7 edge is a beautiful phone. It’s not an iPhone copy to the extent that Samsung’s earlier Galaxy phones were, but it has characteristics that make it look and feel almost like a phone Apple would build. That’s high praise considering where Samsung’s phones were just a few short years ago.