通过自定义样式优化博客界面

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

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

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

  • 每个段落加上首行缩进

  • 标题、子标题样式修改

  • 代码样式修改

  • 增加阅读目录

  • 增加回到顶部

最后的结果好多了:

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

总体思路

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

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

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

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

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

客户端:

提交后,查看的效果:

模板中的关键样式


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

.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来控制。

后台设定样式

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

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

另外,建议做好注释。

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反复修改都没事,但如果用博客园自带编辑器修改后,代码格式会更改,因此需要注意

通过自定义样式优化博客界面,布布扣,bubuko.com

时间: 2024-12-28 02:27:58

通过自定义样式优化博客界面的相关文章

自定义你的博客园样式

在自己的博客管理 后台里面 有页面定制CSS代码 貌似不同的模板对应的HTML也不同 这是我暂时的代码  挺丑的 @charset 'UTF8'; html,body{ font-family: "verdana","Arial","微软雅黑", "Helvetica", "sans-serif"; box-shadow: 2px 2px 1px #888888; } body{ background-co

第 15 篇:优化博客功能的细节,提升使用体验—— HelloDjango 系列教程

作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在之前的系列教程中,我们已经实现了:文章的发布.展示.评论等功能,可能认真的小伙伴已经发现这些功能有一些地方设计的不是很好,今天我们就来优化一些体验和操作上的细节.让我们的博客更加完美,使用起来更加顺手- 在模型中指定排序 为了让文章(Post)按发布时间逆序排列,让最新发表的文章排在文章列表的最前面,我们对返回的文章列表进行了排序,即各个视图函数中都有类似于 Post.object

自定义自己的博客园博客首页

直接上代码 博客侧边栏公告: 访问量会计算访问过自己博客的人数(只要刷新,就会累计)!正常的访问量不应该这么计算! 联系我是通过腾讯QQ的方式联系我,会根据QQ的在线状态显示不同颜色的图标. 访问量:<img src="http://s09.flagcounter.com/mini/6gcU/bg_FF2465/txt_21917B/border_ECF230/flags_0/" alt="Candyメ奶糖" border="0">&

优化博客园的JS代码总结

为Markdown添加目录 这里我参考的是妙音天女的文章. 为文章添加版权信息 这里我参考的是呆尐兔兔的文章. 最后的代码 <script language="javascript" type="text/javascript"> function setCopyright(){ /* 设置版权信息,转载出处自动根据页面url生成 * window.location.href:读取当前url */ var info_str = '<p>本文为

前端小练习-Michael的博客界面(粗糙版)

michael-blog.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>michael's blog</title> <link rel="stylesheet" href="michael.css"> </head> <b

博客界面添加动图

添加效果 添加方法 1.首先在设置里面申请支持JS代码 2.添加代码 页面定制 CSS 代码 canvas#live2dcanvas { border: 0 !important; right: 0; } 页脚 HTML 代码 <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js"></script> <script type="text/

博客园样式(收藏)

http://www.cnblogs.com/asxinyu/tag/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%A0%B7%E5%BC%8F/ 为博客园添加目录的配置总结 JavaScript自动生成博文目录导航 共享一下我的博客皮肤 博客园页面设置 博客园里设置个性标题 通过自定义样式优化博客界面

[JS]玩转博客园的几个“奇技淫巧”

混迹博客园快一个月了,非常喜欢这块技术氛围浓厚的园地,不过在玩转园子的过程中也发现了几个小缺陷,不过好在申请了JS权限之后可以解决大部分的不方便,而在不能植入自定义JS的页面也可以用比较hack的方式来缓解问题.本文就来说一说我这一个月来碰到的几个问题以及解决之道:D 一.判断当前用户 写随笔的过程中可能经常需要对页面进行一下预览,然而编辑器的预览功能没办法带上自定义的CSS和JS,所以通常都得保存草稿然后查看随笔.预览完之后想要继续编辑的话就得一直拉到随笔的结尾,这个实在是不太方便,于是自然就

Bootstrap 实战之响应式个人博客 (一)

一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的.github提供了github-page让用户可以免费部署自己的静态站点.更多参考:github-page 在本项目的静态站点部署时与其他的代码仓库,提交同步没有太大的区别(言外之意:还是有点不同的): 第一点:需要将项目目录名设置为 "githu