如何使用React建立WordPress主題

這篇實踐文章利用 WordPress 的靈活性和 React 強大的使用者介面（UI）進行主題開發。它通過引導您完成建立主題所需的步驟，展示瞭如何將 WordPress 和 React 整合在一起，從而提升您的 WordPress 專案。

前提條件

要學習本文，您應該具備以下條件：

一個 WordPress 網站。
在計算機上安裝 Node.js 和 npm（Node 包管理器）或 yarn

建立基本的 WordPress 主題結構

建立基本的 WordPress 主題結構包括設定一系列檔案和目錄，WordPress 會使用這些檔案和目錄將主題的樣式、功能和佈局應用到 WordPress 網站。

在開發環境中，訪問您的網站資料夾。導航到 wp-content/themes 目錄。
為您的主題建立一個新資料夾。資料夾名稱應該是唯一的，並具有描述性，例如，my-basic-theme。
在主題資料夾中，建立這些重要檔案並留空：
- style.css – 這是主要的樣式表檔案。它還包含主題的標題資訊。
- functions.php – 該檔案定義了主題要使用的函式、類、操作和過濾器。
- index.php – 這是主模板檔案。所有主題都需要使用該檔案。
如果不使用 React，還必須建立以下檔案。但如果使用 React，我們將在稍後為它們建立元件。
- header.php – 包含網站的頁首部分。
- footer.php – 包含網站的頁尾部分。
- sidebar.php – 如果主題包含側邊欄，則包含側邊欄部分。

接下來，開啟 style.css，在檔案頂部新增以下內容：

Theme Name: My Basic Theme

Theme URI: http://example.com/my-basic-theme/

Author: Your Name

Author URI: http://example.com

Description: A basic WordPress theme.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: blog, custom-background

Text Domain: my-basic-theme

/* Theme Name: My Basic Theme Theme URI: http://example.com/my-basic-theme/ Author: Your Name Author URI: http://example.com Description: A basic WordPress theme. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, custom-background Text Domain: my-basic-theme */

/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/

該程式碼片段是 WordPress 主題 style.css 檔案的標題部分，包含主題名稱、作者詳細資訊、版本和許可證等重要後設資料。它可以幫助 WordPress 在儀表盤中識別和顯示主題，包括主題描述和分類標籤。

將 React 整合到 WordPress 中

將 React 整合到 WordPress 主題中，可以使用 React 基於元件的架構在 WordPress 網站中構建動態的互動式使用者介面。要整合 React，您需要使用 @wordpress/scripts 包。

這是一組專為 WordPress 開發定製的可重用指令碼。WordPress 提供它是為了簡化配置和構建過程，尤其是在 WordPress 主題和外掛中整合 React 等現代 JavaScript 工作流時。

該工具包封裝了常用任務，使在 WordPress 生態系統中使用 JavaScript 進行開發變得更加容易。

調整主題

有了基本的 WordPress 主題結構，您就可以調整主題了。

在主題目錄中，將以下程式碼貼上到 functions.php 檔案中：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
function my_react_theme_scripts() {
wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true);
wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_react_theme_scripts');
<?php function my_react_theme_scripts() { wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true); wp_enqueue_style('my-react-theme-style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'my_react_theme_scripts');
```
<?php
function my_react_theme_scripts() {
wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true);
wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_react_theme_scripts');
```
functions.php 檔案將 React 與您的 WordPress 主題整合在一起。它使用 wp_enqueue_script 和 wp_enqueue_style 函式為主題新增 JavaScript 和層疊樣式表（CSS）檔案。

wp_enqueue_script WordPress 函式需要幾個引數：
- 處理名（”my-react-theme-app“），用於唯一標識指令碼
- 指令碼檔案的路徑
- 依賴關係陣列 array('wp-element')，表示指令碼依賴於 WordPress 的 React 封裝器（'wp-element'）。
  版本號（ '1.0.0' ）
  位置 true，表示指令碼應載入到 HTML 文件的頁尾，以提高頁面載入效能。
  wp_enqueue_style 函式接收以下引數：
  控制代碼名稱 "my-react-theme-style" ，用於唯一標識樣式表
  源 get_stylesheet_uri()，用於返回主題主樣式表（style.css）的 URL，確保應用主題樣式
  add_action 元素，用於將自定義函式 "my_react_theme_scripts" 與特定動作（"wp_enqueue_scripts"）掛鉤。這樣可以確保在 WordPress 準備呈現頁面時正確載入 JavaScript 和 CSS。
這段程式碼可確保 React 應用程式的 JavaScript 編譯檔案（位於 <your-theme-directory>/build/index.js 中）和主題的主樣式表與主題一起載入。

/build directory 通常是使用 create-react-app 或 webpack 等工具編譯 React 應用程式時產生的，這些工具會將 React 程式碼捆綁成可用於生產的、經過精簡的 JavaScript 檔案。

這種設定對於將 React 功能整合到 WordPress 主題中至關重要，可以在 WordPress 網站中實現動態的、類似應用程式的使用者體驗。
接下來，更新 index.php 檔案的內容：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="app"></div>
<?php wp_footer(); ?>
</body>
</html>
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="app"></div> <?php wp_footer(); ?> </body> </html>
```
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="app"></div>
<?php wp_footer(); ?>
</body>
</html>
```
index.php 檔案中的程式碼定義了 WordPress 主題的基本 HTML 結構，包括供 WordPress 插入必要頁首（wp_head）和頁尾（wp_footer）的鉤子，以及一個帶有 ID app 的 div，其中安裝了 React 應用程式。

使用 @wordpress/scripts 設定 React

開啟終端，進入主題目錄：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd wp-content/themes/my-basic-theme
cd wp-content/themes/my-basic-theme
```
cd wp-content/themes/my-basic-theme
```
初始化一個新的 Node.js 專案：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm init -y
npm init -y
```
npm init -y
```
安裝@wordpress/scripts 和 @wordpress/element：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install @wordpress/scripts @wordpress/element --save-dev
npm install @wordpress/scripts @wordpress/element --save-dev
```
npm install @wordpress/scripts @wordpress/element --save-dev
```
請注意，這一步可能需要幾分鐘。
修改 package.json 檔案，加入 start 和 build 指令碼：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
},
"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },
```
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
},
```
'@wordpress/scripts' 用於啟動一個用於開發目的的熱過載開發伺服器（start），並將 React 應用程式編譯成用於生產的靜態資產（build）。

