Lofter 文字排版教程:一个排版控无奈的呐喊

超实用!马了!

另外小声逼逼一句,在APP里面打开编辑器,可以直接在文字里面加各种代码,发表出来后这些代码会自动隐藏,并且那些文字都会显示有效果哦!也就是说手机版老福特文本编辑器可以识别html代码。我就是用这种方法即使是在用手机也能直接在文里加超链接哒。

雁如:

送给我家宝宝  @茗凌 ,Lofter 的文字排版教程,文长慎读

写在最前头,这是给桌机的排版教程,因为 Lofter 的 APP 没有排版这回事。 又因这篇教程涉及到一些代码演示,使用桌机阅读会比较容易理解

以上


====== 正文开始先说结论 ======

如果你不想看那么多字,给你最简单的方法:

你想每个段落中间空一行,你就先在你的码字软件里的每个段落之间空一行

  想让他缩排两个字,就在每一行的前面打上两个全角空白

接着把你的文字复制起来,贴在 t/x/t 软件上,再复制一次,贴在 Lofter 预设的文本编辑器上

将粗体、底线、删除线、超连结……等等功能在 Lofter上重新补完

完全不会乱。如果乱了,1. 你没用t/x/t软件复制贴上。 2. 你没用全角空白。

结束。


===== 如果你想看花式排版或理解背后原理 =====


我们要排版,首先要理解 Lofter 的文本编辑器有两种


第一种是预设的文本编辑器



第二种是 html 代码编辑器,点击功能列上的 html 可以开关(红框标示)



html 代码编辑器会让我们的排版无所遁形,看似很恐怖,其实很好理解的


要开始排版,第一步是把我们的文本贴上 Lofter

这时后请使用无预设格式的文字,贴到一般的文本编辑器上(非 html 编辑器)

无预设格式的文字能让我们的文本干干净净,只有文字没有其他阿哩阿杂,至于粗体啊底线啊那些啥的,请拿到 Lofter 的编辑器上面做

具体作法:
把我们的文本从 W/P/S 或其他软件贴到桌机都有的记事本软件里(就是可以储存成 t/x/t 的那个软件)
这时我们可以选择每个段落之间空一行,也可以选择不空行
再从这个软件里复制文字,贴到 Lofter 文本编辑器上


第二步,戳下功能列上的 html 按钮

如果看到超多的 <span> 和 </span> ,这是很扰乱人的累赘东西,接下来请假装我们的 html 编辑器里面没有这两个玩意儿

如果很难无视它们,建议可以用任何方式把它们删掉(完全不影响的)

最快删掉他们的方式就是多点几下 html 按钮,哈哈哈哈哈哈哈(。)

另外有一个小诀窍,我们可以把文章发布成「仅自己可见」方便检视自己的排版是否正确。无所谓的,等我们编辑完毕后,可以再把 html 编辑器里面的所有代码 copy 下来,重新发布成一篇新的公开文章(开一个新的帖子,贴在它的 html 编辑器里面,完美复制)


第三步,简易地了解 html 是什么玩意儿

戳下 html按钮,这时候我们会发现每一个的文字段落,都被 <p>(我是一个文字段落)</p> 包裹起来了

没错,<p>标签就是用来告诉浏览器「这是一个段落(paragraph)」的

请注意在 html 代码中,大部分的标签都是成双成对的,若我们有一个<p>标签,我们就必须要以一个</p>标签结束它,如果没有包好,就会出错

一个<p>标签,在 Lofter 上就已经拥有了段落的预设样式(排版)。接下来我将以大量代码作为演示


代码演示——段落最原始的样式:

<p>我是第一个预设段落</p>

<p>我是第二个预设段落</p>

<p>我是第三个预设段落我是第三个预设段落我是第三个预设段落我是第三个预设段落我是第三个预设段落我是第三个预设段落我是第三个预设段落我是第三个预设段落我是第三个预设段落</p>

<p>我是第四个预设段落</p>

可以看见的是,每一个段落之间,都已经拥有了预设的间距


当然我们也可以使用段落内分行,这时候每一行的间距就会变得很紧密

代码演示——在段落内分行:

<p>我是一个预设段落里的分行<br />
一个预设段落里的分行二号<br />
一个预设段落里的分行三号<br />
一个预设段落里的分行四号</p>
  (注意最后一行没有<br />)

每一行之间的间距不见了!在这段代码中,只有一个段落<p>标签,然后使用<br />标签做分行;换句话说,<br />标签就是告诉浏览器「请在这里换行」的意思(另外要注意的是,<br />标签是少数没有成双成对的标签)


同样地,在引用<blockquote>的功能内,也可以同时拥有很多个段落、或一个段落里有很多个分行,以达到宽松或紧密排版的样式


代码演示——引用里面有好几个段落:

 

<blockquote><p>我是引用里的第一个段落</p>

<p>我是引用里的第二个段落</p>

<p>我是引用里的第三个段落</p>

<p>我是引用里的第四个段落</p></blockquote>


代码演示——引用里面只有一个<p>段落,但是有很多分行:

 

<blockquote><p>我是引用里一个段落的分行一号<br />
我是引用里一个段落的分行二号<br />
我是引用里一个段落的分行三号<br />
我是引用里一个段落的分行四号</p></blockquote>


代码演示——段落 与 段落内分行 的骚操作:

以下这个<blockquote>引用里,我们拥有两个<p>段落(关上门……彼岸是一个,作者标注是一个)、其中第一个<p>段落里使用了<br /> 换行

