原文: The freeCodeCamp Publication Style Guide

感谢你在开发者社区中分享你的专业知识和洞察。

freeCodeCamp 专栏将帮助你启发并鼓励全世界的开发者、设计师和数据科学家等专业人才。

freeCodeCamp.org 是访问量最大的技术网站之一,成千上万的读者将在这里通过阅读你的文章而受益。

我们的社交媒体账号拥有很高的关注度,网站的可访问性和 SEO 效果都做得十分出色,同时,我们提供的学习资源严谨而优质,在业内深受认可——这些优势都将为你的文章吸引更多读者。

在这篇写作指南中,我们将提供一些指导建议,帮助你优化自己的文章,扩大影响力。

请不要把 freeCodeCamp 专栏当作一个发布“日常博客”或意识流似的观察性作文的平台。

内容至上,请在你的文章里展示事实、引言、代码片段和可视化数据等等优质内容。

大量数据表明,文章越深入,人们会花越长的时间阅读它,并且越有可能与朋友分享。

如果你围绕某个主题写出的文章少于 500 字,请先尝试对其进行更多研究。通过深入地并拓展研究,你可以向读者传递更多洞察。

人们很忙,所以你必须立即吸引他们的注意。如何吸引呢?你需要为文章取一个有吸引力的标题。

标题是你的教程中唯一的 100% 的人都会读的部分

在开始撰写正文部分之前,你需要花点时间构思一个吸引眼球的标题。然后,你的整篇文章将围绕标题发散与聚拢,以作支撑。

在过去的八年中,我们发现深入的技术教程对我们专栏的读者群——世界各地数以百万计的开发者——来说是最有帮助的。

比如,技术教程可以采用这样的标题:

  • "How to fix…"/《如何修复......》
  • "How to build…"/《如何构建......》
  • “How to [task] with [tool]”/《如何 [采用什么工具] 来 [完成什么任务]》
  • "How [something] works"/《如何实现 [XX] 》
  • "The [adjective] guide to…"/《关于 [XX] 的 [深度、高效、完整等等形容词] 指南》
  • “What exactly is [noun]?”/《[XX] 究竟是什么》
  • “Why [something] matters.”/《为什么说 [XX] 很重要》
  • "A history of [something]”/《[XX] 历史解读》
  • “The [something] Handbook”/《[XX] 手册》(一般是 10,000 字以上的教程)

你也可以在你的标题中加入人们经常搜索的关键词。不要包含太多(“堆叠关键词”并不好),但值得思考的是,人们在搜索什么,会引导他们找到你的文章。

添加封面图片

在你确定了一个清晰的有信息量的标题之后,点击右上角的齿轮,添加一张合适的封面图片。

一些作者为自己的文章设计封面图片。你可以在一些免费网站设计图片,比如 Canva.com。我们可能在 Facebook 或 Twitter 分享你的文章,所以请注意图像宽高比应为 1.91:1,以免分享时图片不能完整显示。

在创建你的封面图片时要记住一些事情:

  • 使用对比鲜明的颜色,使图像/文字真正突出。
  • 在你的图片中不要包含太多的文字——只要集中在主要的主题/关键词上(因此,例如,不要包含所有这些文字,“如何用 React 构建一个订餐应用程序”,你可以只说 “如何用 React 构建一个应用程序”或“构建一个 React 应用程序”)。
  • 一般来说,请记住:对于封面图片来说,通常越简单越好。你想要一个醒目的图像,在较小的设备上容易查看/阅读。
  • 你可以用你的封面图片来帮助建立你作为一个写作者的“品牌”。如果你制作出设计一致的图像,人们往往会仅凭封面图像就认出这是你的教程。

如果你没有图片,你可以从 Pexels、Unsplash 或维基百科等网站下载一张不需要署名的图片,保存它,然后上传到 Ghost。

