是否可以让自述文件首先出现在 Storybook 导航中，然后是所有故事？

Question

我将所有 Storybook 故事都嵌套在 \xe2\x80\x9cDocs\xe2\x80\x9d 标题下。每个组件都会获得一个 README mdx 文件，然后根据需要获得尽可能多的故事。我希望自述文件始终首先出现在导航中，然后可以自然地对故事进行排序。

\n

这是我想要的排序：

\n

Docs\n\xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80 Button\n\xe2\x94\x82  \xe2\x94\x82\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 README\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Button Story One\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Button Story Two\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 Button Story One\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80 Grid\n   \xe2\x94\x82\n   \xe2\x94\x9c\xe2\x94\x80 README\n   \xe2\x94\x82\n   \xe2\x94\x9c\xe2\x94\x80 Column\n   \xe2\x94\x82  \xe2\x94\x82\n   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 README\n   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Column Story One\n   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Column Story Two\n   \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 Column Story Three\n   \xe2\x94\x82\n   \xe2\x94\x94\xe2\x94\x80 Row\n      \xe2\x94\x82\n      \xe2\x94\x9c\xe2\x94\x80 README\n      \xe2\x94\x9c\xe2\x94\x80 Row Story One\n      \xe2\x94\x9c\xe2\x94\x80 Row Story Two\n      \xe2\x94\x94\xe2\x94\x80 Row Story Three\n

\n

您\xe2\x80\x99会注意到有3个级别，但根据组件的复杂性，可能有多达4个级别，每个级别都有一个自述文件。

\n

这种自定义排序可以吗？如果是这样，怎么办？

\n

这是推荐的排序算法：

\n

Docs\n\xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80 Button\n\xe2\x94\x82  \xe2\x94\x82\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 README\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Button Story One\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Button Story Two\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 Button Story One\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80 Grid\n   \xe2\x94\x82\n   \xe2\x94\x9c\xe2\x94\x80 README\n   \xe2\x94\x82\n   \xe2\x94\x9c\xe2\x94\x80 Column\n   \xe2\x94\x82  \xe2\x94\x82\n   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 README\n   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Column Story One\n   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 Column Story Two\n   \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 Column Story Three\n   \xe2\x94\x82\n   \xe2\x94\x94\xe2\x94\x80 Row\n      \xe2\x94\x82\n      \xe2\x94\x9c\xe2\x94\x80 README\n      \xe2\x94\x9c\xe2\x94\x80 Row Story One\n      \xe2\x94\x9c\xe2\x94\x80 Row Story Two\n      \xe2\x94\x94\xe2\x94\x80 Row Story Three\n

\n

其中a[1]和b[1]是具有以下结构的对象：

\n

return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });\n

\n

Answer 1

尝试以下操作...

storyBookArray.sort( ( a, b ) => {

  let aPath = a.kind.replace( /\/README$/, '/' );
  let bPath = b.kind.replace( /\/README$/, '/' );
  
  return aPath.localeCompare( bPath );
    
} );

localeCompare简而言之，这会将路径末尾的任何“/README”替换为“/”，这意味着空文件名，从而当在两个路径上执行时，将“README”放在该路径内的列表的头部在排序过程中。

假设如果 StoryBookArray 除了文件之外还跟踪目录，则目录被指定为“Docs/Grid”，不带尾部斜杠...