<blockquote>
<p>关上门/不是为了幽禁欢乐/而是为了解放悲伤<br />
他埋头于遗忘的海洋/却到达了记忆的彼岸</p>
<p>——《我的孤独是一座花园》阿多尼斯</p>
</blockquote>

结果看起来就会像这样:

关上门/不是为了幽禁欢乐/而是为了解放悲伤
他埋头于遗忘的海洋/却到达了记忆的彼岸

——《我的孤独是一座花园》阿多尼斯


可以看出差别了吗?


Q:我想让每一个段落之间都有空行,就像以下这样

我是一个可爱的段落。


我是另一个可爱的段落。


因为我觉得多空一行比较不伤眼睛。

其实在 html 的概念里,它就是每个段落之间多了一个空白段落而已。代码演示如下:

<p>我是一个可爱的段落。</p>

<p><br /></p>

<p>我是另一个可爱的段落。</p>

<p><br /></p>

<p>因为我觉得多空一行比较不伤眼睛。</p>

当然如果我们在 html 一行一行地贴代码就太慢啦。要实现每个段落之间多空一行,最快的方式就是在第一步把文本贴上编辑器时,每个段落之间就自己先空上一行,这么一来 Lofter 就会送你一个预设的 <p><br /><p>


Q:我想让每一个段落之前都有缩排,就像以下这样

  童年,成长经历,家庭背景,社会关系,创伤……

  我们不断追溯与求索犯罪者的动机,探寻其中最幽微的喜怒哀乐,不是为了设身处地地同情、乃至于原谅他们,不是为了给罪行以开脱的理由,不是为了跪服于所谓人性的复杂,不是为了反思社会矛盾,更不是为了把自己也异化成怪物——

  我们只是在给自己、给仍然对这个世界抱有期望的人——寻找一个公正的交待而已。(断头安利《默读》priest)

  这个的重点就是在每个段落前面加上两个全角空白(画重点),全角空白被视为一个文字符号,不会被吞吃。但我们还是可以看一下 html 代码里它们长的啥样

<p>  童年,成长经历,家庭背景,社会关系,创伤……</p>

<p>  我们不断追溯与求索犯罪者的动机,探寻其中最幽微的喜怒哀乐,不是为了设身处地地同情、乃至于原谅他们,不是为了给罪行以开脱的理由,不是为了跪服于所谓人性的复杂,不是为了反思社会矛盾,更不是为了把自己也异化成怪物——</p>

<p>  我们只是在给自己、给仍然对这个世界抱有期望的人——寻找一个公正的交待而已。(断头安利《默读》priest)</p>

是的,两个全角空白会被包含<p>标签里头

在标签外的空白(特别是半角)容易被无视,因此一定要包含在标签里面

顺带一提,html 编辑器里的换行也没有意义,要在一般的文本编辑器里面换行才是有用的


我们来看看一个同时拥有缩排的空白和宽松与紧密排版与空一行的段落长什么样子吧。范例:

  受害人家属并无贵贱之分,痛苦与怨愤也并无轻重之分,倘若看见致人伤害、死亡者能终身饱受内疚与良心的折磨,或许还可以以此稍作慰藉,可惜世人的良心大抵不够厚重,在惨重的自我谴责面前,它往往会在自我麻痹与繁多的藉口中败下阵来—— 


  我不是故意的。
  我没有针对你。
  我没想到会造成这样的后果。
  我也是某种程度上的受害者…… 

  可谁让你倒楣呢? 

  归根到底,命运才是那个行凶的贱人啊。

代码演示:

<p>  受害人家属并无贵贱之分,痛苦与怨愤也并无轻重之分,倘若看见致人伤害、死亡者能终身饱受内疚与良心的折磨,或许还可以以此稍作慰藉,可惜世人的良心大抵不够厚重,在惨重的自我谴责面前,它往往会在自我麻痹与繁多的藉口中败下阵来——</p> 
<p><br /></p>
<p>  我不是故意的。<br />
  我没有针对你。<br />
  我没想到会造成这样的后果。<br />
  我也是某种程度上的受害者…… </p>
<p>  可谁让你倒楣呢? </p>
<p>  归根到底,命运才是那个行凶的贱人啊。</p>


恭喜你,你已经掌握了 Lofter 排版的全部诀窍(。)


首先,我们送给一般的文本编辑器一个干干净净的文本,每个段落 Lofter 都会自动帮你包上 <p> 标签,不用担心自己得敲键盘敲半天

接著你再按照你想要的方式,做引用及宽松或紧密的处理

然后就可以回到一般的文本编辑器里,该上粗体、底线、超连结,就按照内建的功能添加即可


    是不是很简单呢?ʘ‿ʘ 
(怕是写了一个只有自己看得懂的东西)
 (发现了吗?我这里用了紧密排版)
  (紧密排版有他有趣的地方)


其他代码演示:

1. 粗体

<strong>粗体文字</strong>

2. 底线

<span style="text-decoration:underline">底线文字</span>

3. 删除线

<span style="text-decoration:line-through">删除线文字</span>

4. 超连接

<a href="我是网址">我是显示的文字</a>

这里可以窥见一些span的用法,然不多做赘述啦

评论
热度(1177)
  1. 共51人收藏了此文字
只展示最近三个月数据
 

© 昼鸟-跑路进行时 | Powered by LOFTER