🔥 如何在 DEV 上发布精彩帖子

2025-06-07

🔥 如何在 DEV 上发布精彩帖子

这篇文章的灵感来自于我在@dsteenman 的帖子上留下的评论。

大多数时候我更喜欢短篇,因为我更有可能读完整本书。如果是系列书,我更有可能在几节课内读完整个系列。这只是我的个人偏好。

不过,我想说的是,有些文章很适合长篇格式。这些文章往往会被人们反复翻阅。

章节

  1. 引人注目的介绍
  2. 布局是关键
    1. 目录
    2. 打破它
    3. Markdown
    4. Liquid 标签
    5. 无液体标签
    6. 代码块
  3. 文章类型
    1. 超级帖子
    2. 单篇帖子
    3. 系列
    4. 讨论
  4. 发布您想阅读的内容
  5. 讨论

引人注目的介绍

认真思考一下那些位于首屏的内容。确保你把一些精彩内容放在最顶部。不要把这些空间完全浪费在目录中。

在文章顶部稍微预览一下搜索结果。这有助于吸引读者,让他们读下去,并在第一时间留下深刻的印象。我发现这对于那些以后想回头查找的文章来说很重要。

布局是关键

无论如何,布局是关键。你不是斯蒂芬·金,无论你多么伟大的作家,你都不可能像他那样吸引读者的注意力。大多数阅读博客文章的人都会先浏览文章。我经常先浏览,然后再阅读。如果文章真的很好或者与我相关,我会全部读完;否则,我会回头只读感兴趣的部分。如果没有明显的内容,你就失去了我的兴趣。

因此,您需要将您的帖子分成几个部分,并将每个部分的标题视为完整帖子的标题。

目录

目录

很多人回复了Danny的帖子,建议添加目录。不知何故,我之前从未在帖子里添加过目录。现在我正在考虑。我非常擅长在发布新帖子之前或之后修改布局。

半自动TOC

由于我非常讨厌不必要的返工和潜在的错误,因此我将这个可以自动生成目录的代码片段放在一起,只需将其粘贴到您的控制台中,然后将结果粘贴到您的文章中即可。

// pres F12 
// paste this in the console
// get your auto generated DEV TOC
let minHeader = Math.min(...[...document.querySelectorAll('.anchor')].map(a => parseFloat(a.parentElement.tagName[1])))
let addSpace = function (tagName, minHeader) {
  if (tagName[0] === "H") {
      return '  '.repeat(tagName[1] - minHeader)
  } else {
      return ''
  }
}
console.log(
  [...document.querySelectorAll('.anchor')]
  .map(a => 
    `${addSpace(a.parentElement.tagName, minHeader)}1. [${a.parentElement.innerText}](#${a.href.split('#')[1]})`
  )
  .join('\n')
)
Enter fullscreen mode Exit fullscreen mode

打破它

使用标题、图片和区块引用来划分文章,使其易于浏览。我将每个标题都视为文章标题。它应该引人入胜,吸引读者,但不能成为点击诱饵,以免读者在未达到预期效果时感到厌烦。

使其可扫描!...将每个标题视为文章标题

Markdown

熟悉 Markdown。查看这份速查表或直接在 DEV 编辑器中查看参考资料。这篇文章并非关于 Markdown,但以下列出了一些拆分文章所需的最常用标签。


# H1
## H2
### H3
... up to H6

* unordered
* list
* of
* things

1. ordered
1. list
1. of
1. things

![Alt text of image](put-link-to-image-here)

**bold**
_italics_
~~strikethrough~~

👇 Horizontal rules are great a making a hard break between sections

---

Enter fullscreen mode Exit fullscreen mode

DEV 还支持以下 HTML 元素,以增添更多亮点,请谨慎使用。有些元素可能会造成非常突兀的风格,吸引读者的眼球,让他们难以集中注意力。我说的就是你<mark>

<small>small text</small>
<sup>superscript text</sup>
<sub>subscript text</sub>
<mark>highlighted text</mark>
<abbr title="Table of Contents">TOC</abbr>
Enter fullscreen mode Exit fullscreen mode

Liquid 标签

编辑帖子时,点击右侧的“Liquid 标签”引用,即可查看所有内容列表。该post标签是 DEV 的转发。


{% post helenanders26/sql-series-from-a-to-z-2pk9 %}

{% user helenanders26 %}

{% github forem/forem %}

{% github forem/forem no-readme %}

Enter fullscreen mode Exit fullscreen mode

无液体标签

没问题

并非所有东西都适用 Liquid 标签。虽然效果不太好,但你可以用图像来破解一些东西。

不使用 Liquid 标签嵌入内容并不容易,也很难获得良好的互动。我经常会把链接包裹在图片周围,但发现这样做并不能让人感觉图片里真的有内容。大多数时候,我以为它只是打开图片而已。

创建您自己的自定义“液体”标签

