SEO煉金術（4）| Next.js SEO 全攻略

在上一篇文章 SEO煉金術（3）| 深入解析 SEO 關鍵要素 中，我們深入解析了 SEO 關鍵要素，包括 meta 標簽、robots.txt、canonical、sitemap.xml 和 hreflang，并探討了它們在搜索引擎優化（SEO）中的作用。然而，對于使用 Next.js 開發的網站，手動管理這些 SEO 相關的配置可能會非常繁瑣。

幸運的是，Next.js 內置了豐富的 SEO 支持，能夠自動化和簡化這些優化過程。本文將全面介紹 Next.js 提供的 SEO 相關功能，并通過示例演示如何在 Next.js 項目中正確配置 metadata、canonical、robots.txt、sitemap.xml 和 hreflang，確保你的網站能夠在搜索引擎中獲得最佳表現。🚀

📌 1. Next.js 的 SEO 相關功能

Next.js 提供了多種 SEO 相關的工具，使開發者無需手動編寫 HTML head 標簽，而是通過 配置和 API 自動生成正確的 SEO 標記。

📌 Next.js SEO 主要功能概覽

SEO 需求Next.js 提供的解決方案作用
標題 <title>和 meta標簽metadata API設置頁面標題、描述等
避免重復 URL（canonical）metadata API (canonical 字段)規范化 URL，防止 SEO 權重分散
控制爬取與索引（robots.txt和 meta robots）robots.ts設定爬蟲訪問規則
**自動生成 sitemap.xml`sitemap.(xmljs
多語言 SEO（hreflang）metadataAPI (alternates)多語言優化，確保用戶訪問正確版本
Open Graph / Twitter MetametadataAPI (openGraph
/ twitter)		提高社交媒體分享效果

📌 2. 在 Next.js 中實現 SEO

2.1 內置 metadata API（元數據 API）

Next.js 13+ 引入了 metadata API，替代了 next/head，可以在 layout.tsx 或 page.tsx 中直接定義 SEO 相關的元數據。

示例

import type { Metadata } from 'next'export const metadata: Metadata = {title: 'Next.js SEO Optimization',description: 'Learn how to optimize Next.js applications for SEO.',keywords: ['Next.js', 'SEO', 'optimization'],robots: {index: true, // 允許搜索引擎索引follow: true, // 允許搜索引擎跟蹤鏈接},alternates: {canonical: 'https://example.com/seo',},openGraph: {title: 'Next.js SEO',description: 'A comprehensive guide to SEO in Next.js',url: 'https://example.com/seo',images: [{url: 'https://example.com/og-image.jpg',width: 1200,height: 630,},],type: 'website',},twitter: {card: 'summary_large_image',title: 'Next.js SEO',description: 'A comprehensive guide to SEO in Next.js',images: ['https://example.com/twitter-card.jpg'],},
}

2.1.1詳細字段解析

1?? 標題相關

字段作用是否影響 SEO
title設置頁面 <title>
標簽		? 影響排名
title.default作為子路由的默認標題? 影響排名
title.template用于拼接標題（如 `%s網站名`）
title.absolute設定不受 title.template
影響的標題		? 影響排名

示例：

export const metadata: Metadata = {title: {template: '%s | My Website',default: 'My Website',},
}

輸出

<title>My Page | My Website</title>

2??頁面描述

字段作用是否影響 SEO
description設置 <meta name="description">，用于搜索引擎結果頁摘要? 影響搜索結果 CTR

示例：

export const metadata: Metadata = {description: 'Next.js SEO Best Practices',
}

輸出

<meta name="description" content="Next.js SEO Best Practices" />

3??關鍵詞

字段作用是否影響 SEO
keywords設置 <meta name="keywords">，定義頁面的關鍵詞（部分搜索引擎已忽略）? 影響極小

示例：

export const metadata: Metadata = {keywords: ['Next.js', 'SEO', 'Optimization'],
}

輸出

<meta name="keywords" content="Next.js, SEO, Optimization" />

4?? 搜索引擎爬取策略

字段作用是否影響 SEO
robots控制搜索引擎的索引策略? 影響網頁是否被收錄

示例：

export const metadata: Metadata = {robots: {index: true,follow: true,noimageindex: false,googleBot: {index: true,follow: true,'max-image-preview': 'large',},},
}

輸出

<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, max-image-preview:large" />

5?? 規范 URL（Canonical）

字段作用是否影響 SEO
alternates.canonical設置 <link rel="canonical">，避免重復內容問題? 影響頁面權重

示例：

export const metadata: Metadata = {alternates: {canonical: 'https://example.com/seo',},
}

輸出

<link rel="canonical" href="https://example.com/seo" />

6?? Open Graph & Twitter 預覽

字段作用是否影響 SEO
openGraph定義 Facebook、LinkedIn 等社交媒體的 Open Graph 數據? 增強分享體驗
twitter定義 Twitter/X 分享預覽? 增強分享體驗

示例：

export const metadata: Metadata = {openGraph: {title: 'Next.js SEO',description: 'A guide to SEO in Next.js',url: 'https://example.com/seo',images: [{ url: 'https://example.com/og-image.jpg', width: 1200, height: 630 },],type: 'website',},twitter: {card: 'summary_large_image',title: 'Next.js SEO',description: 'A guide to SEO in Next.js',images: ['https://example.com/twitter-card.jpg'],},
}

輸出

<meta property="og:title" content="Next.js SEO" />
<meta property="og:description" content="A guide to SEO in Next.js" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Next.js SEO" />
<meta name="twitter:image" content="https://example.com/twitter-card.jpg" />

7?? 其他 SEO 相關元數據

字段作用是否影響 SEO
metadataBase設定 URL 前綴，方便定義絕對路徑的 metadata? 影響 URL 結構
icons網站圖標（favicon、Apple Touch Icon 等）? 影響分享體驗
manifest設置 Web App Manifest 文件? 僅影響 PWA
appleWebApp定義 Apple Web App 相關設置? 僅影響 iOS 設備
appLinks定義 Android/iOS App 關聯鏈接? 僅影響 App 跳轉
facebook設置 Facebook App ID 或管理員 ID? 僅影響 Facebook
verification用于 Google、Yandex、Yahoo 站點驗證? 僅影響站點所有權認證

2.1.2 Metadata API 最佳實踐

? 默認在 layout.tsx 中定義 metadata，以便所有子頁面繼承默認值。
? 子頁面可以覆蓋 title 和 description，確保每個頁面唯一性。
? 使用 metadataBase 設定 URL 前綴，簡化 canonical 和 og:image 配置。
? **openGraph 和 twitter 提升社交媒體分享體驗，增加流量入口。
? **如果頁面是動態的，使用 generateMetadata() 以根據 params 生成動態 title。

2.2 生成 robots.txt 文件

在 Next.js 中，你可以 **手動添加robots.txt靜態文件，或者 **動態生成robots.txt 以控制爬蟲的抓取行為。Next.js 提供了一種 更智能 的方式，允許我們通過 robots.ts 文件 動態生成 規則，使 SEO 維護更加靈活。

2.2.1 使用靜態 robots.txt

如果你的網站 不需要動態調整爬蟲規則，可以直接在 app/ 目錄下創建 robots.txt靜態文件，這樣 Next.js 會自動提供該文件，不需要額外的代碼。

📌 創建 app/robots.txt

User-Agent: *
Allow: /
Disallow: /private/
Sitemap: https://example.com/sitemap.xml

📌 訪問 https://example.com/robots.txt，你會看到：

User-Agent: *
Allow: /
Disallow: /private/
Sitemap: https://example.com/sitemap.xml

? 適用場景：

  • 規則固定，不會根據環境或內容變化。
  • 適用于小型網站，規則簡單且不會變動。

🚨 但如果你需要動態管理爬蟲規則，比如針對不同環境（開發/生產），或者對特定 URL 進行調整，就需要使用動態生成的方法。

2.2.2 通過 robots.ts 動態生成 robots.txt

Next.js 支持動態生成robots.txt，通過 app/robots.ts 讓 robots.txt 自動適配不同環境。

📌步驟：在 app/robots.ts 中創建動態 robots.txt

import type { MetadataRoute } from 'next'export default function robots(): MetadataRoute.Robots {return {rules: [{ userAgent: '*', allow: '/' }, // 允許所有爬蟲訪問整個網站{ userAgent: 'Googlebot', disallow: '/private/' }, // Googlebot 不能訪問 /private/],sitemap: 'https://example.com/sitemap.xml', // 指定 sitemap 位置}
}

📌 訪問 https://example.com/robots.txt，你會看到：

User-Agent: *
Allow: /
User-Agent: Googlebot
Disallow: /private/
Sitemap: https://example.com/sitemap.xml

? robots.ts 作用

  • 動態生成 robots.txt，自動適配不同環境。
  • 支持不同爬蟲設置不同規則（如 Googlebot、Bingbot）。
  • 無需手動維護 robots.txt 文件，防止因修改錯誤導致 SEO 受損。
  • 自動緩存，提高性能。

2.2.3 robots.ts 的存放位置

  • 需要 **手動創建app/robots.ts，它不會默認存在。
  • robots.ts 必須放在 app/ 目錄下的根路徑**，保證 https://example.com/robots.txt 能夠正確訪問。
  • ?? 注意：如果 robots.txt 和 robots.ts 同時存在，Next.js 只會使用 robots.txt（靜態文件優先）。

2.2.4 robots.ts 高級用法

如果你需要 對不同搜索引擎設置不同規則，可以 傳遞數組 讓多個爬蟲遵循不同的規則。

📌 示例：針對不同搜索引擎設置不同的爬取規則

import type { MetadataRoute } from 'next'export default function robots(): MetadataRoute.Robots {return {rules: [{userAgent: 'Googlebot', // 僅針對 Googlebotallow: ['/'], // 允許訪問所有頁面disallow: ['/private/'], // 禁止訪問 /private/},{userAgent: ['Applebot', 'Bingbot'], // 適用于 Applebot 和 Bingbotdisallow: ['/'], // 禁止訪問所有頁面},],sitemap: 'https://example.com/sitemap.xml',}
}

📌訪問 https://example.com/robots.txt，你會看到：

User-Agent: Googlebot
Allow: /
Disallow: /private/User-Agent: Applebot
Disallow: /User-Agent: Bingbot
Disallow: /Sitemap: https://example.com/sitemap.xml

? 適用場景

  • 你希望 不同搜索引擎有不同的爬取規則。
  • 你想 屏蔽某些爬蟲（如 Applebot、Bingbot）。
  • 你希望 Googlebot 訪問全部內容，但屏蔽 /private/ 目錄。

2.2.5 robots.ts 的完整規則

Next.js 的 robots.ts 支持以下參數：

type Robots = {rules:| {userAgent?: string | string[]allow?: string | string[]disallow?: string | string[]crawlDelay?: number}| Array<{userAgent: string | string[]allow?: string | string[]disallow?: string | string[]crawlDelay?: number}>sitemap?: string | string[]host?: string
}

📌可選參數

參數作用
userAgent指定爬蟲（如 Googlebot、Bingbot），*代表所有爬蟲
allow允許爬取的路徑（如 /表示所有路徑）
disallow禁止爬取的路徑（如 /private/）
sitemap指定站點地圖的 URL
crawlDelay設置爬取延遲（秒）
host指定主機（如 https://example.com）

📌示例：完整 robots.ts

export default function robots(): MetadataRoute.Robots {return {rules: [{ userAgent: '*', allow: '/' }, // 允許所有爬蟲訪問整個網站{ userAgent: 'Googlebot', disallow: ['/private/'], crawlDelay: 10 }, // Googlebot 禁止訪問 /private/，并設置爬取間隔 10 秒],sitemap: ['https://example.com/sitemap.xml'],host: 'https://example.com',}
}

📌 訪問 https://example.com/robots.txt，你會看到：

User-Agent: *
Allow: /User-Agent: Googlebot
Disallow: /private/
Crawl-Delay: 10Sitemap: https://example.com/sitemap.xml
Host: https://example.com

? 適用場景

  • 你希望 Googlebot 爬取速度較慢，防止服務器壓力過大。
  • 你有 多個 sitemap.xml 文件，希望統一管理。
  • 你希望 為網站設置主機 URL，提高 SEO 規范性。

2.3 生成 sitemap.xml

在 SEO 優化中，sitemap.xml 站點地圖能夠幫助搜索引擎更快地發現并索引網站上的重要頁面。Next.js 允許 **手動添加sitemap.xml 文件，或者通過 sitemap.ts自動生成 站點地圖，從而大大簡化維護工作。

2.3.1 使用靜態 sitemap.xml

如果你的網站頁面較少，并且 URL 結構比較穩定，可以 手動創建 sitemap.xml 文件，然后放置在 app/ 目錄下，Next.js 會直接提供該文件。

📌 **創建 app/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://example.com</loc><lastmod>2023-01-01</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url><url><loc>https://example.com/blog</loc><lastmod>2023-01-01</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url>
</urlset>

📌 訪問 https://example.com/sitemap.xml，你會看到：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://example.com</loc><lastmod>2023-01-01</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url><url><loc>https://example.com/blog</loc><lastmod>2023-01-01</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url>
</urlset>

? 適用場景

  • 小型網站，頁面數量少，URL 結構不會經常變化。
  • 你希望**手動控制 sitemap.xml，無需額外代碼邏輯。
  • 你不需要自動更新 lastmod（頁面最后更新時間）。

🚨 但如果你的網站頁面較多、結構復雜，或者經常有新頁面上線，建議使用動態生成 sitemap.xml 的方式。

2.3.2 通過 sitemap.ts 動態生成 sitemap.xml

Next.js 允許 自動生成 sitemap.xml，只需創建 sitemap.ts 文件，即可根據動態路由生成站點地圖。這種方法更加靈活，適用于 大型站點或頻繁更新的內容。

📌步驟：在 app/sitemap.ts 中創建 sitemap.xml

import type { MetadataRoute } from 'next'export default function sitemap(): MetadataRoute.Sitemap {return [{url: 'https://example.com',lastModified: new Date(),changeFrequency: 'weekly',priority: 1.0,},{url: 'https://example.com/blog',lastModified: new Date(),changeFrequency: 'daily',priority: 0.8,},]
}

📌 訪問 https://example.com/sitemap.xml，你會看到：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://example.com</loc><lastmod>2023-01-01</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url><url><loc>https://example.com/blog</loc><lastmod>2023-01-01</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url>
</urlset>

? sitemap.ts 作用

  • 自動更新 lastmod，確保搜索引擎知道頁面最新更新時間。
  • 支持動態 URL（如博客文章、商品頁等）。
  • 搜索引擎可以更快發現新頁面，加快索引速度。
  • 無需手動維護 sitemap.xml 文件，降低出錯風險。

2.3.3 sitemap.ts 的存放位置

  • 需要 手動創建app/sitemap.ts，默認不會自動生成。
  • sitemap.ts必須放在 app/ 目錄下，確保可以通過 https://example.com/sitemap.xml 訪問到。
  • ?? 注意：如果 sitemap.xml 和 sitemap.ts 同時存在，Next.js 只會使用 sitemap.xml（靜態文件優先）。

2.3.4 生成多語言 sitemap.xml

如果你的網站有 多個語言版本，可以在 sitemap.ts 中 添加 alternates.languages 選項，告訴搜索引擎哪些 URL 代表不同語言版本。

📌示例：支持多語言的 sitemap.ts

import type { MetadataRoute } from 'next'export default function sitemap(): MetadataRoute.Sitemap {return [{url: 'https://example.com',lastModified: new Date(),alternates: {languages: {'en': 'https://example.com/en','de': 'https://example.com/de',},},},{url: 'https://example.com/about',lastModified: new Date(),alternates: {languages: {'en': 'https://example.com/en/about','de': 'https://example.com/de/about',},},},]
}

📌 訪問 https://example.com/sitemap.xml，你會看到：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://example.com</loc><xhtml:link rel="alternate" hreflang="en" href="https://example.com/en"/><xhtml:link rel="alternate" hreflang="de" href="https://example.com/de"/><lastmod>2023-01-01</lastmod></url><url><loc>https://example.com/about</loc><xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about"/><xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/about"/><lastmod>2023-01-01</lastmod></url>
</urlset>

? 作用

  • 幫助搜索引擎正確索引不同語言版本的 URL。
  • 避免重復內容問題（canonical + hreflang）。
  • 自動維護多語言站點地圖，無需手動管理。

2.3.5 生成大規模網站的 sitemap.xml

如果你的網站包含 大量頁面（例如電商、博客、論壇等），建議 拆分 sitemap.xml，使用 generateSitemaps 方法。

📌示例：為大規模站點生成多個 sitemap.xml

import type { MetadataRoute } from 'next'
import { BASE_URL } from '@/app/lib/constants'export async function generateSitemaps() {return [{ id: 0 }, { id: 1 }, { id: 2 }]
}export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {const start = id * 50000const end = start + 50000const products = await getProducts(`SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`)return products.map((product) => ({url: `${BASE_URL}/product/${product.id}`,lastModified: product.date,}))
}

📌 訪問 /product/sitemap/1.xml，你會看到部分站點地圖。 ? 適用場景

  • 站點超過 50,000 個 URL（Google 單個 sitemap.xml 限制）。
  • 電商、博客、新聞類站點 需要拆分站點地圖。

📌 3. Next.js 內置 sitemap.ts vs. next-sitemap

Next.js 提供了 內置 sitemap.ts 生成 sitemap.xml 的功能，但社區中也有專門的 next-sitemap 庫用于生成站點地圖。那么，這兩者有什么區別？應該選擇哪種方式呢？本文將深入對比它們的特點、適用場景和優缺點**。

3.1 Next.js 內置 sitemap.ts

📌 Next.js 13+ 提供的 sitemap.ts 是一種原生支持**的方式，可以在 app/sitemap.ts 文件中定義站點地圖，并自動生成 sitemap.xml。

? 特點

  • 基于 app/sitemap.ts：無需額外安裝依賴，Next.js 原生支持。
  • 動態生成：支持 **lastModified 自動更新時間。
  • 支持多語言 (hreflang) 和多 sitemap 結構。
  • 不需要手動執行命令，訪問 /sitemap.xml 即可獲取站點地圖。

? 優點

  • 內置支持：不需要安裝 next-sitemap，減少外部依賴。
  • 自動化：無需手動運行 npx 命令，每次訪問 /sitemap.xml 都是最新的。
  • 支持 hreflang：適用于多語言網站。

🚨 缺點

  • 功能較基礎：不支持自動解析 next 的 pages 目錄結構，需要手動添加 URL。
  • 不適用于大型網站：sitemap.ts 適用于小型/中型站點，但對于有 10w+ URL 的大站，性能可能有限。

3.2 next-sitemap

📌 next-sitemap 是 Next.js 官方推薦的 sitemap.xml 生成工具，適用于大型項目，可自動爬取 pages/ 目錄，批量生成 sitemap.xml。

? 特點

  • 支持 SSR/SSG：可自動抓取 next.config.js 中的 pages/ 目錄。
  • 支持 robots.txt 生成，無需手寫。
  • 支持 sitemap index（多個 sitemap.xml 文件）。
  • 提供 next-sitemap.js 配置文件，可以批量管理 URL，無需手動維護 sitemap.ts。

📌 安裝 next-sitemap

npm install next-sitemap

📌 配置 next-sitemap.config.js

module.exports = {siteUrl: 'https://example.com', // 站點根路徑generateRobotsTxt: true, // 自動生成 robots.txtsitemapSize: 5000, // 拆分 sitemap.xmlchangefreq: 'daily', // 默認所有頁面更新時間priority: 0.8, // 默認優先級exclude: ['/admin', '/private'], // 排除不想被索引的頁面
}

📌 運行命令，生成 sitemap.xml

npx next-sitemap

📌 生成的 sitemap.xml

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://example.com/sitemap-0.xml</loc></sitemap><sitemap><loc>https://example.com/sitemap-1.xml</loc></sitemap>
</sitemapindex>

? 優點

  • 自動解析 pages 目錄，無需手動維護 URL。
  • 支持 robots.txt，可自動生成并配置。
  • 適用于大規模網站，可以拆分多個 sitemap.xml，每個最多 50,000 個 URL。
  • 支持 next export，可用于靜態站點。

🚨 缺點

  • 需要手動執行 npx next-sitemap 以生成 sitemap.xml，不像 sitemap.ts 那樣是實時的。
  • 需要額外安裝依賴，增加項目體積。

3.3 sitemap.ts vs. next-sitemap 對比

特性**Next.js sitemap.ts**next-sitemap
是否需要安裝依賴? 不需要? 需要 (next-sitemap)
是否自動更新? 實時生成? 需要 npx運行
是否支持 robots.txt? 需手動寫 robots.ts? 自動生成
是否支持 hreflang? 支持? 支持
是否適合大站點? 可拆分多個 sitemap? 更適合，自動拆分
是否支持 next export? 僅支持 app/目錄? 適用于 pages/目錄
是否支持 sitemap index? 通過 generateSitemaps? 自動拆分

? 推薦選擇

  • 如果你的網站規模較小（小于 50,000 個 URL），并且在 app/ 目錄下開發，建議使用 sitemap.ts。
  • 如果你的網站是一個大型站點（超過 50,000 個 URL），或者使用 pages/ 目錄，建議使用 next-sitemap，可以自動解析目錄并生成多個 sitemap.xml。
  • 如果你還需要 robots.txt 自動生成，next-sitemap 是更好的選擇。

📌 4. 總結

Next.js 提供了 強大的內置 SEO 工具，簡化了 SEO 配置：

  • ? metadata API** 輕松設置 <title>、meta、canonical
  • ? robots.ts 自動生成 robots.txt，控制爬蟲行為
  • ? sitemap.ts 生成 sitemap.xml，加快搜索引擎索引
  • ? 多語言 hreflang 輕松管理，提高全球搜索排名

利用 Next.js，你可以 更輕松地管理 SEO，提升網站在搜索引擎中的可見度！🚀

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/70899.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/70899.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/70899.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

面試葵花寶典之React（持續更新中）

面試葵花寶典之React（持續更新中）

1.談談你對HOC的理解 定義&#xff1a; 高階組件是一個接收組件作為參數并返回新組件的函數&#xff0c;用于復用組件邏輯&#xff0c;遵循純函數特性&#xff08;無副作用&#xff0c;輸出僅依賴輸入&#xff09;。 組合性&#xff1a;可嵌套使用多個 HOC。 HOC&#xff08;…
閱讀更多...
數據安全管理的AI工具有哪些？

數據安全管理的AI工具有哪些？

數據安全管理的AI工具在不斷演進&#xff0c;它們憑借強大的算法和學習能力&#xff0c;為企業筑起了一道堅不可摧的數字防線。 在數據安全管理領域&#xff0c;AI工具的應用日益廣泛&#xff0c;以下是一些常見的工具及其功能&#xff1a; AI驅動的數據分類與標記 工具: Micr…
閱讀更多...
Matplotlib 繪圖標記

Matplotlib 繪圖標記

Matplotlib 繪圖標記 引言 Matplotlib 是一個功能強大的 Python 繪圖庫&#xff0c;廣泛用于數據可視化。在 Matplotlib 中&#xff0c;繪圖標記&#xff08;markers&#xff09;是數據點在圖表中顯示的方式。正確的使用繪圖標記可以增強圖表的可讀性和美觀性。本文將詳細介紹…
閱讀更多...
【DeepSeek問答】QProcess::start是異步的嗎?會使UI卡頓嗎？

【DeepSeek問答】QProcess::start是異步的嗎?會使UI卡頓嗎？

好的&#xff0c;我現在需要回答用戶關于QProcess::start是否是異步的&#xff0c;以及它是否會導致UI卡頓的問題。用戶之前已經詢問過如何開發一個調用7-Zip的Qt應用&#xff0c;并且我給出了示例代碼。現在用戶可能在使用過程中遇到了問題&#xff0c;或者想更深入了解QProce…
閱讀更多...
Android 常用命令和工具解析之存儲相關

Android 常用命令和工具解析之存儲相關

1 基本概念 2 命令解讀 2.1 adb shell df df 命令主要用于需要檢查文件系統上已使用和可用的磁盤空間的數量。如果沒有指定文件名&#xff0c;則顯示在當前所有掛載的文件系統上可用的空間。其原理是從proc/mounts 或 /etc/mtab 中檢索磁盤信息。 注意&#xff1a;df命令并…
閱讀更多...
使用ZFile打造屬于自己的私有云系統結合內網穿透實現安全遠程訪問

使用ZFile打造屬于自己的私有云系統結合內網穿透實現安全遠程訪問

文章目錄 前言1.關于ZFile2.本地部署ZFile3.ZFile本地訪問測試4.ZFile的配置5.cpolar內網穿透工具安裝6.創建遠程連接公網地址7.固定ZFile公網地址 前言 在數字化的今天&#xff0c;我們每個人都是信息的小能手。無論是職場高手、攝影達人還是學習狂人&#xff0c;每天都在創造…
閱讀更多...
HarmonyOS 5.0應用開發——鴻蒙接入高德地圖實現POI搜索

HarmonyOS 5.0應用開發——鴻蒙接入高德地圖實現POI搜索

【高心星出品】 文章目錄 鴻蒙接入高德地圖實現POI搜索運行結果&#xff1a;準備地圖編寫ArkUI布局來加載HTML地圖 鴻蒙接入高德地圖實現POI搜索 在當今數字化時代&#xff0c;地圖應用已成為移動設備中不可或缺的一部分。隨著鴻蒙系統的日益普及&#xff0c;如何在鴻蒙應用中…
閱讀更多...
idea + Docker + 阿里鏡像服務打包部署

idea + Docker + 阿里鏡像服務打包部署

一、下載docker desktop軟件 官網下載docker desktop&#xff0c;需要結合wsl使用 啟動成功的畫面(如果不是這個畫面例如一直處理start或者是stop需要重新啟動&#xff0c;不行就重啟電腦) 打包成功的鏡像在這里&#xff0c;如果頻繁打包會導致磁盤空間被占滿&#xff0c;需…
閱讀更多...
IP---網絡類型

IP---網絡類型

這只是IP的其中一塊內容-網絡類型&#xff0c;IP還有更多內容可以查看IP專欄&#xff0c;前一章內容為訪問服務器流程&#xff0c;可通過以下路徑查看IP----訪問服務器流程-CSDN博客&#xff0c;歡迎指正 2.網絡類型 網絡類型---根據二層&#xff08;數據鏈路層&#xff09;所…
閱讀更多...
【監督學習】ARIMA預測模型步驟及matlab實現

【監督學習】ARIMA預測模型步驟及matlab實現

ARIMA預測模型 ARIMA預測模型1.算法步驟2.參數選擇(1)拖尾截尾判斷法(2) AIC 準則(3) BIC 準則 3.MATLAB 實現參考資料 ARIMA預測模型 #mermaid-svg-mDhjwpnuA0YcEGnE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…
閱讀更多...
使用git管理uniapp項目

使用git管理uniapp項目

1.本地管理 1. 在項目根目錄中新建 .gitignore 忽略文件&#xff0c;并配置如下&#xff1a; # 忽略 node_modules 目錄 /node_modules /unpackage/dist 2. 打開終端&#xff0c;切換到項目根目錄中&#xff0c;運行如下的命令&#xff0c;初始化本地 Git 倉庫&#xff1…
閱讀更多...
Unity中動態切換光照貼圖的方法

Unity中動態切換光照貼圖的方法

關鍵代碼&#xff1a;LightmapSettings.lightmaps lightmapDatas; LightmapData中操作三張圖&#xff1a;lightmapColor,lightmapDir,以及一張ShadowMap 這里只操作前兩張&#xff1a; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI;public cl…
閱讀更多...
C# 運算符

C# 運算符

C# 運算符 在C#編程語言中，運算符是用于執行數學或邏輯運算的符號。它們是構建程序邏輯和表達式的基石。C#支持多種類型的運算符，包括算術運算符、關系運算符、邏輯運算符、位運算符、賦值運算符、自增自減運算符以及一些特殊運算符。 算術運算符 算術運算符用于執行基本的…
閱讀更多...
1.2 Kaggle大白話：Eedi競賽Transformer框架解決方案02-GPT_4o生成訓練集缺失數據

1.2 Kaggle大白話：Eedi競賽Transformer框架解決方案02-GPT_4o生成訓練集缺失數據

目錄 0. 本欄目競賽匯總表1. 本文主旨2. AI工程架構3. 數據預處理模塊3.1 配置數據路徑和處理參數3.2 配置API參數3.3 配置輸出路徑 4. AI并行處理模塊4.1 定義LLM客戶端類4.2 定義數據處理函數4.3 定義JSON保存函數4.4 定義數據分片函數4.5 定義分片處理函數4.5 定義文件名排序…
閱讀更多...
pycharm遠程連接服務器運行pytorch

pycharm遠程連接服務器運行pytorch

Linux部署pytorch 背景介紹 不同的開源代碼可能需要不同的實驗環境和版本&#xff0c;這時候的確體現出Anaconda管理環境的好處了&#xff0c;分別搞一個獨立環境方便管理。 有的教程建議選擇較舊的版本&#xff0c;但筆者建議在條件允許的情況下安裝最新版&#xff0c;本次…
閱讀更多...
Python開發 Flask框架面試題及參考答案

Python開發 Flask框架面試題及參考答案

目錄 Flask 的核心設計理念是什么？與 Django 相比有哪些顯著差異？ 解釋 Flask 框架的核心理念及其作為 “微框架” 的優缺點 Flask 的依賴庫有哪些？簡述 Werkzeug 和 Jinja2 的作用 什么是 WSGI？Flask 如何基于 WSGI 實現服務端與應用的交互 解釋 RESTful API 的設計原…
閱讀更多...
從“Switch-case“到“智能模式“：C#模式匹配的終極進化指南

從“Switch-case“到“智能模式“：C#模式匹配的終極進化指南

當代碼開始"思考" 你是否厭倦了層層嵌套的if-else地獄&#xff1f;是否想過讓代碼像偵探推理一樣優雅地解構數據&#xff1f;C#的模式匹配正是這樣一把瑞士軍刀&#xff0c;從C# 7.0到C# 12&#xff0c;它已悄然進化成改變編程范式的利器。 一、模式匹配的三重境界…
閱讀更多...
組件注冊方式、傳遞數據

組件注冊方式、傳遞數據

組件注冊 一個vue組件要先被注冊&#xff0c;這樣vue才能在渲染模版時找到其對應的實現。有兩種注冊方式&#xff1a;全局注冊和局部注冊。&#xff08;組件的引入方式&#xff09; 以下這種屬于局部引用。 組件傳遞數據 注意&#xff1a;props傳遞數據&#xff0c;只能從父…
閱讀更多...
ROS的action通信——實現階乘運算（三）

ROS的action通信——實現階乘運算（三）

在ROS中除了常見的話題(topic&#xff09;通信、服務(server)通信等方式&#xff0c;還有action通信這一方式&#xff0c;由于可以實時反饋任務完成情況&#xff0c;該通信方式被廣泛運用于機器人導航等任務中。本文將通過三個小節的分享&#xff0c;實現基于action通信的階乘運…
閱讀更多...
四款 AI 協作辦公工具，AI工具庫革新辦公效率

四款 AI 協作辦公工具，AI工具庫革新辦公效率

在數字化辦公時代&#xff0c;AI 技術正深刻改變著我們的工作方式。AIDH.NETAI工具庫匯聚了眾多先進的工具&#xff0c;今天我們來了解 AI協作辦公工具&#xff0c;探索它們如何助力企業和團隊在辦公場景中脫穎而出。 Taskade&#xff1a;智能工作流的領航者 Taskade 是一款將…
閱讀更多...
最新文章

Copyright @ 2022~2023