请不要热链接图片。相反,下载任何你想使用的图片,然后把它们拖到 Ghost 的教程中。这样 freeCodeCamp 可以通过我们自己可靠的 CDN 来提供图片(为了更好的性能和可访问性)。请尽量将图片大小控制在 1MB 以内。

同时请记住,使用屏幕阅读器的人将无法看到你的图片、图表和屏幕截图。因此,请在所有对理解你的教程很重要的图片上加上一个简明而相关的标题。这对无障碍性是有帮助的,并允许你指出关于图片的重要的额外信息。

设置 URL

你可以直接设置文章的 URL。我们建议你使用简短的描述性的 URL,比如 “machine-learning-with-pytorch-tutorial” 或 “from-trucker-to-developer”。对,使用英文而不是拼音。

设置好 URL 并发布文章之后,请不要更改 URL,因为有可能我们在别处推荐了你的文章,URL 变了的话就会导致 404 错误。

添加标签

你可以为你的文章选择一到五个标签。当你键入一些关键词时,下拉列表会出现标签提示,从中选择即可(中文版标签即将上线)。

你可以为你的教程选择一到五个标签。请告诉编辑团队你选择了哪些标签,我们会为你添加。

这些标签将使读者通过搜索和浏览标签时更容易发现你的教程。

你选择的第一个标签是最重要的,它会显示在你的文章上方,如下所示:

image-50

请不要更改菜单中的任何元信息。我们的专栏对这些有合理的默认值。

image-51
不要修改 Ghost 中的这些值 - 使用默认值即可

如何写出人们乐于阅读的文章

重视语法,拼写和格式