建立 React 專案

為主題中的 React 原始檔建立一個名為 src 的新目錄。
在 src 資料夾中建立兩個新檔案：index.js 和 App.js。
將以下程式碼放入 index.js：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { render } from '@wordpress/element';
import App from './App';
render(, document.getElementById('app'))
import { render } from '@wordpress/element'; import App from './App'; render(, document.getElementById('app'))
```
import { render } from '@wordpress/element';
import App from './App';
render(, document.getElementById('app'))
```
上面的程式碼從 @wordpress/element 和 App 元件匯入了 render 函式。然後，將 App 元件掛載到文件物件模型 (DOM)。
接下來，將此程式碼貼上到 App.js 檔案中：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { Component } from '@wordpress/element';
export default class App extends Component {
render() {
return (
<div>
<h1>Hello, WordPress and React!</h1>
{/* Your React components will go here */}
</div>
);
}
}
import { Component } from '@wordpress/element'; export default class App extends Component { render() { return ( <div> <h1>Hello, WordPress and React!</h1> {/* Your React components will go here */} </div> ); } }
```
import { Component } from '@wordpress/element';
export default class App extends Component {
render() {
return (
<div> 
<h1>Hello, WordPress and React!</h1>
{/* Your React components will go here */}
</div>
);
}
}
```

確定並啟用您的主題

啟用主題：

使用 npm start 執行開發伺服器。
在 WordPress 控制面板中啟用新主題，方法是導航到 “外觀“>”主題“，找到主題並單擊 “啟用“。
確保 React 專案的構建過程配置正確，以輸出到正確的主題目錄，從而允許 WordPress 渲染 React 元件。
訪問 WordPress 網站的前端檢視實時變化。

Hello, WordPress and React

主頁上會顯示新建立的基於 React 的 WordPress 主題，並帶有 “Hello, WordPress and React” 的資訊。

準備好部署主題後，執行：npm run build。這條命令會將 React 應用程式編譯成靜態資產，並將其放在主題資料夾內的構建目錄中。

為主題開發 React 元件

接下來，採用基於元件的方法，在 WordPress 主題中使用特定元件（如頁首）擴充套件基本的 React 設定。

建立頁首元件

在主題的 src 目錄中，為標題元件建立一個新檔案。為檔案命名，如 Header.js，並新增以下程式碼：

import { Component } from '@wordpress/element';

