09
2020
02

zblog如何实现段落和文章摘要首行缩进以及段落间距、行间距的调整

其实,不管是是Zblog(包括php版和asp版)、Wordpress、Emblog,还是最近比较火的Typecho等博客程序,都需要方便访客阅读,实现各段落首行缩进两字以及调整适当的段落间距,有利于提高用户体验。

它们的实现方法也大同小异。下面,我以zblog为例,记录我是如何实现段落首行缩进和调整段落间距。

关于段落首行缩进两个字符

最原始的方法是,每个段落首行敲几个空格键,但比较麻烦,段落多了,手都敲软,太浪费时间。

另一个方法,就是能通过编辑器里的自行排版按钮完成,但仍较麻烦,有时写完后还容易忘掉这步。

一劳永逸的方法是修改CSS代码,自动实现段落的首行缩进两个字。下面是具体步骤。

1.确定要修改的CSS文件

打开一篇文章,鼠标右键获取源代码,找到类似语句:“<link rel="stylesheet" rev="stylesheet" href="https://liangduiban.com/zb_users/theme/metro/style/style.css" type="text/css" media="all"/>”,红色部分就是要修改的CSS文件地址,如下图。


查找CSSf地址.jpg

注意,不同的博客程序或不同的模版,该文件名称及地址是可能不同的。

2.下载并修改CSS文件

用ftp软件将刚才的文件下载到本地,用记事本或其他文本编辑器打开,搜索:post-body(有的博客可能还需要在里面或附近再去找找控制段落标识p),然后在后面的括号{ }中的其他的代码后,把以下代码粘贴上就可以了:

text-indent:2em;

em是一种长度单位em,并且是相对长度单位,即相对于当前对象内文本的字体尺寸。中文段落一般每段前空两个汉字,实际上,就是首行缩进了2em。

我尝试过用像素单位来缩进:比如20px之类,效果并不好,如果不同浏览器的分辨率不同,缩进就会表现不一致。

3.上传修改后的CSS文件,用“Ctrl+F5”强制刷新页面,观察效果

特别注意:

(1)一定要用“Ctrl+F5”强制刷新文章页面,不能仅仅用一般的刷新或用F5刷新。

最开始,我修改之后刷新,发现根本没效果,进入网站后台刷新缓存也没有变化,甚至把CSS文件删除了,页面也没有任何改变,让我百思不得其解。

后面才知道浏览器缓存了css等文件,以提高打开速度,一般的刷新,并没从服务器获取CSS文件,而是调用本地浏览器缓存的旧CSS文件,所以要通过“Ctrl+F5”强制浏览器不要获取缓存,而重新从服务器请求网页上的所有资源。

(2)有的博客主题或程序,并不是在post-body里的添代码。

比如,我的这个Zblog主题,就是在“post_content p”后面的{ }里添加“text-indent:2em;”。这个要自己简单地读读代码,多动手去试一试。

(3)一个严重的新问题:图片也随之缩进两个字符怎么办?

前面的操作成功后,可能会发现图片也跟着缩进了,这就很难看,甚至让一些人放弃了前面的更改。

如何处理呢?

还是在这个CSS文件里,找找控制图片的代码,比如,我的主题就是在post_content img后面的{ }加入:“display:block;”(不含双引号),让图片以块的形式展示,从而不受段落标签的控制,这样图片就正常了,不会再缩进。

如果要让每张图片自动地水平居中,不用在写文章时调整,就再加入一句代码:“margin: 0 auto;”(不含双引号)。

到此,段落首行缩进两个字符就完美实现了,以后不用再敲空格键了。

关于段落间距

这个调整就相对简单些了,但要不停的试,直到自己满意。

仍然在这个CSS文件里,仍然是找到控制段落的代码,比如我目前博客是“post_content p”后面的{ }里,加入或修改控制段落间距的代码。

有多种写法,以我用的为例:“margin-bottom:1.2em;”,表示此段落与下面的段落间距为1.2个字体,当然这个1.5的值可以自己设置,也可以不用em单位,而用像素,比如“margin-bottom:20px;”等等。

我看卢松松博客用的代码是“padding: 10px 0 20px;”,也可以用这个代码,不过他文章字体比较大,里面的值要自己不断的调。每次调整后,不要忘记用“Ctrl+F5”。


PS:调节了段落首行缩进和段落间距后,又发现其他需要调整的内容,调节如下。

1.行间距的调整(2020年2朋10日)

在上述的CSS文件找到post-body后面的{ }里,有一句代码,如“line-height:22px;”,就是设置行间距的,改变px前面的数值大小,即可调整行间距。但我更喜欢用百分号,比如改为:“line-height:200%;”,百分号前的数字可以调整直到效果满意。(2023年10月15日:感觉行间距太大,又改小为“line-height:160%;”

2.zblog首页文章摘要的两个字缩进(2020年2朋11日)

用360安全浏览器或火狐等浏览器,在博客首页摘要的地方右键“审查元素”,可以发现控制首页的CSS文件地址,对于我这个两对半博客目前所用的主题来说,仍是上面讲的style.css,其控制代码块是:post_content,在其后{}里加入上面控制文章摘要首行缩进两个字符的代码:“text-indent:2em;”(不包括双引号)。

这下,首页的文章摘要也可以自动缩进两个字了,如下图。

博客首页摘要缩进.jpg

通过这次调整,发现了用浏览器审查元素以及查看源码的功能,可以帮助定位相关源文件及代码位置。

您可能感兴趣的文章:
博客被黑后的处理及安全防范措施 (2023-10-28)
重装zblog过程记录 (2023-09-02)
升级zblog故障:Call to undefined function HookFilterPlugin() (2023-08-09)
« 上一篇 下一篇 »

评论列表:

1.日记坊  2020-02-11 21:11:24 回复该评论
不错,博客越来越有新鲜意了;
1.两对半  2020-02-11 21:58:59 回复该评论
刚才去看了一下你的博客,终于能打开了,但文章评论关闭了?无法留言
我记录了一些折腾博客的过程,内容可能变杂了吧
1.日记坊  2020-02-16 20:02:48 回复该评论
我那破博客的留言不想弄了,干脆就关掉了,后期有好的模板再换一个;
1.两对半  2020-02-16 20:08:35 回复该评论
不能留言,是有点遗憾。我看你的每篇文章都很用心,图片、动画、排版,一篇文章要花不少时间吧?
2.北湫  2020-02-10 13:40:37 回复该评论
px和em两个单位中,em是CSS里相对单位,它优化的是响应式里根据不同设备、不同分辨率自动调整其样式,但是对于博客来讲的话,每个博客程序都有MarkDown,博主可以参考一下MarkDown的用法,从而写文章更加快捷、简便!
2.两对半  2020-02-10 19:29:01 回复该评论
多谢提醒,我看你的博文样式比较新颖,用的就是MarkDown吧?
我去应用中心搜了一下,zblog目前有两个支持MarkDown的插件,一个是N年前的没更新,界面太简单,另一个比较新的,又安装不了。等以后时间比较闲了,再去折腾了
2.北湫  2020-02-12 19:25:28 回复该评论
嗯嗯,是的,Typecho编辑文章自带的MarkDown语法解析,应该每个博客程序文章编写都有MarkDown解析语法的,你可以去搜一下“MarkDown教程”,学习一下还是比较简单的,而且编写起来更加的方便哦!
2.两对半  2020-02-14 11:00:33 回复该评论
zblog目前对markdown的支持还不是很好,如果可以实现word转markdown格式,我倒是可以在DZ论坛上试试

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。