条理严谨且格式清晰的文章阅读起来令人愉悦。以下建议可以帮助提高你的文章的可读性:

  • 简单化:尽可能使用简单直接的语句。
  • 使用短句:将长句分解为短句,这有助于人们更快地阅读并更好地理解。
  • 使用短段落:将较长的段落分解为一两句的段落。如果你的文章有好多长段落,读者可能放弃阅读或只是略读。
  • 检查标点符号:太多感叹号可能会分散注意力!少用分号;只需使用句号。省略号......好吧......看起来有点累赘。
  • 使用小标题让文章结构更清晰:我们的专栏为你提供了大大小小的标题。对主要的主题使用大标题,而对这些主题中的部分使用小的副标题。你可以用 Markdown 语法添加标题(## 代表 H2,### 代表 H3,以此类推),或者双击你想用来做标题的文本。下面的菜单会出现。
image
如何在 Ghost 中添加 H2 和 H3 标题
  • 不要使用过多的粗体、斜体或两者:太多的文字格式会使人难以阅读。特别是如果你同时使用粗体和斜体。分别使用黑体和斜体,而且要少用。
  • 尽量少使用缩写:有的缩写并不是所有人(特别是初学者)都知道,比如,LGTM(look good to me),e.g.(例如),js(JavaScript),所以少使用缩写吧。
  • 特别注意全角/半角文字内容和标点符号的用法,比如,全角文字和半角文字之间需要加空格(为下列项目添加 CSS 属性)。

尽可能地使用主动语态

人们通常在谈话中自然地使用主动语态。它更随意,更平易近人,并意味着行动和权威。

因此,在你的教程中尽可能使用主动语态。

下面是一个主动语态的例子:

你可以按照这些步骤来安装Node.js。”

下面是一个被动语态的例子:

“Node.js 可以按照这些步骤被安装。”

这看起来很微妙,但主动语态的例子更容易与读者联系起来,帮助他们自信地遵循指南。

有时,把写教程想成是在向朋友解释什么,会有帮助。你不需要使用过于复杂的语言,你会表现得友好而有礼貌,而且事情会合乎逻辑。

反复校对

有些作者写得很快,他们可以一边思考一边将自己的想法写下来。有些作者会在做好所有研究之后才开始写作。

无论你习惯什么样的写作过程,请在写好之后跳出作者思维,从一个陌生的读者的视角来阅读你的文章。

反复阅读,甚至可以读出声来。然后你会惊讶地发现其中有一些标点错误、用词错误或者不通顺的语句。

在代码中添加语法高亮显示

你可以通过键入三个反引号(```),然后按空格键,来创建代码块。

image-52
Ghost 中的代码块

你甚至可以指定要进行语法突出显示的编程语言,例如,输入```js 将高亮显示 JavaScript 语法。我们还支持其他常用的十几种编程语言的语法高亮显示。

image-53
在 Ghost 中添加语法高亮的代码块,并加入编程语言

紧扣主题

读者的时间是宝贵的。尽量让你的文章值得他们从忙碌的生活中抽出来阅读,也就是说帮助他们尽可能多地从你的文章中获取价值。

尽可能按照这个步骤来撰写深度技术文章:

1、写一个简明介绍,告诉读者他们将从这篇文章看到什么

2、使用像这样的编号列表来展示步骤

3、尽可能详细阐述

4、最后提醒读者他们看了什么内容

写一篇完整的长文,而不是把长文分为多篇短文

我们从长期的观察中发现,如果人们没有阅读一个系列文章的前面部分的话,那么他们没有什么耐心阅读其中的第二、第三或第 n 部分。

与此同时,我们发现那些非常长的、有深度的文章却能收到非常好的反响。人们会把你的长文添加书签或在社交媒体上分享,以便他们可以随时回过头来再阅读。

如果一篇文章比较长,通常人们会认为这篇文章是作者认真写的,内容是丰富的。这会鼓励读者放慢脚步,真正花时间阅读你的文章。许多读者甚至会在家里打开他们的代码编辑器,边阅读边写代码。

文章内容必须符合规定

freeCodeCamp 的学员中既有成年人也有青少年,所以,你在这里发布的文章不得包含黄、赌、毒等不良信息或政治敏感内容,避免文章中出现侮辱性语言。

如果某篇文章违反了 freeCodeCamp 的行为准则,我们会立即将其删除。但我们会保存一份副本,并发给你,供你自己记录,这样你就不会丢失你的内容。

使用无需署名的图像或你自己创造的图像

你可以使用屏幕截图和其他你自己创建的图片。但是,如果你不拥有某张图片的版权,可以使用无需署名的类似图片来代替。这些图片不需要授权费或署名。

同样,如果你需要一个图片库,你可以在一些网站上找到这些图片,如 Pexels、Unsplash 和维基百科。

提醒一下,请不要热链接图片。相反,请下载任何你想在你的教程中使用的图片,然后将它们拖入 Ghost。这样 freeCodeCamp 可以通过我们自己可靠的 CDN 来提供图片(为了更好的性能和可访问性)。请尽量将图片大小控制在 1MB 以内。

有些图片——如网络漫画——是以分享为目的的。对于这些,你可以插入图片,然后注明“图片来源:XKCD”,并附上网络漫画的具体页面的链接。

始终注明来源,不要抄袭

抄袭是指某人将别人的文章(或图像或代码等)误当作是自己的。这是一种严重的错误行为,会导致人们被解雇和被踢出学校。在 freeCodeCamp 的专栏上,我们也同样严肃地对待它。

很少有人不顾尊严地试图在 freeCodeCamp 的专栏上抄袭。但在过去的 7 年中,有几个人是这样的。我们已经发现了他们,删除了他们的教程,并终身禁止他们进入我们的社区。

不要担心——你不会意外地剽窃任何东西。抄袭是一种故意的行为。

如何正确列出你的资料来源

如果你转述(或直接引用)某人在其他教程、视频、课程或其他媒介中说过的话,你应该归功于他们。这意味着要添加一个原始来源的链接,并使用引文格式,比如这样:

"This game is controlled entirely by typing into a command line interface. Because the game is real-time in nature, this can lead to some intense moments of rapidly typing commands as you try to save your drones from danger." (来源:Quincy Larson)

这包括从官方文档、StackOverflow、GitHub 和所有类似资源中提取的文本(或代码)。如果你从这样的来源复制和粘贴东西,确保你注明引用它并链接到它。

始终将引文归于最初说这些话的人。如果是多行引语,你可以使用像这样的引语来分割长的段落。

“When you have wit of your own, it’s a pleasure to
credit other people for theirs.”
― Criss Jami

如果你的代码在很大程度上受到了别人的启发(或借用了别人的代码),你应该归功于他们。

在你发表严重依赖他人创作的教程之前,请问自己:我的教程是否对该人的工作进行了实质性的扩展?如果不是,它可能不值得成为教程。

关于使用别人的文字的最后说明:在可以的情况下,使用自己的文字总是更好。因此,与其过多地复制/粘贴和引用其他来源的信息,不如试着消化信息,用你自己的话来解释它。这将有助于你更好地理解它,而且你不会有剽窃他人作品的风险。

但如果你必须引用或借用其他来源的资料,请确保正确引用

抄袭的一些例子

这里有几个抄袭的例子——即,不应该做什么。第一个例子应该相当清楚(它是一字不差地复制的)。

原文:

Just a quick note before we get started: Instagram's desktop interface and mobile app are quite different. Most people use Instagram on their mobile device (from the Instagram app) because that's where you can actually post photos. (Source: Abbey Rennemeyer)

抄袭的文字:

Ok, everyone ready to learn about Instagram? Let's dive in!

Just a quick note before we get started: Instagram's desktop interface and mobile app are quite different. Most people use Instagram on their mobile device (from the Instagram app) because that's where you can actually post photos.

Now that we have that out of the way, we're ready to go.

正如你所看到的,抄袭的文字被夹在原创文字之间。添加别人制作得非常好的短语或段落是很诱人的。但除非你注明引用这些部分,否则就是抄袭。

下面的第二个例子,可能没有那么突出。但如果你仔细地转述了别人的话,这仍然是抄袭行为。

原文:

There are many reasons you might want to share photos and videos on Instagram.

Perhaps you're starting a business or launching a product. You might work for a company that wants to have an Instagram presence. Maybe you want to build your personal brand as a photographer, traveler, or artist. Or you just want to share what you're into right now via pictures.

Whatever the reason, Instagram is a great place to share ideas, messaging, and art online. (Source)

抄袭的文字:

There are lots of reasons to share photos and videos on Insta.

Maybe you're starting your own business or launching some product. Maybe you work for an organization who wants to have an Instagram presence. Or maybe you want to create your own brand. Or you just want to show what you're doing now in pictures.

Either way, Instagram is a great place to post those ideas, messages, and art online.

正如你所看到的,上面的文字在很大程度上是基于原文的。它可能改变了几个字,或遗漏了几个字,但很明显,这个人并不是自己写的。同样,这也是不行的,会被认为是抄袭。

如果你对什么是抄袭有任何疑问,请做一些研究,确保你知道如何正确引用你的来源和创造原创作品。

关于多平台交叉发布文章的说明

如果你希望有很多人阅读你的文章,那么我们建议你不要在多个平台发布文章,而是专注在一个专栏写作——不管是 freeCodeCamp 的专栏,还是你自己的博客,或是其他线上平台。

这方面有几个例外:

  • 在像 LinkedIn 这样的不被谷歌索引的平台中交叉发布教程是值得的。
  • 如果你想在自己的博客上发表你在其他专栏上写的文章,让潜在的雇主看到,你可以在自己的博客上交叉发布,只需使用一个规范的 URL 来指向原始专栏。这将减少谷歌感到困惑并在其结果中显示错误版本的可能性。

你可以将自己之前写的关于某个主题的几篇文章(例如 “Visual Studios 插件”或“高级 Bash 命令”)汇集成一篇较长的文章,在 freeCodeCamp 专栏发布。

我们的理念是,因为我们要花几个小时辅导你编写教程,精心编辑,并向更广大的 freeCodeCamp 社区宣传,我们要求你不要在 Medium 等开放发布网站上交叉发布文章。

文章中是否可以出现推广性质的内容

freeCodeCamp.org 是靠捐款人支持的公益组织。我们不希望让任何人感觉我们有所谓的“收费策略”(我们完全没有),否则可能会影响人们给我们捐款的意愿。

不过,我们完全理解你可能希望宣传自己的最新书籍、课程、SaaS 应用程序或让人们注册你的邮件列表或在社交媒体上关注你。

我们希望你尽可能优雅地做推广,比如,你完全可以在文章末尾用一句话介绍你的产品。

不要在文章开头就放你的产品链接,因为这看起来就是垃圾信息。不要在你的教程中使用促销链接,除非它们是你亲自创建的书籍或课程的链接。

另外,请注意,我们不允许注册品牌账号,禁止任何形式的代写。而且我们不会将教程作者从公司的一个员工改为另一个员工。

请不要使用你的作者账号代表尚未获得邀请注册成为 freeCodeCamp 专栏作者的人发布文章。

请注意,对于你自己的站点的 SEO——与大多数热门网站不同——freeCodeCamp 专栏的所有链接都是 rel =“doFollow”,意思是你在文章中链接的每个页面(包括你自己的博客)都会在 Google 排名中获得提升。请谨慎加入链接,不能添加过多。

正式发布

当你确定你的文章已经准备好分享给读者,你可以将草稿链接发送给 chinese@freecodecamp.org。我们的编辑团队将尽快帮助你检查、优化文章,然后正式发布。

我们主要会看标题和开头段落是否可以优化,同时也会更正文章中的格式问题或语法错误。

如果我们觉得你的文章要改的内容比较多,我们会告诉你,那么你可以修改之后重新提交。

最后,一个重要的说明:如果有公司付钱给你写文章,然后试图在 freeCodeCamp 社区专栏上发表,请在提交草稿时告知编辑团队。

其他建议

GitHub Markdown

在这里你可以使用 GitHub 风格的 Markdown 撰写文章。

你可以直接将 Markdown 内容粘贴到编辑框中,内容会立即转换为富文本格式。

你也可以在文章中键入 Markdown 语法来指定格式,比如,用#或 ## 编写标题,或者键入 * 表示项目符号列表。

轻松嵌入

如果你想嵌入 Twitter、YouTube 的内容,只需单击新行开头的 + 图标,即可从各种嵌入工具中进行选择。

不过,我们鼓励你谨慎嵌入内容,原因有三:

  • 嵌入内容将调用外部服务,可能会使访问速度变慢。
  • 很多人使用屏幕阅读器阅读文章。开发者社区中有相当大比例的人们存在视力障碍(或完全失明),嵌入内容的可访问性不如文本的可访问性好。
  • 专栏的每篇教程都有一个加速移动页面的版本,嵌入的内容在那里可能无法正常显示出来。

尽可能使用“你”而不是“我们”

有时,在编写教程时,作者会忍不住使用“我们”:“现在我们需要安装 Node.js......”。这是一种自然的交流方式。

但我们发现,使用第二人称(“你”)会更有效。它让人感觉你是在直接对读者说话,并让读者在学习你的指南时有代入感。

当然,也有例外——例如,我们在本风格指南中经常使用“我们”。:) 但是,请使用你最好的判断,在适当的时候尽量使用“你”。

如果你还没有一个 freeCodeCamp 专栏贡献者账号,你可以填写这份表单来申请。

再次感谢你在开发者社区中分享知识

我们希望这份指南能帮助你写出更好的教程,以便整个社区都能从你的洞察中受益。

Happy coding.

-  freeCodeCamp 编辑团队