zoukankan      html  css  js  c++  java
  • 通过自定义样式优化博客界面

    园子里的模板非常丰富,但距自己的期望,总是差一点点。加上我使用的是Windows Live Writer 2009写博客(2011的某些功能我无法接受,退回到习惯的旧版),所以写博客快则快矣,界面就有点不忍直视了。如前两天写的一篇博文

    image

    无论是标题,还是各级子标题、代码、例子,布局,感觉都是乱糟糟的,打开页面,实在没有阅读下去的兴趣。

    于是研究了一下究竟怎样来优化博客界面,对以下方面进行了修改:

    • 每个段落加上首行缩进
    • 标题、子标题样式修改
    • 代码样式修改
    • 增加阅读目录
    • 增加回到顶部

    最后的结果好多了:

    image

    过程中有些地方的确是反复尝试多次才找到位置的,怕时间一久我记不起这些细节。所以趁热先记录一下。

    总体思路

    首先,自定义模板的思路被否决了。因为我的目标只是想让博客内容页面稍微整齐点而已,自己设计模板要付出的代价实在太高了,所以放弃。

    经过摸索,对于界面优化大致的思路是:

      1)尽量简单,不要做太多的复杂设置;

      2)仍然可以使用wlw写博客,界面代码主要在服务器上设置。

    整个过程有点类似于内容和界面分离:在wlw中,按照正常的标签写内容,在服务器上,再根据模板和自定义样式进行渲染:

    客户端:

    image

    提交后,查看的效果:

    image

    模板中的关键样式

    研究页面的html代码,找到一些关键的ID和Class,将来就是通过对它们设定自定义样式来修改界面:

    image

    .postTitle:标题,不过目录页中也会用到这个样式,所以需要防止干扰

    #cb_post_title_url:内容页面标题链接的ID

    #cnblogs_post_body:内容主体

    #cnblogs_post_body h1:一级标题

    #cnblogs_post_body p:所有内容中的段落

    其他自定义的样式,可以用#cnblogs_post_body后跟自定义样式的方式来限定,如我对“回到顶部”div的自定义样式,就可以通过#cnblogs_post_body .bm来控制。

    后台设定样式

    在后台-设置中,添加自定义样式即可

    image

    经过实验,这些样式的优先级往往高于模板样式,因此,只要能够准确的定位选择符,就可以较好的修改界面。

    另外,建议做好注释。

    wlw客户端的操作:

      1)正文:正常写,保证是P标签即可

      2)子标题:使用h1标签

      3)目录,使用列表,指向标题前面的一个div,内有“回到顶部”链接

    <li><a href="#bm_all">常见字符串操作</a> </li>、

      4)在每个子标题前面,都有链接,作用是:1、作为书签;2、回到顶部

    <div class="bm"><a href="#top" name="bm_all">回到顶部</a></div>

      5)代码样式我采用自定义方式,所以每次粘贴代码,需要切换到源代码视图进行 

      6)一些输出结果,实例文本等,也可以用代码方式显示。只要用<pre>包住即可

      7)实践发现,使用wlw反复修改都没事,但如果用博客园自带编辑器修改后,代码格式会更改,因此需要注意

  • 相关阅读:
    性格-汉语-词语:坚忍
    汉语-词语:坚强
    品质-汉语-成语:坚持不懈
    was系统错误日志大量出现标识符缺失
    【iOS】UIWebView的HTML5扩展之canvas篇
    OA权限树搭建 代码
    linux下的环境文件设置说明
    怎样把多个Android Project打包成一个APK
    nyoj43 24 Point game(DFS)
    【西祠日志】【07】努力努力,找资料,思考,怎么做asp图片上传
  • 原文地址:https://www.cnblogs.com/jetz/p/3736087.html
Copyright © 2011-2022 走看看