科技解说
每天一篇好文
        找回密码
当前位置：篇微 服务 帮助手册 正文

WordPress主题开发教程手册 — 模板文件

2022-08-04 分类：帮助手册 阅读() 评论(0)

模板术语

在WordPress主题中，术语「模版」以几种不同方式使用：

  • 模板文件存在于主题中，表示您的网站的显示方式。
  • 页面模板在单页面中使用，用来更改某个页面的外观，可以应用于某个页面或文章。
  • 模板标签是 WordPress 的内置功能，我们可以使用模版标签来获取和显示数据（例如 the_title(),the_content() ）。
  • 模板层次结构是 WordPress 用于确定使用哪个主题模板文件的逻辑，具体取决于所请求的内容。

WordPress主题由模板文件组成，这些模板文件是包含 HTML，模板标签和 PHP代码的 PHP 文件 。

模版文件

构建主题时，我们使用模板文件来实现网站各个部分的布局和设计。例如，我们可以使用 header.php模板设计网站页头，使用 comments.php模板来设计文章评论。

用户访问我们网站中的某个页面时，WordPress 会根据用户访问的页面加载模板。模板文件显示的内容由与模板文件相关的文章类型确定。模板层次结构描述了WordPress 将根据请求的类型加载哪个模板文件，以及模板是否存在于主题中。 然后，服务器解析模板中的 PHP 并将生成的 HTML 内容返回给访问者。

最关键的模板文件是 index.php ，如果在模板层次结构中找不到更具体的模板，那么所有请求最终都会被发送到这个模板上。虽然只有 index.php 模板就可以工作，但是主题通常会包含一些其他模板，以便在不同的上下文中环境中显示不同的内容。

模板片段

模版片段是用来包含在其他模版中的一种模版，例如 header.php。模板片段可以嵌入到多个模板中，从而简化了主题开发。常见的模板片段有：

  • header.php： 用于显示网站页头
  • footer.php：用于显示网站页脚
  • sidebar.php：用于显示网站侧边栏

虽然模版片段只是模版的一部分，但是我们可以创建任意数量的模板片段，并将其包含在其他模板文件中。

常见的 WordPress 模板文件

  • index.php：主模版文件，所有主题都需要这个文件。
  • style.css：主样式文件，包含主题的信息，所有主题都需要这个文件。
  • rtl.css：从右向左阅读的样式文件，如果站点语言是从右向左阅读的，主题会自动包含此文件。
  • comments.php：主题评论模版文件。
  • front-page.php：首页模版文件，无论阅读设置中的首页设置为什么总是，优先选择此文件模版作为首页模版文件。
  • home.php：如果阅读设置中设置为静态页面，选择此文件作为首页模版文件。
  • header.php：网站页头模板文件，通常包含您网站的文档类型、元信息、样式表、脚本链接以及其他数据。
  • singular.php：单页面模板，未找到 single.php 或 page.php 时，使用此文件作为这些文章类型的单页面模版文件。
  • single.php：「文章」的详情页模版文件。
  • single-{post-type}.php：「post-type」文章类型的详情页模版文件。
  • archive-{post-type}.php：「post-type」文章类型的存档页模版文件。
  • page.php：「页面」文章类型的详情页模版文件。
  • page-{slug}.php：别名为「slug」的页面详情页模版文件。
  • category.php：分类目录存档模版文件。
  • tag.php：标签存档模版文件。
  • taxonomy.php：自定义分类法存档模版文件。
  • author.php：作者存档页模版文件。
  • date.php：日期存档页模版文件。
  • archive.php：默认存档页默模版文件。
  • search.php：搜索结果页模版文件。
  • attachment.php：单个附件页面模版文件。
  • image.php：图像页面模版文件。
  • 404.php：页面找不到时，显示的 404 错误页面模版文件。

使用模板文件

在 WordPress 模板中，我们可以使用模板标签动态的显示内容，包括其他模板文件或以其他方式自定义您的网站。

例如，在index.php中，我们可以包含其他文件：

下面是使用模版函数在一个模版中包含其他模版片段的示例：

<?php get_sidebar(); ?>
<?php get_template_part( 'featured-content' ); ?>
<?php get_footer(); ?>

更多有关模版标签的信息，我们可以在模板标签章节找到。

有关包含模版片段的更多信息， 请参阅模版文件包含章节。

主样式文件

style.css 是每个WordPress主题所必需的样式表（CSS）文件。它控制网站页面的外观（视觉设计和布局）。

文件位置

为了方便 WordPress 高效的识别主题，style.css 文件需要位于主题的根目录中，而不是子目录中。

有关如何在主题中包含 style.css 文件的更详细说明，请参阅包含 CSS 和 JavaScript 文件的「样式表」部分 。

基本结构

WordPress 使用 style.css 的头注释部分在外观（主题）仪表板面板中显示有关主题的信息。

示例

这是 style.css 的文件头注释的示例。

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

用（ * ）表示的项目是必需的。

