Skip to content

fix(web): /guides 橙云篇改吃信息型意图，不再与首页抢品牌词 #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chen2he wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(web): /guides 橙云篇改吃信息型意图，不再与首页抢品牌词 #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/app/[locale]/guides/cloudflare-cname-flattening/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const FAQ: Array<{ q: string; a: string }> = [
const RELATED: RelatedLink[] = [
{
href: "/guides/what-is-the-orange-cloud-in-cloudflare",
label: "What does the orange cloud mean in Cloudflare?",
label: "Orange cloud vs grey cloud: proxied vs DNS only",
note: "Every proxied record is flattened by definition — this is what the proxy returns instead of your origin.",
},
{
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/[locale]/guides/cloudflare-orange-to-orange/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const FAQ: Array<{ q: string; a: string }> = [
const RELATED: RelatedLink[] = [
{
href: "/guides/what-is-the-orange-cloud-in-cloudflare",
label: "What does the orange cloud mean in Cloudflare?",
label: "What is the orange cloud in Cloudflare?",
note: "The prerequisite: proxied vs DNS only, which records qualify, and which ports the proxy covers.",
},
{
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/[locale]/guides/cloudflare-purge-cache-not-working/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const RELATED: RelatedLink[] = [
},
{
href: "/guides/what-is-the-orange-cloud-in-cloudflare",
label: "What does the orange cloud mean in Cloudflare?",
label: "What does DNS only mean in Cloudflare?",
note: "Nothing is cached — and nothing can be purged — on a hostname that is set to DNS only.",
},
{
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/app/[locale]/guides/cloudflare-ssl-tls-encryption-modes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const FAQ: Array<{ q: string; a: string }> = [
const RELATED: RelatedLink[] = [
{
href: "/guides/what-is-the-orange-cloud-in-cloudflare",
label: "What does the orange cloud mean in Cloudflare?",
label: "What is the orange cloud in Cloudflare?",
note: "The prerequisite: encryption modes only apply to records that are proxied in the first place.",
},
{
Expand Down Expand Up @@ -165,7 +165,7 @@ export default async function EncryptionModesGuide({ params }: { params: Promise
connects directly, so there is no second hop for the mode to govern. If that distinction is new,
start with{" "}
<Link href="/guides/what-is-the-orange-cloud-in-cloudflare">
what the orange cloud means in Cloudflare
what the orange cloud is and what proxying changes
</Link>
.
</p>
Expand Down
179 changes: 100 additions & 79 deletions apps/web/src/app/[locale]/guides/what-is-the-orange-cloud-in-cloudflare/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/web/src/app/[locale]/guides/why-is-cloudflare-not-caching-my-site/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ export default async function NotCachingGuide({ params }: { params: Promise<{ lo
is missing, the response came from your origin, whatever else the page appears to be doing. If the
headers are absent entirely, the hostname is probably not proxied at all — see{" "}
<Link href="/guides/what-is-the-orange-cloud-in-cloudflare">
what the orange cloud means in Cloudflare
proxied vs DNS only
</Link>{" "}
for that case, because a DNS-only record never reaches a cache in the first place.
</p>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/[locale]/guides/why-is-my-cloudflare-dns-change-not-working/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const FAQ: Array<{ q: string; a: string }> = [
const RELATED: RelatedLink[] = [
{
href: "/guides/what-is-the-orange-cloud-in-cloudflare",
label: "What does the orange cloud mean in Cloudflare?",
label: "Orange cloud vs grey cloud, explained",
note: "Why a proxied record never returns your origin IP — and why that changes what dig can tell you.",
},
{
Expand Down
115 changes: 115 additions & 0 deletions apps/web/src/components/guides/ProxyStatusPaths.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
/**
* 代理状态对照图：同一个名字在橙云 / 灰云下，DNS 答案与请求路径分别长什么样。
* 纯 SVG、无 JS；配色全走主题 token，亮/暗两套都成立；单列竖排，窄屏不溢出。
* 说明文字一律放在方框外的整幅宽度上——框内只留一个词，避免窄屏挤到边。
*/
export default function ProxyStatusPaths() {
const node = (x: number, y: number) => ({ x, y, width: 100, height: 48, rx: 12 });
const MONO = "ui-monospace, SFMono-Regular, Menlo, monospace";

return (
<figure className="my-8">
<svg
viewBox="0 0 360 352"
role="img"
aria-label="Two request paths compared. With the orange cloud the DNS answer is a Cloudflare anycast address and the request goes from the visitor to Cloudflare and then to your origin, so caching, WAF and Rules run at the Cloudflare hop. With the grey cloud the DNS answer is your own server address and the request goes straight from the visitor to your origin, skipping Cloudflare entirely."
className="mx-auto block h-auto w-full max-w-[440px]"
>
<title>Orange cloud (proxied) vs grey cloud (DNS only): the two request paths</title>

<defs>
<marker id="ps-arrow" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0 0 L8 4 L0 8 z" fill="var(--oc-orange)" />
</marker>
<marker id="ps-arrow-grey" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0 0 L8 4 L0 8 z" fill="var(--t-tertiary)" />
</marker>
</defs>

{/* —— 橙云：请求先到 Cloudflare —— */}
<text x="180" y="16" textAnchor="middle" fontSize="11" letterSpacing="0.8" fill="var(--oc-orange)">
ORANGE CLOUD · PROXIED
</text>
<text x="180" y="39" textAnchor="middle" fontSize="11" fill="var(--t-secondary)" fontFamily={MONO}>
DNS answer: 104.21.0.1
</text>

<rect {...node(8, 54)} fill="var(--glass-bg)" stroke="var(--divider)" />
<text x="58" y="83" textAnchor="middle" fontSize="13" fill="var(--t-primary)">
Visitor
</text>

<rect {...node(130, 54)} fill="var(--glass-bg)" stroke="var(--oc-orange)" strokeOpacity="0.6" />
<text x="180" y="83" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--t-primary)">
Cloudflare
</text>

<rect {...node(252, 54)} fill="var(--glass-bg)" stroke="var(--divider)" />
<text x="302" y="83" textAnchor="middle" fontSize="13" fill="var(--t-primary)">
Your origin
</text>

<g stroke="var(--oc-orange)" strokeWidth="1.6" markerEnd="url(#ps-arrow)" fill="none">
<path d="M108 78 L126 78" />
<path d="M230 78 L248 78" />
</g>

<text x="180" y="126" textAnchor="middle" fontSize="11.5" fill="var(--t-secondary)">
Cache, WAF and Rules run at this hop.
</text>
<text x="180" y="144" textAnchor="middle" fontSize="11.5" fill="var(--t-secondary)">
Your origin address is never published for this name.
</text>

<line x1="30" y1="168" x2="330" y2="168" stroke="var(--divider)" strokeWidth="1" />

{/* —— 灰云：Cloudflare 根本不在路径上 —— */}
<text x="180" y="199" textAnchor="middle" fontSize="11" letterSpacing="0.8" fill="var(--t-tertiary)">
GREY CLOUD · DNS ONLY
</text>
<text x="180" y="222" textAnchor="middle" fontSize="11" fill="var(--t-secondary)" fontFamily={MONO}>
DNS answer: 203.0.113.10
</text>

<rect {...node(8, 237)} fill="var(--glass-bg)" stroke="var(--divider)" />
<text x="58" y="266" textAnchor="middle" fontSize="13" fill="var(--t-primary)">
Visitor
</text>

<rect
{...node(130, 237)}
fill="none"
stroke="var(--divider)"
strokeDasharray="4 5"
strokeOpacity="0.8"
/>
<text x="180" y="260" textAnchor="middle" fontSize="13" fill="var(--t-tertiary)">
Cloudflare
</text>
<text x="180" y="276" textAnchor="middle" fontSize="11" fill="var(--t-tertiary)">
skipped
</text>

<rect {...node(252, 237)} fill="var(--glass-bg)" stroke="var(--divider)" />
<text x="302" y="266" textAnchor="middle" fontSize="13" fill="var(--t-primary)">
Your origin
</text>

<path
d="M108 268 C 142 322, 218 322, 246 272"
fill="none"
stroke="var(--t-tertiary)"
strokeWidth="1.6"
markerEnd="url(#ps-arrow-grey)"
/>

<text x="180" y="345" textAnchor="middle" fontSize="11.5" fill="var(--t-secondary)">
Nothing to cache, filter or log.
</text>
</svg>
<figcaption className="mt-3 text-center text-[13px] leading-relaxed t-tertiary">
The toggle changes the DNS answer first; the path follows.
</figcaption>
</figure>
);
}
12 changes: 6 additions & 6 deletions apps/web/src/lib/guides/guides.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ export type GuideMeta = {
export const GUIDES: GuideMeta[] = [
{
slug: "what-is-the-orange-cloud-in-cloudflare",
h1: "What Does the Orange Cloud Mean in Cloudflare?",
title: "Cloudflare Orange Cloud: Proxied vs DNS Only, Explained",
h1: "What Is the Orange Cloud in Cloudflare?",
title: "What Is the Orange Cloud? Proxied vs DNS Only in Cloudflare",
description:
"The orange cloud means a DNS record is proxied through Cloudflare. The gray cloud means DNS only. What changes, which records qualify, when to use each.",
"The orange cloud means a DNS record is proxied through Cloudflare; the grey cloud means DNS only. What changes, which records qualify, when to use each.",
blurb:
"Proxied vs DNS only: what the toggle actually changes, which record types and ports it covers, and how to read the errors it causes.",
updated: "2026-08-19",
readingTime: "8 min read",
"Orange cloud vs grey cloud, proxied vs DNS only: what the toggle actually changes, which record types and ports it covers, and the errors it causes.",
updated: "2026-08-23",
readingTime: "9 min read",
},
{
slug: "cloudflare-orange-to-orange",
Expand Down