嘀咕

嘀嘀咕咕，写这一篇文章的原因是最近加了挺多大佬们的技术交流群和公众号。感觉给我最大的感受是越优秀的人真的越努力，有时候挺佩服大佬们是怎么多方面做的这么平衡的。明明都是 24 小时（一天一夜大家应该都是 24 小时吧），应该是这数没错，咋就做了那么多东西呢！而且我还在上学，不知道今后参与工作后是否能像大佬们一样平衡地那么优秀！！呜呜呜呜呜（我想要 25 小时）

在这期间看了很多公众号优秀的技术推文，看的过程中总是不禁地感叹到，大佬不愧是大佬，干货竟然真的能这么干！只是大部分的公众号的技术推文虽说内容出彩，但阅读感官还是不够冲击（也就是花里胡哨啦），通常都坚持不到结束（反省可能是我自身的问题）。查询了网上，发现并没有人重视技术推文的排版，我瞬间觉得我需要为大家输出点什么。

可能有一些人觉得内容技术重要便可以了，为何还需要弄的”花里胡哨”呢，这样究竟有没有必要。想起在大一时的我，也认识到这样的困扰，那时我也运行过校级的公众号，一周近乎需要推送两篇官方推文。一开始也只注重着内容的准确度和精彩性，但发现访问量和阅读量少之又少，我更下定决心要写更多优美精美的内容，却依旧照旧。发给自己的好友看，被告知到第一感官就不好，从打开推文到关闭推文不到 1 秒的时间，内容根本就没人看！呜呜呜呜真的是有一种被深深辜负的感觉，自己就下定决心一定要把推文的排版质量提升上来！

在提升自己公众号推文的能力时，也历经了几个阶段，走了很多很多的弯路，下面简单地说说推文排版提升上来的好处。也就是这篇文章为何学习技术推文易上手又大高上的排版包装技巧。

套用自己喜爱的模版，简单明了。
如何自定义自己的模版，达到快速复用。
让自己的技术文章体系一目了然。
吸引更多更多的读者流量。
排版精美，瞬间比其他普遍大多数技术推文显得高大上。
写完一篇排版精美，内容丰富的技术推文，唷！这满足感！
像各个博客、编辑器、文章的主题其实也就是排版好的内容

为了让大家能真实地感受理解推文的精美排版是如何从零到一来编写的。
我使用本人最近的一篇文章 Bootstrap 原生个人博客项目 – 大大的案例带大家推开门推文这道神奇的门儿。（大家都夸是篇好的技术分享文章）

总览

这是我之前的文章 Bootstrap 原生个人博客项目 – 大大的案例
然后花了个把小时为这篇文章做了些包装！

(因为长图太长了太糊了呜呜呜呜，掘金审核不通过，真的很好看！)
大家要是觉得木有排版推文的必要，就没用继续往下看浪费时间啦！以下都是如何从零到一撰写这篇技术推文排版的内容噢

分解

以下我将整个内容根据我的文章 Bootstrap 原生个人博客项目 – 大大的案例分为以下几个部分，方便供给大家可以选择性地实现。

模版
标题
标题
背景
任务
页面
组件
目录
上传

模版

首先我们需要查找推文的模版。要是有模版就是如虎添翼、锦上添花、如鱼得水、画龙点睛、雪中送炭。
其实跟我们的技术框架是一个道理
个人常用的是某米这个推文编辑器，因此我习惯性在上边找一些优秀精美的推文模版。

找寻

 以上是我的步骤：
 1. 进入某米官网
 2. 点击风格排序
 3. 选择主题分类
 4. 点击预览来查看模版
 5. 就是它！！那就保存
 
 这是我个人找到的模版！就选择它惹！
复制代码

编辑

 接下来就是开始编辑刚选中的模版啦
 1. 点击我的图文
 2. 找到刚保存的图文
 3. 点击编辑
 
复制代码

这样就完成了找到自己心仪的模版啦
下边编辑为了更清楚区分来复用每一模块，我都添加上代号。
ps: 关于模版版权，在预览时有说明内容噢！大部分都是无责的喔～

大标题

推文首先第一步来处理我们的大标题和小字

 1. 更改标题和副标题
 2. 更改字体颜色及大小
复制代码

我得加一行说明来表明这是一篇技术推文呀～
1. 在标题后插空行来添加说明
2. 更改说明字体大小和颜色
3. 突出文字，这样显得干净有力
复制代码

 简单更改自己的图片
 1. 我的图库，上传图片
 2. 点击需替换的图片进行更换
复制代码

 综上标题的部分「1」就完成，瞬间觉得不一样了吧！