WordPress主题仓库使用此文件中“版本”之后的数字来确定主题是否有可用的新版本。
  • Theme Name（*）：主题名称 。
  • Theme URI ：主题介绍 URL，用户可以在其中找到有关主题的更多信息。
  • Author（*）：开发主题的个人或组织的名称，建议使用主题作者的wordpress.org 用户名。
  • Author URI ：创作个人或组织的 URL。
  • Description （*）：主题的简短描述。
  • Version （*）：版本，以 XX 或 XXX 格式编写。
  • Licence （*）：主题的许可证。
  • Licence URI （*）：主题许可证的 URL。
  • Text Domain （*）：用于 textdomain 的字符串转换。
  • Tags：允许用户使用标签过滤器查找主题的单词或短语，完整的标签列表位于 主题评审手册中 。
  • Domain Path：用来在主题被禁用时，指定在何处查找翻译，默认为 /languages 。

在必需的标题部分之后，style.css 可以包含常规 CSS 文件所具有的任何内容。

子主题的 Style.css

如果您的主题是子主题，则需要在 style.css 的头注释中添加 Template 信息。

/*
Theme Name: My Child Theme
Template: Twenty Seventeen
*/

 

AD：【SpiderSupply】工业品供应链全球解决方案，分布全球的供应链网络，为企业提供快速的生产耗材交付，满足新时代的要求
赞(0) 打赏
未经允许不得转载：篇微 » WordPress主题开发教程手册 — 模板文件
分享到

龙游元宇宙

相关推荐

评论 抢沙发

评论前必须登录！

 

作者介绍

龙游元宇宙

  1. 74文章总数
  2. 2.4万阅读总数
  3. 5点赞总数
阅读作者的全部文章

文章目录

  • 模板术语
  • 模版文件
  • 模板片段
  • 常见的 WordPress 模板文件
  • 使用模板文件
  • 主样式文件
  • 文件位置
  • 基本结构
  • 示例
  • 子主题的 Style.css
吐血推荐

吐血推荐

tob 扁平化、简洁风、多功能配置，优秀的电脑、平板、手机支持，响应式布局，不同设备不同展示效果...

