跳转到主要内容

章节Cloudflare 开发者文档（免费档）

Style Guide

163 页更新于 12 小时前

开始阅读

本章内容163

  1. 01 Contributions import { Details } from "~/components"; The Cloudflare Docs are open source and hosted on the cloudflare-do... 12 小时前
  2. 02 Style Guide import { CardGrid, LinkCard } from "~/components"; Use this guide whenever you write or review Cloudflare c... 12 小时前
  3. 03 Guidelines for cURL commands We follow several formatting conventions for cURL commands. Components To automatically incorporate our con... 12 小时前
  4. 04 API content import { DirectoryListing } from "~/components"; Our approach to API documentation aims to: Reduce internal... 12 小时前
  5. 05 Method types & common verbs The verb examples are a small handful of commonly used verbs associated with a method, but you should not f... 12 小时前
  6. 06 Deprecated APIs The purpose of Deprecated API content is to communicate that Cloudflare no longer supports an endpoint and ... 12 小时前
  7. 07 Endpoints An endpoint is used to make HTTPS requests, and the GET, POST, PUT, PATCH, and DELETE methods dictate ... 12 小时前
  8. 08 Get started - API The Get started section provides a brief overview of the Cloudflare’s API and lists requirements and tasks ... 12 小时前
  9. 09 API content types import { DirectoryListing } from "~/components" 12 小时前
  10. 10 Parameters A parameter is an option passed with the endpoint to receive specific information or values. Values default... 12 小时前
  11. 11 Resources The resource groups all of the associated endpoints together. Structure Required components Name: Name of t... 12 小时前
  12. 12 Build the page import { DirectoryListing } from "~/components"; This section covers how a page is put together: the MDX sy... 12 小时前
  13. 13 Markdown and MDX Cloudflare docs pages are authored in MDX, which is Markdown extended with JSX components. Every page is a ... 12 小时前
  14. 14 Anchor heading The AnchorHeading component defines headings. Specifically, AnchorHeading performs the following: Generat... 12 小时前
  15. 15 API request import { APIRequest } from "~/components"; Usage import { APIRequest } from "~/components"; <APIRequest pa... 12 小时前
  16. 16 Available notifications import { AvailableNotifications } from "~/components"; <AvailableNotifications product="Traffic Monitoring"... 12 小时前
  17. 17 Badges import { Badge } from "~/components"; Badges are a built-in component provided by Nimbus. Use them to indic... 12 小时前
  18. 18 Buttons import { LinkButton } from "~/components"; <LinkButton href="/style-guide/build-the-page/components/buttons... 12 小时前
  19. 19 Cards import { Render } from "~/components"; Cards are a built-in component provided by Nimbus. Cards import { Ca... 12 小时前
  20. 20 CfCommand import { Type, MetaInfo } from "~/components"; The CfCommand component documents one Cloudflare CLI comman... 12 小时前
  21. 21 CfNamespace import { Type, MetaInfo } from "~/components"; The CfNamespace component documents every visible command i... 12 小时前
  22. 22 CopyPrompt import { CopyPrompt } from "~/components"; The CopyPrompt component displays a one-line prompt next to a C... 12 小时前
  23. 23 CURL The CURL component is used to display a cURL command for making HTTP requests. Import import { CURL } from... 12 小时前
  24. 24 DashButton import AvailableDashRoutes from "~/components/AvailableDashRoutes.astro"; This component creates a LinkButt... 12 小时前
  25. 25 Descriptions import { Description } from "~/components" <Description> Hello, world! </Description> 12 小时前
  26. 26 Details import { Type, MetaInfo, Render } from "~/components"; When you want to provide additional information in c... 12 小时前
  27. 27 Directory listing import { Render } from "~/components"; Usage import { DirectoryListing } from "~/components"; <p> <strong>... 12 小时前
  28. 28 Example Use the <Example> component to add a box around some content. This can be useful when you want to demonstr... 12 小时前
  29. 29 Feature The <Feature> component lists features available in the product and provides a link button to use the feat... 12 小时前
  30. 30 File tree File tree is a built-in component provided by Nimbus. import { FileTree } from "~/components" <FileTree> - ... 12 小时前
  31. 31 Glossary definition Use the this component to add extra information to an existing glossary entry. term defines which glossary... 12 小时前
  32. 32 Glossary tooltip Use this component to add tooltips to words in your markdown files. The info for the tooltips is pulled in ... 12 小时前
  33. 33 Glossary Use the glossary definition shortcode to render the defined glossary definition. Additionally, you can incl... 12 小时前
  34. 34 Icons import { Render } from "~/components"; There are two icon components which pull from two different icon set... 12 小时前
  35. 35 Components import { Details, Example } from "~/components"; When you are contributing to the Cloudflare Docs, you can ... 12 小时前
  36. 36 Inline badge :::caution[Recommendation: Avoid inline badges] Our current recommendation is to avoid inline badges, since... 12 小时前
  37. 37 Link cards import { CardGrid, LinkCard } from "~/components" <LinkCard title="foo" description="Lorem ipsum do... 12 小时前
  38. 38 List tutorials import { ListTutorials } from "~/components"; <ListTutorials /> Associated content types Tutorial 12 小时前
  39. 39 Markdown This component uses marked to render CommonMark and various other Markdown flavours. :::caution This compo... 12 小时前
  40. 40 Package Managers This component is based on the Nimbus package manager component and adds repository-specific support for gl... 12 小时前
  41. 41 Pages build preset import { PagesBuildPreset } from "~/components"; <PagesBuildPreset framework="gatsby" /> <PagesBuildPreset ... 12 小时前
  42. 42 Plan The plan component lets you define what type of plan your product needs. Use it in the main Overview page o... 12 小时前
  43. 43 Product availability text The ProductAvailabilityText component dynamically renders a product's lifecycle status (such as "Beta" or ... 12 小时前
  44. 44 Product changelog This component can be used to display entries from the changelog for a given product or product area. Impor... 12 小时前
  45. 45 Public stats import { Render } from "~/components"; Refer to the examples below for more information. import { PublicSta... 12 小时前
  46. 46 Related product The <RelatedProduct> component lists products related or connected to the current product. The header para... 12 小时前
  47. 47 Render import { Code, Details, Type, MetaInfo } from "~/components"; The Render component allows us to include a ... 12 小时前
  48. 48 Resources by selector import { Type, MetaInfo } from "~/components"; The ResourcesBySelector component allows you to pull in doc... 12 小时前
  49. 49 RSSButton import { RSSButton } from "~/components"; <RSSButton changelog="Workers" /> <br /> <RSSButton href="/custom... 12 小时前
  50. 50 Rule ID import { RuleID } from "~/components" <RuleID id="abcdefghijklmnopqrstuvwxyz" /> 12 小时前
  51. 51 Steps import { Steps } from "~/components" <Steps> 1. Import the `Steps` components 2. Wrap your numbered list in... 12 小时前
  52. 52 Stream import { Stream } from "~/components"; Usage import { Stream } from "~/components"; <Stream id="86f22d1f760... 12 小时前
  53. 53 Subtract IP calculator import { SubtractIPCalculator } from "~/components"; Import import { SubtractIPCalculator } from "~/compone... 12 小时前
  54. 54 Tabs import { Tabs, TabItem, Render } from "~/components"; This component can help you create a tabbed interface... 12 小时前
  55. 55 Type highlighting import { Type } from "~/components"; <Type text="Promise<T | string | ArrayBuffer>" /> MetaInfo import { Me... 12 小时前
  56. 56 TypeScript example The TypeScriptExample component uses ts-blank-space to remove TypeScript-specific syntax from your exampl... 12 小时前
  57. 57 Usage import ComponentsUsage from "~/components/cf/ComponentsUsage.astro"; This page contains a breakdown of each... 12 小时前
  58. 58 Width This component can be used to constrain the width of content, such as text or images. Import import { Width... 12 小时前
  59. 59 WranglerCommand import { Type, MetaInfo } from "~/components"; The WranglerCommand component documents the available optio... 12 小时前
  60. 60 WranglerConfig This component can be used to automatically generate a jsonc version of the toml file (or vice versa) of ... 12 小时前
  61. 61 WranglerNamespace import { Type, MetaInfo } from "~/components"; The WranglerNamespace component documents the available com... 12 小时前
  62. 62 YouTube import { YouTube } from "~/components" import { YouTube } from "~/components" <YouTube id="XHvmX3FhTwU" /> 12 小时前
  63. 63 Banner import { Steps, FileTree } from "~/components"; One of the fields you can add to the Frontmatter is banner... 12 小时前
  64. 64 Custom properties import { Type, MetaInfo } from " /components"; import BaseSchemaProperties from "/components/BaseSchemaProp... 12 小时前
  65. 65 Frontmatter Frontmatter contains the metadata for a page, such as the title. It is written as YAML, between ---, at t... 12 小时前
  66. 66 Sidebar import { Steps, FileTree } from "~/components"; Labels Labels are controlled by frontmatter properties on a... 12 小时前
  67. 67 File conventions Our docs have a few conventions around files. Naming When creating new files, follow specific conventions f... 12 小时前
  68. 68 Product content import { DirectoryListing } from "~/components"; This section is the planning layer of the style guide. It ... 12 小时前
  69. 69 Information architecture Every product's documentation is built from the same core set of sections, so a reader who knows one produc... 12 小时前
  70. 70 Dynamic lists Dynamic lists automatically add or remove elements based on set criteria. Used in When at all possible, Clo... 12 小时前
  71. 71 Examples A code sample or line of text that shows the specific structure of a request/response, input/output, or val... 12 小时前
  72. 72 Glossary entry import { GlossaryDefinition, GlossaryTooltip } from "~/components"; Definition A single term and correspond... 12 小时前
  73. 73 Images and diagrams Images help a reader see a tool, a process, or an architecture. This page covers three: screenshots, diagra... 12 小时前
  74. 74 Component attributes import { DirectoryListing } from "~/components"; Component attributes are the content-strategy parts a page... 12 小时前
  75. 75 Introductions import { PublicStats } from "~/components"; The introductory parts of a page sit at the top and tell a read... 12 小时前
  76. 76 Last updated A date displayed at the bottom of each page that shows when the content on the page was last modified. This... 12 小时前
  77. 77 Mathematical operations Expressions that show how to make a particular calculation. Used in How to, Reference, Tutorial Structure I... 12 小时前
  78. 78 Next steps The end result of a procedure and the actionable steps to take after completing it. When to use it Use next... 12 小时前
  79. 79 Notes/tips/warnings A colored info box or aside with content (text, images, lists, code blocks) that adds relevant notes that d... 12 小时前
  80. 80 Prerequisites Tasks that must be completed or conditions that must be met before a user can complete the steps on a page.... 12 小时前
  81. 81 Product descriptions Statements about the product and its benefits for customers. When to use it Use product descriptions in the... 12 小时前
  82. 82 Steps/tasks/procedures Action-oriented processes that outline steps to take and the order the steps should be taken. Used in How t... 12 小时前
  83. 83 Titles The first line of text on a page. H1. Used in All content types Overview, How to, Configuration, FAQ, Chang... 12 小时前
  84. 84 3rd-party integration guide A third-party integration guide explains how to use a third-party product with Cloudflare. Because Cloudfla... 12 小时前
  85. 85 Changelog import { Render, Type, MetaInfo } from "~/components"; A changelog logs notable, dated changes to a product... 12 小时前
  86. 86 Concept import { Render } from "~/components"; A concept page builds the reader's mental model of a topic: what a t... 12 小时前
  87. 87 Configuration A configuration page shows the specific settings, values, and options for a configuration-intensive feature... 12 小时前
  88. 88 Design guide A design guide helps a reader plan and design a specific solution with Cloudflare, focusing on the architec... 12 小时前
  89. 89 FAQ An FAQ page collects common questions on a topic with short, direct answers, giving a reader a fast path to... 12 小时前
  90. 90 Get started import { Render } from "~/components"; A get-started page takes a new user from not using a product to a fi... 12 小时前
  91. 91 How to import { Render } from "~/components"; A how-to explains how to complete a single task within a product. Th... 12 小时前
  92. 92 Content types Every documentation page has a content type: a defined shape for what it contains, how it is structured, an... 12 小时前
  93. 93 Navigation A navigation page is a sub-landing page that points a reader deeper into a specific area of the documentati... 12 小时前
  94. 94 Overview import { Render } from "~/components"; An overview is the landing page a reader reaches first in a product ... 12 小时前
  95. 95 Reference architecture A reference architecture is a high-level design document that shows how Cloudflare products fit into a cust... 12 小时前
  96. 96 Reference import { Render } from "~/components"; A reference page enumerates the facts about one nameable surface, su... 12 小时前
  97. 97 Troubleshooting import { Render } from "~/components"; A troubleshooting page pairs each failure a reader hits with its cau... 12 小时前
  98. 98 Tutorial import { Render } from "~/components"; A tutorial takes a newcomer from nothing to a working project, one v... 12 小时前
  99. 99 AI consumability import { Tabs, TabItem, Render } from "~/components"; We have various approaches for making our content vis... 12 小时前
  100. 100 Image maintenance Though valuable for user understanding, images are difficult to maintain. We have a few strategies that we ... 12 小时前
  101. 101 How we docs import { DirectoryListing } from "~/components"; This section shares how Cloudflare approaches docs strateg... 12 小时前
  102. 102 Link maintenance Though links are an important part of documentation, they also have their own maintenance cost. We have a f... 12 小时前
  103. 103 Metadata Page-level metadata - content type, associated products, last updated, word count - lets you take a broader... 12 小时前
  104. 104 Our site We use a variety of tools to make our docs site work. You could use these tools to build up your own docs s... 12 小时前
  105. 105 Redirects import { Details, GlossaryTooltip } from "~/components"; As your content changes (and it will change), redi... 12 小时前
  106. 106 Control how AI crawls your docs import { Example } from "~/components"; Allowing AI crawlers to crawl your documentation enables end users ... 12 小时前
  107. 107 How we AI import { DirectoryListing } from "~/components"; This section shares how Cloudflare uses AI to accelerate a... 12 小时前
  108. 108 Prompt libraries A prompt library is a curated and organized collection of pre-written prompts. These libraries serve as a v... 12 小时前
  109. 109 Prompt templates import { Code } from "~/components"; A prompt template is a reusable, pre-structured format for creating pr... 12 小时前
  110. 110 When we use AI AI is a powerful tool, but it is not a cure-all. Its success depends heavily on the use case. Knowing its s... 12 小时前
  111. 111 Cloudspeaker One of the greatest challenges at any scale is understanding what your customers are really saying. At Clou... 12 小时前
  112. 112 CLUE At Cloudflare, we believe that high-quality, customer-facing content is a critical part of the user experie... 12 小时前
  113. 113 Examples import { DirectoryListing } from "~/components"; The true value of AI is not just in using it; it is in how... 12 小时前
  114. 114 How we video import { DirectoryListing } from "~/components"; This page explains Cloudflare's approach to integrating vi... 12 小时前
  115. 115 Integration in docs Our goal is to integrate video directly into the documentation so it accelerates the user experience and le... 12 小时前
  116. 116 Maintenance Producing a video is just the beginning. Videos are inherently harder to edit than text, making maintenance... 12 小时前
  117. 117 Video production workflow We follow a specific workflow and formatting specifications for our videos to ensure they are accurate, eng... 12 小时前
  118. 118 Why and when we use videos We believe video is a powerful tool that complements documentation to help users quickly grasp complex conc... 12 小时前
  119. 119 Accessibility guidelines import { Render } from "~/components"; Create documentation that is accessible to all users, including disa... 12 小时前
  120. 120 Style and grammar import { DirectoryListing } from "~/components"; This section covers how a page should read: the house voic... 12 小时前
  121. 121 Voice and tone import { Render } from "~/components"; Use the following writing guidelines to create product content that ... 12 小时前
  122. 122 URLs and domain names When referring to a URL in text, do not use http:// or www with a Cloudflare web address. Use www only w... 12 小时前
  123. 123 Code block guidelines To create a code block: Use triple-grave characters ( ```) as a fence, and enter a language name after the ... 12 小时前
  124. 124 Code conventions and format Use the conventions described below throughout Cloudflare product content. Learn about code block formattin... 12 小时前
  125. 125 Dates and times To account for internationalization and inclusivity of all locales, use the ISO-8601 (YYYY-MM-DD hh:mm:ss) ... 12 小时前
  126. 126 Example values As described in RFC 2606 and RFC 6761, a number of domains such as example.com and example.org are mainta... 12 小时前
  127. 127 External references When referencing external resources, ensure that you are linking to a trustworthy source that is recognized... 12 小时前
  128. 128 File types and extensions You can refer both to file types and file extensions in documentation: File types: Accepted file formats ar... 12 小时前
  129. 129 Footnotes Use footnotes to add details or context about something without distracting from the main content. We recom... 12 小时前
  130. 130 Formatting import { DirectoryListing } from "~/components" 12 小时前
  131. 131 Keyboard keys Use select instead of click when directing users to choose or select objects, commands, or options. Use pre... 12 小时前
  132. 132 Notes and other notation types When adding a note to a page, always use this special note formatting. There are three types of formatted n... 12 小时前
  133. 133 Numbers and units of measurement Be consistent in your use of numbers. Use numerals for numbers. When you write about numbers used in exampl... 12 小时前
  134. 134 Product name and pluralization Product names should follow a noun-verb agreement such that the verb is singular. Examples: Cloudflare Page... 12 小时前
  135. 135 UI elements UI elements are the interactive parts of a product. They are used to build the software's interface. When d... 12 小时前
  136. 136 Structure import { DirectoryListing } from "~/components" 12 小时前
  137. 137 Links import { Render } from "~/components"; A link is a reference to another page, part of a page, or external r... 12 小时前
  138. 138 Lists There are three types of lists: Bulleted lists for unordered items Numbered lists for ordered items Embedde... 12 小时前
  139. 139 Paragraphs and line breaks To start a new paragraph, leave an empty line (with no spaces) before adding the new paragraph content. Thi... 12 小时前
  140. 140 Sentence structure Fifteen words or fewer is a good rule of thumb for readability. You can use the Hemingway App to check leng... 12 小时前
  141. 141 Tables import { Render } from "~/components"; Using tables to simplify content and data provides a comprehensive w... 12 小时前
  142. 142 Grammar import { DirectoryListing } from "~/components" 12 小时前
  143. 143 Abbreviations Abbreviations include acronyms, initialisms, shortened words, and contractions (in most contexts, the techn... 12 小时前
  144. 144 Acronyms Define new and unfamiliar terms. Acronyms and abbreviations can have an adverse effect on clarity, voice, a... 12 小时前
  145. 145 Anthropomorphisms Avoid Anthropomorphisms in product content. Anthropomorphism is attributing human characteristics to inanim... 12 小时前
  146. 146 Capitalization Capitalize names of Cloudflare products, services, and features. Each product, service, and feature should ... 12 小时前
  147. 147 Compound words Whitespace is used in our blog posts and product content. For the sake of consistency, follow these convent... 12 小时前
  148. 148 Contractions Avoid using contractions such as don't, won't, and can't. 12 小时前
  149. 149 Parts of speech import { DirectoryListing } from "~/components" 12 小时前
  150. 150 Nouns and pronouns Refer to the customer in the second person. Where this is not possible, use gender neutral pronouns. Do not... 12 小时前
  151. 151 Possessives In general, avoid the 's construction to show possession by an inanimate object as doing so personifies the... 12 小时前
  152. 152 Prepositions You can put a preposition at the end of a sentence, but do not do it often. Your sentences can sound stilte... 12 小时前
  153. 153 Slang Avoid all slang, especially derogatory or vulgar language. 12 小时前
  154. 154 Ampersands Do not use ampersands, except where space is limited in the UI and where they are part of existing proper n... 12 小时前
  155. 155 Colons import { Render } from "~/components"; Use colons to introduce unordered lists, tables, or images. Always p... 12 小时前
  156. 156 Commas Use the Oxford comma in lists of three or more items in a sentence. Use commas to separate clauses. Break u... 12 小时前
  157. 157 Dashes Dashes look like hyphens, but are wider. An em dash is the widest type of dash. Dashes have a different pur... 12 小时前
  158. 158 Exclamation points Avoid using exclamation points in most writing! Exclamation points are appropriate for success messages or ... 12 小时前
  159. 159 Punctuation marks and symbols import { DirectoryListing } from "~/components" 12 小时前
  160. 160 Percentages Use the % symbol for percentages instead of “percent” after the numeral. 12 小时前
  161. 161 Periods Do not use periods in titles or headings. Only use periods for complete sentences in body text. 12 小时前
  162. 162 Quotation marks In general, avoid the 's construction to show possession by an inanimate object. Doing so personifies the ... 12 小时前
  163. 163 Semicolons Avoid semicolons when possible. Break down long explanations into shorter, simpler sentences. 12 小时前