[![sign up for my newsletter](https://dev-to-uploads.s3.amazonaws.com/i/9xion9oe68em36mpxiwv.png)](https://waylonwalker.com/newsletter)

<!-- IF you don't want it full width use HTML -->

<a href='https://waylonwalker.com/newsletter'>
  <img width=400 src='https://dev-to-uploads.s3.amazonaws.com/i/9xion9oe68em36mpxiwv.png' alt='newsletter signup' />
</a>

Enter fullscreen mode Exit fullscreen mode

我从@dailydotdev 那里学到的一点是,将图像设计成按钮的形式,并在用链接包裹图像时发出明确的行动号召。


订阅新闻简报

我的 No Liquid Tag Hack 尝试让它看起来像一个按钮的示例

代码块

再次强调,这不是一篇 markdown 帖子,但真的很快想说,确保将语言放在反引号后面以获得良好的语法突出显示。

没有语言就不会突出

def hello_world(who):
   print(f'hello {who}')
```



**with** a language looks much nicer


``` python
def hello_world(who):
   print(f'hello {who}')
```



Here is the comparison in Markdown.

![language tags in markdown](https://dev-to-uploads.s3.amazonaws.com/i/t1hzu8xj4cguyu50fvat.png)


## Article types

As I can see there are several **article types** on DEV.  Each have their own considerations and techniques to make them great,


1. [superpost](#superpost)
1. [single post](#single-post)
1. [series](#series)
1. [discussion](#discussion)

## superpost

I think this is what @dsteenman is eluding to with the (+3000) word post.  This is the hardest to pull off in my opinion, but if done right it will land you at the top of the search for a long time, in the top 7, and potentially the top 1 for a given tag.

I used to think that every post needed to be a super post that everyone would rave over.  I have found personally that attempting to do this makes it so I rarely post and way overthink them.  I need to at least make a cutoff time that the post is going to ship.

This can also be the most frustrating, you have put all of your eggs in one basket.  If you don't title it right, post at the right time, share it at the right time, it might not take off as you had hoped.



@helenanders26 takes the 👑 as the queen of the superpost. She is the first person who comes to mind when I think of this post type

single post

Your average post. There are a lot of great techniques to making the average post great (some added above). Sometimes they find traction, sometimes they don't. I don't sweat if they don't. I like posting shorter content as its achievable for me and my lifestyle. I can always crosslink them and generate more views/discussion across them.

@taillogs has a good article on his process of writing a good post.

For those struggling to find what to write about, this is a great article from @swyx learn-in-public-hack

series

Using the series tag you can break super posts into smaller ones. This puts fewer of your eggs in the same basket. I typically start a series when I know that I am going to post about a single topic often, but don't have it all laid out. I've been told for these to be really successful it needs a bit more pre-thought.

I do notice that I get a bit of engagement back to older posts every time a new one is posted. so this does help drive engagement by continuously pulling readers in. I am not sure if its quite as good as a link, or liquid embed.

Keep in mind the series component will show the first 2 and the last two without clicking show all. Make sure that the first two really count, they will likely get the most traffic benefit from the series.

I personally put a lot of my content into a series. I don't think through the full series ahead of time very much. I do it because it helps me organize and retrieve my thoughts. I find it easier to get back to the post I want to reference if I can find the series it was part of. I think of it as a tag that no one else can post to.

discussion

Posts just like this one, where the author leads the discussion with an intriguing question or comment but holds back on their opinion. The key here is that the author should engage in the discussion, keep the discussion moving, and provide their thoughts here.

Selfishly this is one of my favorite types of posts to make as I learn the most from them.

@ben is the king of the #discuss post. He is able to get just the right titles that pull people in and generate quite large discussions.


Post what you want to read

At the end of the day YOU are the most important component. Post what you like to read, post what you are able to write. If you struggle to wrap your head around concepts in small posts and have a talent at making rockstar super posts do that. Do YOU

Discuss

What are your best tips, or link an article with the best tips to creating a great post?


<table>
<tbody>
<tr>
<td colspan="5">
I have been writing short snippets about my mentality breaking into the tech/data industry in my <a href="https://waylonwalker.com/newsletter"&gt;newsletter&lt;/a>, 👉 check it out and lets get the conversation started.
</td>
<td colspan="1">
<p><a href="https://waylonwalker.com/newsletter"&gt;&lt;img src="https://dev-to-uploads.s3.amazonaws.com/i/9xion9oe68em36mpxiwv.png" alt="Sign up for my Newsletter"></a></p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="https://twitter.com/_waylonwalker"&gt;&lt;img width='30' src="https://github.com/WaylonWalker/WaylonWalker/blob/main/icon/twitter.png?raw=true"&gt;&lt;/a&gt;&lt;/td>
<td><a href="https://instagram.com/_waylonwalker"&gt;&lt;img width='30' src="https://github.com/WaylonWalker/WaylonWalker/blob/main/icon/instagram.jpg?raw=true"&gt;&lt;/a&gt;&lt;/td>
<td><a href="https://www.linkedin.com/in/waylonwalker/"&gt;&lt;img width='30' src="https://github.com/WaylonWalker/WaylonWalker/blob/main/icon/linkedin.png?raw=true"&gt;&lt;/a&gt;&lt;/td>
<td><a href='https://www.buymeacoffee.com/bBdtMQO'>
<img src='https://cdn.buymeacoffee.com/buttons/lato-violet.png' width='200px' />
</a>
</td>
</tr>
<tr>
<td></td>
<td colspan="5" align=center style="text-align: center">
👀 see an issue, edit this post on <a href='https://github.com/WaylonWalker/waylonwalkerv2/edit/main/src/pages/blog/crush-dev-to-posts.md' >GitHub</a>
</td>
</tr>
</tbody>
</table>

Enter fullscreen mode Exit fullscreen mode
文章来源:https://dev.to/waylonwalker/how-to-crush-amazing-posts-on-dev-4cgh
PREV
🤓 你的 GitHub 个人资料 README 上有什么内容已更新,再次更新
NEXT
Wasp 发布第 6 周:Web 开发的趣味一面 🕺