开发OctoberCMS插件时组件需用哪些值？求助前端数据展示问题

Hey there! Let's get that OctoberCMS plugin component working so you can show your data on the frontend. I'll walk you through the key bits you need in both component.php and default.htm—these are the core pieces for pulling and displaying your plugin's data.

This file handles fetching your plugin's data and passing it to the frontend template. Here's the essential code structure you need:

Basic Component Structure #

First, make sure your class extends October's ComponentBase and includes the required componentDetails() method to register your component:

<?php namespace YourAuthorName\YourPluginName\Components;

use Cms\Classes\ComponentBase;
use YourAuthorName\YourPluginName\Models\YourModel; // Replace with your actual model

class YourComponentName extends ComponentBase
{
    // Define component details (name/description for the CMS backend)
    public function componentDetails()
    {
        return [
            'name'        => 'Your Component Display Name',
            'description' => 'Displays data from my custom plugin'
        ];
    }

    // Optional: Define properties if you want configurable options in the CMS
    public function defineProperties()
    {
        return [
            'limit' => [
                'title'       => 'Number of items to show',
                'description' => 'Limit the number of items displayed',
                'default'     => 10,
                'type'        => 'string'
            ]
        ];
    }

    // The onRun method runs when the component loads
    public function onRun()
    {
        // Fetch your data—adjust this to match your model and needs
        $limit = $this->property('limit');
        $this->page['pluginData'] = YourModel::take($limit)->get();
        
        // Alternatively, if you want to pass data directly to the component template:
        // $this->data['pluginData'] = YourModel::all();
    }
}

• Replace placeholders: Swap YourAuthorName, YourPluginName, YourModel, and YourComponentName with your actual plugin/model names.
• Adjust the data fetch: Use October's Eloquent methods (like all(), where(), take()) to get exactly the data you need.

This Twig template will render the data you pulled in component.php. Here's a simple example to display your items:

{% if pluginData is not empty %}
    <div class="plugin-data-list">
        {% for item in pluginData %}
            <div class="data-item">
                <h3>{{ item.title }}</h3> <!-- Replace with your model's fields -->
                <p>{{ item.description }}</p>
                <!-- Add other fields from your model here -->
            </div>
        {% endfor %}
    </div>
{% else %}
    <p>No data available from the plugin.</p>
{% endif %}

<!-- Optional: Debug to check if data is coming through -->
{# {{ dump(pluginData) }} #}

• Match your model fields: Replace title and description with the actual column names from your plugin's database table.
• Enable debugging: Uncomment the dump() line temporarily to see if your data is being passed correctly (great for troubleshooting!).

How to Use the Component on a Page #

1. Go to your OctoberCMS backend, edit a page.
2. Add your component to the page (look for the name you set in componentDetails()).
3. If you defined properties (like limit), configure them in the component settings.
4. Save the page and view it frontend—your data should now display!

A quick tip: If you're still stuck with the docs, focus on October's Component Basics section and look for examples with custom models—those will map closely to what you're building.

内容的提问来源于stack exchange，提问作者Hessel Kers