复制代码

背景

添加上我们的背景模版部分

 1. 更改标题
 2. 加粗文字（显得突出有力）
复制代码

 1. 加入卡片组件（让内容更鲜明易懂）
     - 选择图文模版
     - 选择卡片
     - 挑选自己需要的卡片添加进去
     - 根据当前模版主题，自定义细调组件细节。
 2. 添加文字
 3. 突出重点
复制代码

 添加点击网页跳转动作
复制代码

 综上背景说明「2」的部分就完成！花不到 3 分钟 ?
复制代码

项目背景

 接下来是背景说明「2」下的三级标题：项目背景「2.1」，因此我们需要找到合适的标题组件
 1. 点击标题
 2. 点击框线标题（因为我个人觉得这个比较搭整个推文的主题）
复制代码

 将上边的卡片组件复用到这里（这样体系下来会工整明了）
 1. 选择组件点击复制
 2. 点击剪贴板
 3. 选择需要复用的位置，选择对应复制的组件
复制代码

 综上项目背景的部分「2.1」就完成！花不到 2 分钟 ?
复制代码

技术背景

 技术背景「2.1」的模块和项目背景「2.2」的模块内容基本一致
 那么我们就可以直接复用，这样工整简洁，还可以表明是同一部分的板块
复制代码

 简单的进行文字的格式化列表
复制代码

 这简直一瞬间就完成一个模块「2.2」了好叭！?
复制代码

任务

 任务模块「3」是与背景模块「2」是同一等级，因此我们需要复用它
 复用的步骤就不用说了叭！简简单单
 （ps: 按住 command/control 键进行多选）
复制代码

 同一等级的模块，我们为了更清楚地体系化，则需要采用一些“小东西”。
 个人常用的方式用（分隔符、分割线、表情包、小表情、贴字、符号等等）
 最喜欢用的是分割线～
 1. 点击图文模版
 2. 点击组件
 3. 点击分割线（呜呼呼呼呼！我找到了一条阳光彩虹小白马?️ ！！）
复制代码

 这样咱就完成了任务的模块「3」?
复制代码

页面

 照例，把分割线和标题添加上。
 「体系化体系化！清晰明了！」
 
 解析来重点是我们该如何更好地展示我们的页面呢
 首先我找到了对应适合的组件模块
 1. 可放图片
 2. 有图片标题
 3. 有图片说明文字
复制代码

 但是我们遇到了一个问题「展示的图片在组件中显示只有 60%」
 那么，咱们就来自定义下组件（很简单的）
 1. 打开右边的小正方形，进入排版布局模式
 2. 选择对应的小模块来自定义它们
     - 一个设置为 100
     - 一个设置为 0
 3. 再点击一下右边的小正方形，关闭排版布局模式
复制代码

 更改对应的页面图片
 更改我们的页面标题和页面说明（说明可以采用斜体）
 这样子！我们的页面模块「4」只能复用多几次，也就完成啦！?
复制代码

对了！不同的页面也是同一级的！咱们也需要分割一下（看到下边的树枝了嘛）
步骤也就是找一找分割线啦！

组件

 组件的模块「5」主要运用了一些小符号来作为模块化
 最好是有突出的内容噢
 其余的并没有啥，自定义发挥下～ 
 很简单！
复制代码

结尾

 结尾模块「7」一般包含三部分
 1. 结束语（我们需排版地让读者简洁易懂这篇文章的意义）
     - 这篇文章说了啥
     - 看完后你可以做啥
     - 记得鼓励作者呀
 2. 结束标识符（我是到其他模块中收藏过来的）
     - 遇到特殊可服用的模块强烈建议收藏，这样子可以在任何时候使用它
 3. 扩展自己的影响力
复制代码

上传

 简单两步（CV 大师）
 1. 复制
     - 点击按钮
     - command/control + C
 2. 黏贴
     - 聚焦在公众号新建图文中
     - command/control + V
 (ps: 要是有一点点缺失，重复以上 1、2 点操作即可正常。)
 
复制代码

总结

以上整篇内容，从零到一将我最近的一篇文章 Bootstrap 原生个人博客项目 – 大大的案例「得力技术文」一步步排版为精美的公众号技术推文。
无论你是否在编写关于技术的公众号推文，只要你有想写推文的兴趣和爱好。记录某些滴点，那么我相信学习了这篇文章，最后你总能够包装好自己的某篇独一无二的技术推文！
若是有大佬想推文合作的，欢迎联系呀～嘻嘻?

若是对你有所帮助！欢迎点赞和关注喔！✨

文章版权归作者所有，未经允许请勿转载。

THE END

阅读