标兵快讯

  • 使用 Hugo + GitHub + Cloudflare Pages 搭建个人博客 赛博佛祖

    前言

    本站搭建记录，结合 GitHub 私有仓库和 Cloudflare Pages 免费托管服务搭建个人博客。利用Cloudflare免费额度实现全球CDN加速，整个过程完全免费，且操作简单。
    本站使用Hugo框架，Hugo是一个用Go语言编写的静态网站生成器，广泛用于构建博客、文档网站和其他静态网站。

    前提

    • 需要一个github账号
    • 需要一个cloudflare账号

    步骤流程

    1. 在本地创建私有仓库并推送到GitHub

    1. 打开 GitHub Desktop，点击左上角的 File > New repository…
    2. 在弹出的窗口中：
      • Name: blog，起名字
      • Description: 输入你对这个仓库的描述（可选）
      • Local path:
        • 举例blog文件夹地址是C:\Users\ro264\OneDrive\文档\blog
        • 那么这里就填C:\Users\ro264\OneDrive\文档
      • Initialize this repository with a README: 选，初始化
      • Git Ignore: 选择 None
      • License: 选择 Noneimage.png
    3. 点击 Create repository 创建本地仓库
    4. 点击右上角的 Publish repository
    5. 在弹出的窗口中：
      • Name: blog
      • Description: 可选
      • Keep this code private: 一定要选勾选！！
    6. 点击 Publish repository，将本地仓库推送到GitHub

    2. 在Windows 11上安装Hugo

    1. 按 Win + S 打开搜索框，输入 cmd，点击 命令提示符 以管理员身份运行。
    2. 在命令提示符中输入以下命令安装Hugo： 
      winget install Hugo.Hugo.Extended
    3. 安装完成后，输入以下命令验证安装： 
      hugo version
      如果显示类似 hugo v0.x.x-xxxxxx 的信息，说明安装成功。

    3. 使用Hugo创建网站项目

    1. 打开 Git Bash 或 命令提示符 或终端，导航到你的 blog 文件夹： 
      cd path\to\blog
      例如： 
      cd C:\Users\ro264\OneDrive\文档\blog
    2. 输入以下命令初始化Hugo项目： 
      hugo new site . --force
      这会在 blog 文件夹中生成一系列文件和文件夹，如 hugo.toml，content，layouts` 等。

    4. 安装主题Hugo PaperMod(主题可更换)

    1. 在 Git Bash 或 命令提示符 中，仍然位于 blog 文件夹下，输入以下命令下载 PaperMod 主题： 
      git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
      这会将 PaperMod 主题下载到 themes/PaperMod 文件夹中。
    2. 打开 blog 文件夹中的 hugo.toml 文件，可以使用任何文本编辑器如 Notepad++ 或 VSCode
    3. 在 hugo.toml 文件中添加或编辑以下内容来使用 PaperMod 主题： 
      theme = "PaperMod"
      toml

    5. 本地调试

    在命令行输入： 
    hugo server
    bash
    启动本地服务器，在浏览器中访问http://localhost:1313/确认网站效果
    • hugo和主题配置慢慢调吧

    5. 将本地仓库推送到GitHub

    1. 在 Git Bash 或 命令提示符 中，确保你位于 blog 文件夹下。
    2. 添加所有更改： 
      git add .
      bash
    3. 提交更改： 
      git commit -m "Initial commit with Hugo site and PaperMod theme"
      bash
    4. 推送到远程仓库： 
      git push origin main
      bash
      如果是第一次推送，可能需要输入GitHub的用户名和密码。

    6. 使用Cloudflare Pages托管Hugo页面

    1. 打开浏览器，访问 Cloudflare 并登录。
    2. 在控制面板中，点击 Pages。
    3. 点击 Create a project，然后选择 Connect to Git。
    4. 选择你刚才创建的 blog 仓库。
    5. 在构建设置页面：
      • Framework preset: 选择 Hugo。
      • Build command: 保持默认的 hugo。
      • Build output directory: 输入 public。
    6. 点击 Save and Deploy，Cloudflare Pages会自动开始部署。

    7. 创建和发布文章

    1. 在 Git Bash 或 命令提示符 中，输入以下命令创建新文章： 
      hugo new posts/my-first-post.md
      bash
      这会在 content/posts 文件夹中创建一个 my-first-post.md 文件。
    2. 打开 content/posts/my-first-post.md，在文件中编辑你的文章内容。
    3. 预览你的博客，输入以下命令启动本地服务器： 
      hugo server
      打开浏览器访问 http://localhost:1313 预览博客。
    4. 当你满意后，停止服务器（Ctrl + C），然后将更改推送到GitHub： 
      git add .
git commit -m "Added my first post"
git push origin main
      Cloudflare Pages 会自动部署更新的内容。 打开浏览器访问pages的域名，即可看到你的博客

    总结

    如此便轻松地搭建了一个基于Hugo的静态博客，并将其托管在Cloudflare Pages上。感谢github和cloudflare提供的免费托管服务，让我们能够快速构建一个简单的博客系统。 建站只是开始，持续的内容创作和维护才是博客真正的生命力所在。

  • 宝塔面板安装Discourse开源论坛社区程序，及安装过程会碰到的一些问题 百分百一次性安装成功

    一、前言

    Discourse程序基于Ruby on Rails, Ember.js, 以及PostgreSQL, 完全免费开源。它拥有丰富的功能，强劲的性能，高稳定性与安全性，以及可以高度自定义的界面。 官方推荐使用docker安装，借助Docker，我们可以在一个简单的容器中为您提供经过完全优化的Discourse配置，以及基于Web的GUI，使您只需单击一个按钮即可轻松升级到Discourse的新版本。这篇文章还是基于宝塔面板来安装。 注意：本教程的安装环境为：Debian 12

    二、安装

    1、简介

    2、准备

    (1）硬件需求：

    • 推荐双核vps
    • 最低1 GB RAM（带有swap）
    • 与Docker兼容的64位Linux系统
    • 最小10 GB磁盘空间

    (2）其他准备

    • 宝塔面板
    • docker管理器（软件商店里安装）
    • 准备一个域名

    3、留出80和443端口

    安装需要80和443端口，所以最好是在一个全新的宝塔环境里安装该该程序。宝塔面板默认占用了80端口，我们需要稍微修改一下。

    (1）路径：

    /www/server/panel/vhost/nginx，把里面的两个文件端口改为其他，比如808。看图：（提醒：第一步尽量采用安装步骤，及“ ./discourse-setup ”，因为采用设置好 app.yml 文件进行程序执行“ ./launcher rebuild app ”重建的方式，后续在进行 Docker 设置的时候容易出问题，这个因人而异，不是每次都会碰到，但是按照此方法，可以减少出现错误的概率 。） 注意，这里面的2个默认文件都需要编辑默认的80端口。

    4、部署

    (1）下载程序

    git clone https://github.com/discourse/discourse_docker.git /var/discourse
cd /var/discourse
    注意：“/var/discourse”可以根据自己的需要设定为自己的自定义文件路径，比如：“/mnt/vdb/www/wwwroot/discourse”

    (2）编辑app.yml

    [reply] 
    执行命令 cp samples/standalone.yml containers/app.yml复制配置文件到containers目录
并且根据自己环境配置app.yml配置文件，修改以下内内容

    (3)具体编辑如下：

    expose:
  - "80:80"   # http  默认80端口，如果需要修改可以改为类似8080:80的形式
  - "443:443" # https

params:
  db_default_text_search_config: "pg_catalog.english"

  ## Set db_shared_buffers to a max of 25% of the total memory.
  ## will be set automatically by bootstrap based on detected RAM, or you can override
  db_shared_buffers: "2048MB"

  ## can improve sorting performance, but adds memory usage per-connection
  #db_work_mem: "40MB"

  ## Which Git revision should this container use? (default: tests-passed)
  #version: tests-passed

env:
  LC_ALL: zh_CN.UTF-8
  LANG: zh_CN.UTF-8
  LANGUAGE: zh_CN.UTF-8
  # DISCOURSE_DEFAULT_LOCALE: en

  ## How many concurrent web requests are supported? Depends on memory and CPU cores.
  ## will be set automatically by bootstrap based on detected CPUs, or you can override
  UNICORN_WORKERS: 8

  ## TODO: The domain name this Discourse instance will respond to
  ## Required. Discourse will not work with a bare IP number.
  DISCOURSE_HOSTNAME: dd.qixi.ng  #这里是域名，不要忘记填写。

  ## Uncomment if you want the container to be started with the same
  ## hostname (-h option) as specified above (default "$hostname-$config")
  #DOCKER_USE_HOSTNAME: true

  ## TODO: List of comma delimited emails that will be made admin and developer
  ## on initial signup example '[email protected],[email protected]'
  DISCOURSE_DEVELOPER_EMAILS: '[email protected]'  #这里修改为自己的

  ## TODO: The SMTP mail server used to validate new accounts and send notifications
  # SMTP ADDRESS, username, and password are required
  # WARNING the char '#' in SMTP password can cause problems!
  #这下面都是邮箱配置，根据需要来。
  DISCOURSE_SMTP_ADDRESS: smtp.163.com
  DISCOURSE_SMTP_PORT: 587
  DISCOURSE_SMTP_USER_NAME: abc
  DISCOURSE_SMTP_PASSWORD: "123456"
  #DISCOURSE_SMTP_ENABLE_START_TLS: true           # (optional, default true)
  DISCOURSE_SMTP_DOMAIN: daniao.org
  DISCOURSE_NOTIFICATION_EMAIL: [email protected]

  ## If you added the Lets Encrypt template, uncomment below to get a free SSL certificate
  LETSENCRYPT_ACCOUNT_EMAIL: [email protected]
    [/reply]

    （4）启动安装

    在程序根目录，输入以下命令开始安装。 
    ./discourse-setup

    (5）在提示时回答以下问题

    例如： 
    Hostname for your Discourse? [discourse.example.com]: 
Email address for admin account(s)? [[email protected],[email protected]]: 
SMTP server address? [smtp.example.com]: 
SMTP port? [587]: 
SMTP user name? [[email protected]]: 
SMTP password? [pa$$word]: 
Let's Encrypt account email? (ENTER to skip) [[email protected]]:
    之后，我们需要等2到8分钟的时间安装程序！！ 提醒：如果需要更换域名，或者其他，你需要编辑app.yml文件。编辑好后，输入以下命令让修改生效。 
    ./launcher rebuild app

    三、进入安装页面

    1、上面的程序安装完成后，打开你的域名便可以访问了。 2、注册新帐户并成为管理员，使用引导前输入的电子邮件地址之一注册一个新的管理员帐户。 3、注册成功，要验证邮箱，所以前面的smtp一定要配置正确。 4、注册管理员帐户后，安装向导将启动并指导您完成Discourse的基本配置。 5、完成设置向导后，您应该看到Staff主题和README FIRST：Admin快速入门指南。

    四、日常运维

    1、升级版本

    随着新版本的Discourse的发布，您将收到电子邮件提醒。请保持最新状态以获取最新功能和安全修复程序。要将Discourse升级到最新版本，请/admin/upgrade在浏览器中访问，然后单击“升级”按钮。 launcher命令/var/discourse可用于各种维护，如下： 
    Usage: launcher COMMAND CONFIG [--skip-prereqs] [--docker-args STRING]
Commands:
    start:      Start/initialize a container
    stop:       Stop a running container
    restart:    Restart a container
    destroy:    Stop and remove a container
    enter:      Use nsenter to get a shell into a container
    logs:       View the Docker logs for a container
    bootstrap:  Bootstrap a container for the config based on a template
    rebuild:    Rebuild a container (destroy old, bootstrap, start new)
    cleanup:    Remove all containers that have stopped for > 24 hours

Options:
    --skip-prereqs             Don't check launcher prerequisites
    --docker-args              Extra arguments to pass when running docker
    举个列子： 
    ./launcher rebuild app

    五、宝塔建站

    用宝塔来安装还是有点繁琐的，你如果用80端口，还需要修改宝塔默认占用的80端口。

    六、升级更新

    1、后台提示：您正在运行旧版本的 Discourse 镜像，该如何升级？

    SSH连接到您的服务，进入您的Discourse文件夹，例如：/var/discourse ，依次输入如下命令： 
    cd /var/discourse
git pull
./launcher rebuild app
    即可完成手动更新

    2、升级过程中，提示：fatal: detected dubious ownership in repository at…………的解决方法

    该报错的原因是，Discourse的文件夹，不在系统默认的Git指定目录中， 解决方法，执行一下命令： 
    git config --global --add safe.directory "*"
    注意：命令中的“*”为您的Discourse源代码文件所在文件夹路径，例如："/var/discourse"

  • Destoon自定义伪静态规则、公司网址、商铺路径、COM 路径优化

    一、先介绍如何自定义伪静态规则 1-1：先打开根目录 api/url.inc.php ,这个文件是存放全站伪静态规则的文件，我们先找到
    1. $urls['php']['list'][5] = array('example'=>'('.$L['url_rewrite'].') mulu-c1-2.html','index'=>'{$catdir}-c{$catid}-1.html', 'page'=>'{$catdir}-c{$catid}-{$page}.html');
    在其下面一行新加
    1. $urls['php']['list'][6] = array('example'=>'('.$L['url_rewrite'].') c1-2.html','index'=>'c{$catid}.html', 'page'=>'c{$catid}-{$page}.html');
    再找到
    1. $urls['php']['item'][4] = array('example'=>'('.$L['url_rewrite'].') show/1/','index'=>'show/{$itemid}/', 'page'=>'show/{$itemid}/{$page}/');
    在其下面一行新加
    1. $urls['php']['item'][5] = array('example'=>'('.$L['url_rewrite'].') s5-2.html','index'=>'s{$itemid}.html', 'page'=>'s{$itemid}-{$page}.html');
    这样 第一步就做好了，再来第二步 1-2：前提你的服务器支持根目录下的 .htaccess  伪静态规则，我们打开这个文件 在最后面新加
    1. RewriteRule ^(.*)s([0-9]+)([\-])?([0-9]+)?\.html$ $1/show.php?itemid=$2&page=$4
    2. RewriteRule ^(.*)c([0-9]+)([\-])?([0-9]+)?\.html$ $1/list.php?catid=$2&page=$4
    自定义的规则就完工了 二、再介绍一下 默认的 公司网址伪静态 优化 2-1：DT默认的伪静态公司网址为 www.***.com/com/会员名 今天我们要把他优化一下 改成 www.***.com/s_会员名 这样的网址，便于SEO 和收录（当然 上面的 s_可以自己定义）,首先，我们要找到原来默认的 com/ 的位置，打开 根目录 include/global.func.php 这个是全站的 公共函数文件 ，每次DT 更新都会更新，修改以后，每次升级请留意，打开后，我们找到 原
    1. $URL = DT_PATH.'com/'.$username.'/';
    将其修改成
    1. $URL = DT_PATH.'s_'.$username.'/';
    2-1：打开 根目录 .htaccess 文件 找到
    1. RewriteRule ^(com)/([a-z0-9_\-]+)/([a-z]+)/(.*)\.html$ index.php?homepage=$2&file=$3&rewrite=$4
    2. RewriteRule ^(com)/([a-z0-9_\-]+)/([a-z]+)([/])?$ index.php?homepage=$2&file=$3
    3. RewriteRule ^(com)/([a-z0-9_\-]+)([/])?$ index.php?homepage=$2
    将其修改为
    1. RewriteRule ^(s_)([a-z0-9_\-]+)/([a-z]+)/(.*)\.html$ index.php?homepage=$2&file=$3&rewrite=$4
    2. RewriteRule ^(s_)([a-z0-9_\-]+)/([a-z]+)([/])?$ index.php?homepage=$2&file=$3
    3. RewriteRule ^(s_)([a-z0-9_\-]+)([/])?$ index.php?homepage=$2
    所有的修改就完成了，现在就可以去网站后台选新的伪静态规则了，记得，先更新缓存，再选择伪静态规则，最后更新信息。

  • 2025教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理 赛博解析

    Cloudflare使用Workers和Pages部署网站反向代理

    使用 Cloudflare Workers 和 Pages 进行网站反向代理是一个非常实用的方法，可以帮助你加速访问、绕过限制或隐藏源站地址。以下是一个简洁的教程，教你如何利用这两者实现反向代理功能。整个过程无需自己托管服务器，利用 Cloudflare 的边缘计算能力即可完成。 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 Cloudflare 不仅仅是一个 CDN 服务商，而是一个高性能、低延迟、安全可靠的全球网络平台。 借助其遍布全球的边缘计算架构，Cloudflare 能够高效加速静态与动态内容的分发，同时提供精准的缓存策略以优化带宽使用。此外，其内置的无限 DDoS 保护机制可有效抵御各类网络攻击，确保业务的稳定性与安全性。 今天，我们将利用 Cloudflare Workers 与 Cloudflare Pages 搭建高效的反向代理服务，以充分发挥 Cloudflare 在分布式计算与边缘网络加速方面的优势。

    配置网站反向代理前的准备

    Cloudflare账户 如果还没有账户，请访问Cloudflare进行注册！ Cloudflare账户注册过程相对简单，可以使用谷歌账号、苹果账号或自定义的Email进行注册。 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 推荐使用Google进行注册，Google账户几乎覆盖所有国外的热门网站，都可以使用Google账户进行登录，如果你还没有谷歌账户的话，赶紧去注册一个吧！ 激活域名 需要将域名转移到Cloudflare上面，如果你还不会在Cloudflare中激活域名的话，下面教你如何激活域名。 需要更新您的名称服务器来激活 Cloudflare。 在Cloudflare后台添加新域名，将域名输入，默认选择快速扫描DNS记录，点击继续！ 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 选择免费计划，域名添加成功！ 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 接下来登录到你的域名注册的网站上，进入后台后，找到并关闭 DNS 安全 (DNSSEC) 设置，如果默认是关闭的请无视，您以后可以通过 Cloudflare 重新启用。 将您当前的名称服务器替换为 Cloudflare 分配的名称服务器。 注意：每个域名都会分配不同的名称服务器，删除掉多余名称服务器，在名称服务器1和名称服务器2中填写Cloudflare 名称服务器。 下面以namesilo为例： 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 在后台点击域名，进入域名操作页面，编辑名称服务器。将名称服务器里的内容删除掉。 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 修改名称服务器后，保存即可。个别地区生效时间较晚，暂时不需要理会生效时间。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 在Cloudflare后台，如果域名状态是活动状态，就表示已经生效了，如果名称服务器没有生效或者修改错误，会显示名称服务器无效。 GitHub账户 如果还没有账户，请访问GitHub进行注册！ 教你如何使用 Cloudflare Workers和Pages配置网站反向代理-1 在GitHub上创建账户，只能使用电子邮件注册，建议使用Gmail进行注册。 在邮箱中接收验证码，填写完毕后，账户注册成功！

    使用Workers和Pages部署网站反向代理Proxy

    接下来我们使用Workers和Pages部署网站反向代理，有两种方式来部署网站的反向代理，下面来实践一下部署过程。

    注意事项

    • Workers 方式: 复制 _worker.js ，在 Cloudflare 保存并部署。
    • Pages 方式: Fork 仓库，在 Cloudflare 连接 GitHub 一键部署。
    • Workers vs Pages：Workers 更适合纯动态代理，Pages 适合混合静态内容和动态功能。如果只是简单反向代理，Workers 更直接。
    • 免费配额：Cloudflare 免费套餐提供每天 10 万次 Workers 请求，Pages 也有类似的限制，足够个人使用，但大规模流量可能需要付费计划。
    • 国内访问：workers.dev 和 pages.dev 在中国大陆可能被限制，建议绑定自定义域名。
    • 安全性：确保目标网站允许代理访问，避免违反服务条款。

    使用 Cloudflare Workers 实现反向代理

    Cloudflare Workers 是运行在 Cloudflare 全球边缘节点上的无服务器脚本，可以轻松处理 HTTP 请求并将其转发到目标网站。 第一步：注册并登录 Cloudflare 如果你还没有 Cloudflare 账号，先去官网注册一个，然后登录。 第二步：创建一个 Worker 在 Cloudflare 仪表盘中，点击左侧计算（Workers）下面的 "Workers 和 Pages"，然后选择 "快速开始"。 教你如何使用 Cloudflare Workers和Pages配置Proxy 网站反向代理-1给你的 Worker 起个名字（默认会生成一个类似 yourname.workers.dev 的域名）。 名字填写完毕后，点击部署，接下来进入部署页面中 教你如何使用 Cloudflare Workers和Pages配置Proxy 网站反向代理-1点击编辑代码，进入到 Worker 编辑器中，删除默认代码，粘贴以下简单反向代理脚本。 教你如何使用 Cloudflare Workers和Pages配置Proxy 网站反向代理-1 第三步：创建反向代理脚本 创建一个自定义的java脚本，下面是反向代理脚本示例： 
    addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});


async function handleRequest(request) {
const url = new URL(request.url);
// 将请求转发到的目标网站
const targetHost = 'example.com'; // 替换为你要代理的域名
url.hostname = targetHost;


// 创建新的请求
const newRequest = new Request(url, request);
return await fetch(newRequest);
}
     
    这个脚本会把所有发送到你 Worker 的请求转发到 example.com。 第四步：保存部署 点击 右上角的蓝色按钮"部署"，你的 Worker 就上线了。你可以通过 https://your-worker-name.yourname.workers.dev 访问它。 第五步：配置域名 由于workers.dev的域名在国内无法访问，你需要配置新的域名。 在配置选项下面的域和路由菜单中，点击添加。 教你如何使用 Cloudflare Workers和Pages配置Proxy 网站反向代理-1 选择自定义域，然后输入域名后保存。这时候域名就添加成功了，可以使用新域名访问了。 到这里，使用Cloudflare Workers实现反向代理的功能就已经实现了，是不是很简单。接下来还可以使用Pages部署网站反向代理。

    使用 Cloudflare Pages部署网站反向代理

    Cloudflare Pages 是一个静态网站托管平台，结合 Git 仓库自动化部署，适合快速上线前端项目。它最近新增了 Functions 功能（本质上是 Workers 的变种），允许在边缘执行动态代码。 Cloudflare Pages 主要用于托管静态网站，但结合 Functions（基于 Workers 的功能），也可以实现反向代理。 下面开始使用 Cloudflare Pages 部署反向代理。 第一步：创建 Pages 项目 在 Cloudflare 仪表盘的 "Workers 和 Pages" 中，点击创建，然后选择 "Pages"，点击 "连接到Git"。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 连接你的 GitHub 或 GitLab 仓库（可以创建一个简单的空的静态项目，例如只有一个 index.html）。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 第二步：连接到存储库 这里以GitHub为例，首先需要在GitHub上创建一个项目。 在 Github 上建立仓库并添加代码，登录 Github 后，如下图所示，点击创建存储库，建立一个名为 Cloudflare Pages 的私库。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 注意，这里创建新的存储库要选择私人的，否则是任何人都可以访问的。 接下来创建新文件，点击 creating a new file 创建新文件，创建文件。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 下面创建一个名为_worker.js 的文件，然后复制以下代码，在第五行单引号里改成你想要反代的网站，然后保存，提交更改。 反向代理的js代码，注意域名中不要加https,http等字符。 
    export default {
async fetch(request, env) {
let url = new URL(request.url);
if (url.pathname.startsWith('/')) {
url.hostname = '反代地址'
let new_request = new Request(url, request);
return fetch(new_request);
}
return env.ASSETS.fetch(request);
},
};
        返回到Cloudflare Pages页面后， 选择 GitHub 后点击 "连接 GitHub" 按钮。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 页面跳转至 Github ，点击 Install & Authorize 按钮。 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 输入密码进行连接，连接成功后，返回到Cloudflare Pages 教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 选择存储库后，点击开始设置。 设置构建和部署页面可以修改项目名称，或者默认即可，最后点击保存并部署。 很多人在开始部署的时候显示失败。 这是因为Cloudflare Pages 的构建系统版本升级成了v2，在项目的设置选项中，将构建系统版本修改成v1，然后重新部署就可以成功了！ 2025教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 部署成功后，你可以在自定义域中绑定独立的域名。 2025教你如何使用 Cloudflare Workers和Pages配置Proxy网站反向代理-1 到这里Cloudflare Pages反向代理就设置完了，是不是很简单！

    Workers 和 Pages 部署反向代理的区别和优缺点对比

    选择 Workers 的场景： 需要强大的反向代理功能，例如：
    • 修改所有类型的响应内容（HTML、XML、JSON 等）。
    • 处理复杂的替换规则或动态路由。
    • 精确控制响应头或缓存策略。
    对性能要求高，希望在服务端完成所有逻辑。 项目涉及边缘计算或需要全球低延迟响应。 选择 Pages 的场景： 反向代理需求简单，例如仅代理 HTML 并做少量替换。
    • 项目主要是静态网站，只需简单的反向代理或重定向。
    • 不希望额外成本，只依赖免费额度。
    • 开发团队熟悉前端开发，倾向于静态文件部署。
    应用多条内容替换规则（包括标题、URL、图片等）。以下是对比后的建议：
    • Workers： 优势：可以完美实现你的脚本，直接在服务端完成所有替换，支持正则表达式和多种内容类型，性能和用户体验更好。 推荐理由：你的需求涉及复杂的替换规则（多条正则匹配）和 URL 重写，Workers 更适合。
    • Pages： 限制：只能通过客户端 JS 实现替换，性能较差，且无法处理非 HTML 内容或响应头。 适用性：如果预算有限且只代理 HTML，可以勉强使用，但体验不如 Workers。

  • 宝塔面板 Docker存储路径的迁移和指定 docker的/var/lib/docker目录迁移

    宝塔面板是一个非常方便的服务器管理工具，它提供了一键安装、管理各种服务的功能，让服务器管理变得简单快捷。在宝塔面板中，我们可以通过Docker来安装各种应用程序，方便快捷地部署和管理。 本文将介绍如何在宝塔面板中指定Docker的安装位置，并提供相关的代码示例。

    一、什么是Docker

    Docker是一个开源的应用容器引擎，通过使用容器来封装应用程序及其依赖项，实现快速部署、可移植性和自动化管理。使用Docker，我们可以将应用程序和其依赖项打包在一个容器中，然后在任何支持Docker的环境中运行，无需担心环境依赖和兼容性问题。

    宝塔面板中安装Docker

    登录宝塔面板，进入软件商店，搜索并安装Docker。 安装完成后，在宝塔面板的软件管理中找到Docker，点击进入>>。 在Docker的管理界面中，我们可以看到Docker的版本信息、运行状态等。

    指定Docker安装位置

    默认情况下，宝塔面板会将Docker安装在/var/lib/docker目录下。但是有时候我们希望将Docker安装在其他位置，比如一个更大的磁盘分区上。下面是指定Docker安装位置的步骤： 首先，我们需要准备一个用于安装Docker的磁盘分区，并挂载到系统中。 进入宝塔面板的文件管理器，找到Docker的安装目录。 备份Docker的数据目录。 示例代码： 1.cp -r /var/lib/docker /mnt/docker-backup 1.停止Docker的服务。 示例代码： 1.systemctl stop docker 1.将Docker的数据目录迁移到新的位置。 示例代码： 1.mv /var/lib/docker /mnt/docker 1.创建一个软链接，将新的数据目录链接到原来的位置。 示例代码： 1.ln -s /mnt/docker /var/lib/docker 1.启动Docker的服务。 示例代码： 1.systemctl start docker 1.至此，我们成功地将Docker的安装位置指定到了新的磁盘分区上。 总结 本文介绍了如何在宝塔面板中指定Docker的安装位置。通过备份、迁移和创建软链接等操作，我们可以将Docker的数据目录迁移到任意位置。这样做可以方便我们管理和扩展Docker的存储空间。当然，在迁移前我们需要确保目标位置具备足够的磁盘空间，并备份数据以防止意外情况发生。 Docker的应用非常广泛，通过宝塔面板的一键安装功能，我们可以方便地部署和管理各种应用程序。希望本文能对你理解和使用Docker有所帮助。

  • 使用Cloudflare电子邮件路由 + Gmail 创建免费的域名邮箱收发系统 赛博邮件

    邮箱是我们生活中非常重要的工具，每个人都有自己的邮箱帐号，大多数人使用的是邮箱服务商提供的邮箱，如Gmail，163邮箱，qq邮箱等。然而使用这些邮箱时，你通常很难注册到一个自己喜欢的邮箱名，有时候，你不得不妥协，在想要的邮箱明后面加一串难看的数字。同时使用这些邮箱来收发邮件，会给人带来不太专业的观感，尤其你是作为独立开发者或者销售与客户沟通时。本文教你如何使用Cloudflare来创建一个属于你自己的域名邮箱。

    前置条件

    • 域名（如果你还没有域名，可以在域名服务商购买，如Cloudflare, Godday）

    原理介绍

    Cloudflare是一家非常著名的网络安全服务商，提供了内容分发网络 (CDN)、DDoS防护、DNS管理、SSL/TLS加密、Web应用防火墙 (WAF) 等一系列服务，这里我们主要使用它的邮件转发功能，
    如果你还没有Cloudflare帐号，你可以免费注册一个，使用Cloudflare邮件转发功能需要域名的DNS在Cloudflare下管理，如果你的域名是在其它域名服务商购买的，可以根据这个文档，将域名迁移到Cloudflare下。
    Resend是一个专业的电子邮箱发送平台，可以绑定域名并发送邮件，如果你需要使用域名邮箱发送电子邮件，你可以使用Resend发送，Resend为免费用户提供每天100封每月1000封的发送额度，对于大多数个人用户来说，已经非常够用了。
    Cloudflare + Gmail的域名邮箱原理如下
    • 使用Cloudflare的邮件代理功能，将域名邮件转发到Gmail邮箱
    • Gmail邮箱收发和管理邮件
    • 使用Resend发送域名邮件（可选）

    配置

    Cloudflare配置

    1. 登录Cloudflare，选择电子邮件→电子邮件路由→创建地址
    1. 填写自定义地址和目标位置点击保存，自定义地址就是你需要用来收邮件的邮箱名称前缀，你可以根据你的需要选择任何名称，目标位置就是你接收管理邮件的邮箱如gmail邮箱
    cloudflare的设置就已经完成，往你的域名邮箱发送一封邮件，你的gmail邮箱就可以接收到该邮件，域名邮箱收件设置就已经完成。如果你还有发件需求，请看第二步

    Resend配置

    如果你还没有注册Resend，请先注册
    1、绑定域名，选择Domain→Add Domain 2、输入你的域名，点击添加 3、获取域名的DNS设置 4、打开Cloudflare，DNS→记录→添加记录，将第三步的DNS Records都添加到Cloudflare中 5、验证域名，点击Verify DNA Records， 当Status变成Active时，验证成功。DNS设置并不会立即生效，你可能要等上一段时间。

    配置Gmail发送Resend邮件

    1、点击API Keys →Create API Key， 生成一个key，在后续配置Gmail发送邮箱时需要用到 2、打开Gmail， 点击设置→查看所有设置→帐号和导入→添加其它电子邮件地址 3、填写名称和电子邮件地址，名称是你展示给用户的名称，电子邮件地址，是你在cloudflare中设置的邮箱地址，点击下一步 4、填写SMTP服务器，用户名直接填resend，密码为第1步中设添加的key，SMTP服务器信息可以从Resend → Settings →SMTP中获取， 填写好后保存更改。 5、设置回复邮件时，用此相同的地址回复，这样，你在收到域名邮箱的邮件时，直接回复时，便会使用同样的邮箱回复。

    总结

    这里Cloudflare可替换为任何有邮件转发功能的域名服务商，Gmail可以替换为任何的邮件服务商，Resend可以替换为任何的邮件发送平台。如果你手上有注册好的域名，赶紧去试一下吧，让你拥有一个与众不同的邮箱。

热门专题

热门文章

热门标签

wordpress(10)ai写作(5)Littlegiant(3)雷都捷特(3)绿牛(3)greenbull(3)绿牛工具(3)mro(3)docker(3)Github(3)人工智能(3)智能ai写作(3)ai写作免费(3)ai写作助手(3)ai写作生成器(3)ai学习助手(3)ai文档总结(3)ai英语口语(3)免费ai(3)ai创作(3)文献综述(3)知识管理(3)VPN(3)云主机(3)宝塔面板(3)标兵网(2)稳耐(2)Werner(2)多功能梯(2)元宇宙(2)

活跃读者

    网站统计

    • 日志总数：91
    • 标签总数：728
    • 分类总数：55
    • 用户总数：39
    • 最后更新：2025-10-29

    登录

    找回密码

    注册