How to Implement CDN Content Delivery Acceleration in Typecho Using PHP

How to Implement CDN Content Delivery Acceleration in Typecho Using PHP

In today’s internet environment, Content Delivery Networks (CDNs) have become essential tools for improving website speed and stability. Typecho, being a lightweight blog platform, can easily integrate CDN functionality to optimize website loading times and enhance user experience. This article provides a step-by-step guide on how to configure CDN acceleration in Typecho using PHP code.

Step 1: Configure Typecho's Upload Directory

First, ensure that you have purchased a CDN service and obtained the CDN node domain (e.g., cdn.example.com). Next, you need to edit the Typecho configuration file config.inc.php.

Open the config.inc.php file and find the following code:

define('__TYPECHO_UPLOAD_DIR__', __TYPECHO_ROOT_DIR__ . '/usr/uploads');

Modify it to point to the CDN node domain as shown below:

define('__TYPECHO_UPLOAD_DIR__', 'http://cdn.example.com/uploads');

Now, the Typecho upload directory will point to your CDN node, allowing for accelerated file distribution.

Step 2: Accelerate Static Resource Loading via CDN

In addition to the upload directory, you can also accelerate the loading of static resources such as CSS and JS files via CDN. To do this, you need to edit the Typecho theme’s header file (e.g., /usr/themes/default/header.php). Add the following PHP code to dynamically load static resources:

<?php if ($this->options->useCDN): ?>

<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('style.css'); ?>">

<script type="text/javascript" src="<?php $this->options->themeUrl('script.js'); ?>"></script>

<?php else: ?>

<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('style.css'); ?>">

<script type="text/javascript" src="<?php $this->options->themeUrl('script.js'); ?>"></script>

<?php endif; ?>

Step 3: Enable or Disable CDN in the Typecho Admin Panel

To allow administrators to easily toggle CDN acceleration, you should add an option in the Typecho admin settings. In the theme file (e.g., /usr/themes/default/options.php), add the following HTML code:

<p><label for="useCDN">Use CDN Acceleration:</label></p>

<select id="useCDN" name="useCDN"></select>

<option value="0" <?php if ($this->options->useCDN == '0') echo 'selected'; ?>>Disable</option>

<option value="1" <?php if ($this->options->useCDN == '1') echo 'selected'; ?>>Enable</option>

Step 4: Save Settings and Apply

Next, add the following code in the functions.php file to save and apply the settings:

public static function setOptions($theme) {

    Typecho_Widget::widget('Widget_Options')->to($options);

    $useCDN = $options->themeFile($theme . '/options.php');

    if ($useCDN->plugcdn == '1') {

        $options->plugin('PlugCDN')->useCDN = 1;

    } else {

        $options->plugin('PlugCDN')->useCDN = 0;

}

Conclusion

With these steps, you have successfully configured the CDN content delivery feature in Typecho. By modifying configuration files, adding PHP code, and enabling the CDN option in the admin panel, you can improve your website's loading speed and performance. This approach allows your website to use CDN for distributing static resources, reducing server load and providing users with a faster and more stable browsing experience.