class Header extends Component {

render() {

const { toggleTheme, darkTheme } = this.props;

const headerStyle = {

backgroundColor: darkTheme ? '#333' : '#EEE',

color: darkTheme ? 'white' : '#333',

padding: '10px 20px',

display: 'flex',

justifyContent: 'space-between',

alignItems: 'center',

};

return (

<div>My WP Theme</div>

<button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>

</header>

);

}

export default Header;

import { Component } from '@wordpress/element'; class Header extends Component { render() { const { toggleTheme, darkTheme } = this.props; const headerStyle = { backgroundColor: darkTheme ? '#333' : '#EEE', color: darkTheme ? 'white' : '#333', padding: '10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }; return ( <header style={headerStyle}> <div>My WP Theme</div> <button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button> </header> ); } } export default Header;

import { Component } from '@wordpress/element';
class Header extends Component {
render() {
const { toggleTheme, darkTheme } = this.props;
const headerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '10px 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
};
return (
<header style={headerStyle}>
<div>My WP Theme</div>
<button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
</header>
);
}
}
export default Header;

這段程式碼使用 "@wordpress/element" 定義了一個標題元件，可根據 darkTheme prop 動態調整頁首樣式。它包含一個按鈕，可通過呼叫作為道具傳遞的 toggleTheme 方法在淺色和深色主題之間切換。

在主題的 src 目錄中，為頁尾元件建立一個新檔案。給它取一個名字，例如 Footer.js，然後新增以下程式碼：

import { Component } from '@wordpress/element';

class Footer extends Component {

render() {

const { darkTheme } = this.props;

const footerStyle = {

backgroundColor: darkTheme ? '#333' : '#EEE',

color: darkTheme ? 'white' : '#333',

padding: '20px',

textAlign: 'center',

};

return (

<footer> style={footerStyle}>

</footer>

);

}

export default Footer;

import { Component } from '@wordpress/element'; class Footer extends Component { render() { const { darkTheme } = this.props; const footerStyle = { backgroundColor: darkTheme ? '#333' : '#EEE', color: darkTheme ? 'white' : '#333', padding: '20px', textAlign: 'center', }; return ( <footer> style={footerStyle}> © {new Date().getFullYear()} My WP Theme </footer> ); } } export default Footer;

import { Component } from '@wordpress/element';
class Footer extends Component {
render() {
const { darkTheme } = this.props;
const footerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '20px',
textAlign: 'center',
};
return (
<footer> style={footerStyle}>
© {new Date().getFullYear()} My WP Theme
</footer>
);
}
}
export default Footer;

此程式碼定義了一個頁尾元件，該元件可根據 darkTheme prop 渲染具有動態樣式的頁尾，並顯示當前年份。

更新 App.js 檔案

要使用新的頁首和頁尾，請用以下程式碼替換 App.js 檔案的內容：

import { Component } from '@wordpress/element';

import Header from './Header';

import Footer from './Footer';

export default class App extends Component {

state = {

darkTheme: true,

};

toggleTheme = () => {

this.setState(prevState => ({

darkTheme: !prevState.darkTheme,

}));

};

render() {

const { darkTheme } = this.state;

return (

<div>

</main>

</div>

);

}

import { Component } from '@wordpress/element'; import Header from './Header'; import Footer from './Footer'; export default class App extends Component { state = { darkTheme: true, }; toggleTheme = () => { this.setState(prevState => ({ darkTheme: !prevState.darkTheme, })); }; render() { const { darkTheme } = this.state; return ( <div> <Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} /> <main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}> </main> <Footer darkTheme={darkTheme} /> </div> ); } }

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>               
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}

開發構建過程會監控更改並重新編譯程式碼，該過程應仍處於啟用狀態。因此，你的最後一個版本的模板應該與此相似：

基於 React 的 WordPress 主題

顯示基於 React 的 WordPress 主題（包括頁首和頁尾）的主頁。

如何在 React 中處理 WordPress 資料

在 React 應用程式中整合 WordPress 內容可在 WordPress 的強大內容管理功能和 React 的動態使用者介面設計之間架起一座無縫的橋樑。WordPress REST API 可以實現這一點。

要訪問 WordPress REST API，請通過更新固定連結設定來啟用它。在 WordPress 管理儀表板上，導航到設定 > 固定連結。選擇 “文章名” 選項或 “樸素” 以外的任何選項，然後儲存更改。

在主題 src 目錄下新建一個名為 Posts.js 的檔案，並新增以下程式碼：

import { Component } from '@wordpress/element';

class Posts extends Component {

state = {

posts: [],

isLoading: true,

error: null,

};

componentDidMount() {

fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')

.then(response => {

if (!response.ok) {

throw new Error('Something went wrong');

}

return response.json();

})

.then(posts => this.setState({ posts, isLoading: false }))

.catch(error => this.setState({ error, isLoading: false }));

}

render() {

const { posts, isLoading, error } = this.state;

if (error) {

return <div>Error: {error.message}</div>;

}

if (isLoading) {

return <div>Loading...</div>;

}

return (

<div>

{posts.map(post => (

</article>

))}

</div>

);

}

export default Posts;

import { Component } from '@wordpress/element'; class Posts extends Component { state = { posts: [], isLoading: true, error: null, }; componentDidMount() { fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') .then(response => { if (!response.ok) { throw new Error('Something went wrong'); } return response.json(); }) .then(posts => this.setState({ posts, isLoading: false })) .catch(error => this.setState({ error, isLoading: false })); } render() { const { posts, isLoading, error } = this.state; if (error) { return <div>Error: {error.message}</div>; } if (isLoading) { return <div>Loading...</div>; } return ( <div> {posts.map(post => ( <article key={post.id}> <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} /> <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} /> </article> ))} </div> ); } } export default Posts;

import { Component } from '@wordpress/element';
class Posts extends Component {
state = {
posts: [],
isLoading: true,
error: null,
};
componentDidMount() {
fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
.then(response => {
if (!response.ok) {
throw new Error('Something went wrong');
}
return response.json();
})
.then(posts => this.setState({ posts, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { posts, isLoading, error } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</article>
))}
</div>
);
}
}
export default Posts;

根據 WP 部署名稱（即您安裝 WP 的資料夾）的不同， fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') URL 可能略有不同。或者，您也可以從 DevKinsta 面板獲取網站主機名，然後新增字尾 /wp-json/wp/v2/posts。

Posts 元件是這種整合的一個典型例子，它演示了使用 WordPress REST API 獲取和管理 WordPress 資料（特別是文章）的過程。

通過在元件的生命週期方法（ componentDidMount ）中發起網路請求，該元件可以高效地從 WordPress 網站獲取文章並將其儲存在自己的狀態中。這種方法強調了一種將 WordPress 資料（如頁面或自定義文章型別）動態整合到 React 元件中的模式。

要使用新元件，請用以下程式碼替換 App.js 檔案的內容：

import { Component } from '@wordpress/element';

import Header from './Header';

import Footer from './Footer';

import Posts from './Posts'; // Import the Posts component

export default class App extends Component {

state = {

darkTheme: true,

};

toggleTheme = () => {

this.setState(prevState => ({

darkTheme: !prevState.darkTheme,

}));

};

render() {

const { darkTheme } = this.state;

return (

<div>

<Posts /> {/* Render the Posts component */}

</main>

</div>

);

}

import { Component } from '@wordpress/element'; import Header from './Header'; import Footer from './Footer'; import Posts from './Posts'; // Import the Posts component export default class App extends Component { state = { darkTheme: true, }; toggleTheme = () => { this.setState(prevState => ({ darkTheme: !prevState.darkTheme, })); }; render() { const { darkTheme } = this.state; return ( <div> <Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} /> <main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}> <Posts /> {/* Render the Posts component */} </main> <Footer darkTheme={darkTheme} /> </div> ); } }

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Import the Posts component
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
<Posts /> {/* Render the Posts component */}
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}

您現在可以檢視主題的最新最終版本。除了頁首和頁尾，它還包括一個動態內容區域，用於展示文章。

基於 React 的 WordPress 最終主題

主頁顯示基於 React 的 WordPress 最終主題，包括文章。

在 WordPress 專案中使用 React WordPress 主題

要將基於 React 的主題整合到 WordPress 專案中，首先要利用 @wordpress/scripts 等軟體包將 React 程式碼轉換成與 WordPress 相容的格式。該工具簡化了構建過程，讓你可以將 React 應用程式編譯成 WordPress 可以啟動的靜態資產。

使用 @wordpress/scripts 提供的 npm 命令，構建主題非常簡單。在主題目錄下執行 npm run build ，即可將 React 程式碼編譯成靜態 JavaScript 和 CSS 檔案。

然後，將這些編譯好的資產放入主題中的相應目錄，確保 WordPress 可以正確載入和呈現 React 元件作為主題的一部分。整合完成後，您就可以像啟用其他主題一樣啟用 React WordPress 主題，立即為 WordPress 網站帶來類似應用程式的現代使用者體驗。

小結

通過使用 React 強大的使用者介面功能建立主題並將其整合到 WordPress 中，您可以釋放建立靈活、高度互動和以使用者為中心的網路體驗的潛力。

React WordPress 主題開發

如何使用React建立WordPress主題

前提條件

建立基本的 WordPress 主題結構

將 React 整合到 WordPress 中

調整主題

使用 @wordpress/scripts 設定 React

建立 React 專案

確定並啟用您的主題

為主題開發 React 元件

建立頁首元件

建立頁尾元件

更新 App.js 檔案

如何在 React 中處理 WordPress 資料

在 WordPress 專案中使用 React WordPress 主題

小結

評論留言

取消回覆

文章目錄

如何使用React建立WordPress主題

前提條件

建立基本的 WordPress 主題結構

將 React 整合到 WordPress 中

調整主題

使用 @wordpress/scripts 設定 React

建立 React 專案

確定並啟用您的主題

為主題開發 React 元件

建立頁首元件

建立頁尾元件

更新 App.js 檔案

如何在 React 中處理 WordPress 資料

在 WordPress 專案中使用 React WordPress 主題

小結

相關的

評論留言

取消回覆

文章目錄