تطوير ثيمات Discourse ومكونات الثيم

توثيق أدلة المطور
, ,
1

يمكن استخدام سمات Discourse (Discourse Themes) ومكونات السمات (Theme Components) لتخصيص مظهر وشعور ووظائف الواجهة الأمامية لـ Discourse. يهدف هذا القسم من أدلة المطورين إلى توفير جميع المواد المرجعية التي تحتاجها لتطوير سمات بسيطة لموقع واحد، وصولاً إلى مكونات السمات المعقدة مفتوحة المصدر.

يهدف هذا التمهيد إلى توفير خريطة لجميع الأدوات وواجهات برمجة التطبيقات (APIs) لتطوير السمات. إذا كنت تفضل برنامجًا تعليميًا خطوة بخطوة لتطوير السمات، انتقل مباشرة إلى:

السمات مقابل مكونات السمات

يمكن استخدام سمات Discourse لتخصيص تجربة المستخدم في الواجهة الأمامية باستخدام CSS و JavaScript. يمتلك كل سمة مستودع Git خاص بها، ويمكن لمديري المجتمع بشكل عام تثبيتها وإدارتها عبر لوحة تحكم مسؤول Discourse، حتى على منصات الاستضافة المشتركة.

مكونات السمات هي سمات مخصصة للاستخدام جنبًا إلى جنب مع مكونات السمات الأخرى، كجزء من سمة شاملة. من منظور التطوير، تعد مكونات السمات والسمات متطابقة تقريبًا. في هذه الأدلة، تُستخدم عبارة “السمة” و “مكون السمة” بالتبادل.

المتطلبات الأساسية

أولاً، تأكد من فهمك كيفية استخدام السمات ومكونات السمات الحالية في Discourse. يعد استخدام السمات الجاهزة أسرع وأسلم طريقة لتخصيص مجتمعك. إذا كنت بحاجة إلى المزيد، فقد حان الوقت للنظر في كتابة السمة الخاصة بك.

كجزء من بنية Discourse الشاملة، يتم بناء سمات Discourse باستخدام تقنيات HTML و CSS و JavaScript القياسية، وتستفيد من مفاهيم Ember لواجهات المستخدم الأكثر تقدمًا. تفترض هذه الأدلة المرجعية فهمًا أساسيًا لهذه التقنيات، وتربط بمراجع خارجية حيثما أمكن.

Discourse هو مشروع سريع التطور، وعلى هذا النحو، ستحتاج أي سمة مخصصة إلى صيانة بمرور الوقت. تأكد من مراعاة ذلك كجزء من عمليات التخطيط والتطوير الخاصة بك.

البدء

تخصيص الواجهة الأمامية

المزيد!

تحقق من بقية أدلة المطورين !

يتم التحكم في إصدار هذه الوثيقة - اقترح التغييرات على github.

142 إعجابًا
Get started with Theme Creator and the Theme CLI
Structure of themes and theme components
Theme Developer Quick Reference Guide
Executing js after DOM loaded
Request: House Ads Plugin
What do you use to make animated/gif instructions?
Is there any way to hyperlink to the middle of a post?
Getting Topic Information
Any options for over-riding the username restrictions?
My script is not working
Add JS code to post?
Add long site description to about page
How to inject HTML code in the head only on home and post pages
What's the fastest and easiest way to add a persistent javascript file or snippet
Include assets (e.g. images, fonts) in themes and components
How to add JS in After Header?
How to remove the number of months in the category section
Versatile Banner
Add CurrentThemeId into Body Css Classes
Landing page customization
ItemList Schema Structured Data Error
What do I need before signing up?
Where to place ad script?
Unable to use <script> with plugin outlets
Custom banner for discourse channel
Difficulties in correctly adding external JavaScript
Redirect Page for External URLs
How to have a Tag Column?
How do you add custom JS to a theme?
How can i add image in login and register box
Adding Custom Background CSS
Changing layout with themes
Image not filling header container
Profile Image Looks Blurry After Resizing
Render modal from theme client-side plugin API
Is there an event that fires when topic-lists are reloaded?
Floating "New topic" button
Introducing Font Awesome 5 and SVG icons
Working on first plugin; does not work. Using the pirate-speak plugin as a base
Disable right click on images
Theme Creator Web Dev Help
Customize template used by post widget
Request modification homepage
How would updating effect custom overrides?
How to simplify DM's to individuals
Using CSS to suppress vote options from view results with zero votes
Click counter missing for some internal links
How to create custom theme component?
Can a Discourse theme/template be customised to have this format?
I would like to change the template completely
When you add an additional nesting level, all categories, including child categories, are displayed on the categories page
Make Tag Dropdown Retain Focus After Tag Picked; Client-Side API Questions
Add custom anonymous mode button
Introducing Font Awesome 5 and SVG icons
Can't add new class to topic page elements using jQuery?
Adding a second tag description
Change Default Avatar in home page (for original author avatar)
A native sidebar system
Topic list like on wyzecam
Advice for starting with Discourse development
How to remove the "topics _per week_" count?
Google Material icons
Modifying head_tag.html template
Integrate adbutler / Java script with the adplugin
Put user custom field on the user account page
Can you make Discourse look like medium.com?
Como faço para entender esse fórum? (How do I understand this forum?)
How to create a theme (if I am a pure end user)
How to create a theme (if I am a pure end user)
Override values for auto-generated color variables
Editing The 'Accept Invitation' Page Template
What HTML can you customize?
Wiki Threads - Linking Within A Single Post
reopenWidget throws error
How to add the two floating sidebar banners?
Add a "curated personal learning" page for users
Change "+ New Topic" button to match styling of "Reply" button
Question about modifying a theme we're using
Place for total coding beginners to learn how to customise?
Newbie help accessing code
Per-category Terms of Service
New lines in the composer's reply placeholder?
Fetch third party data for topic list
Discourse Category Headers theme component
Is there a theming 'map'? (An easy way to find plugin-outlets etc)
Call function on page change
Making custom changes to a raw template
Timeline overlapping "Suggested Topics"
Is it possible to modify a function in a helper via the plugin or theme component system?
Different category and sub-category order behaviour
Help me to append html code on Hamburger Section
Is there a way to overwrites all colors?
Customise Sign-up form design
Possible to share a post by save a picture with a QR code?
Dumb question: do I want to make a theme, plugin or component?
What are the different ways to customize content inside a post (custom attributes and such)
I’d like to start developing for Discourse, where should I begin?
Insert text or images anywhere on your site using CSS pseudo-elements
How to access the uncooked content from a theme component?
reopenWidget throws error
How to make a website with Discourse
How might we better structure #howto?
Best strategy for finding the right template to edit?
Is there a recommended way to get the current username from a post?
Theme-Component v Plugin: What's the difference
Theme-Component v Plugin: What's the difference
Theme-Component v Plugin: What's the difference
Minima Theme
How to organize code entered from the head tag?
Creating Parsing Extensions
Can't add new class to topic page elements using jQuery?
Can parameters be injected from the template to a widget action?
How to override a template.hbs from a plugin
A11y for Categories
Navigating to local URL fragment doesn't modify browser history
Wide image extending until search icon?
Customize "Create a New Topic " and "Create Topic" Button
How to add Google Custom Search Engine to Discourse
How to add Google Custom Search Engine to Discourse
Add Login / Signup Buttons to custom HTML
What's the fastest and easiest way to add a persistent javascript file or snippet
Sticky user card contents theme
Wordpress in header, Discourse in footer ? Both sticky
Ability to place custom fields in post header?
Topic List Previews (legacy)
How to put button in the corner of the screen?
Welcome page image
Custom header colour and category icons and login button
Theme Creator Broken Again?
Disabling full name changes
Can I change the URL of the main logo?
How to register a helper in Discourse?
Home page customization: latest + featured
Template overrides no longer working
Styling front page category title & nav container background
Any way to remove columns in the users page?
Category descriptions not showing up on mobile
Spawn navigation on topic pages
Selectively hiding numbers
Allow users to hide like counts
0 likes in latest section
0 likes in latest section
(old) method for adding languages to highlight.js on Discourse
Can I override app/views/layouts/application.html.erb from a plugin?
About the Theme category
About the Theme component category
How customize the appearance of sections like Amazon?
How to show HTML view and how to update data in HTML view
Confused about remotely loaded javascript content
api.decorateWidget - how can I find the template's names?
api.decorateWidget - how can I find the template's names?
Autocompletion for a user field at signup
Is there a way to add a website navigation menu above Discourse header?
How can I add a menu item
Enhanced category-box display component
Interactive SVG using <object>?
Discourse for self hosting
FKB Pro - Social theme
Javascripts targeting the footer doesn't work after page transitions
How can I change the HTML template of advanced search?
JS widget/code (first post)
Next js application as custom front end replacement
Help needed with theming and logo
Is it possible to replace the h3 tag with another tag in category name titles?
Add project description to login page
Custom text at top of search results page
Landing page customization
How to add a custom url text link on the login page
Custom discourse with limited features
[PAID] Onedrive file picker theme component
How can I call third party apis in discourse
How to correctly listen on post-stream update
Modifying DirectoryTables
How to add Javascript to Footer Of Posts?
Website Integration
Is there a comprehensive list of customizable components?
Need help to emulate old forum
How to show Full Name in Embeds
How to display full name in comments embeds
How can I change the background of a certain topic?
Disable media download in onebox
How to bring in Latest topics when using category boxes
Banner text customization for Subscriptions plugin
How do I create a new Sign Up / Login Button?
Login modal misaligned due to ratings plugin
How do I get started with Discourse development as a regular end user with no programming experience?
Lag in selecting text
Big vBulletin forum migration project
Air Theme
What is the name of this theme?
How to customize discourse composer editor
User profile page / CSS class for groups / how to add it to page?
Insert the hbs template into the plugin outlet on the page -> user-preferences-interface to user-preferences-account
How to reopen header-contents widget?
Add localizable strings to themes and theme components
Edit Code
Add custom content on anywhere on discourse
Fakebook Theme
Add a custom header with a dropdown menu
Add settings to your Discourse theme
Contributing to Discourse
Ad Banner / HTML code in the right gutter
Changing the login Page for Custom Themes
How to get DOM elements and change onClick functionality
Designer's Guide to getting started with themes in Discourse
Making a search icon with a theme
Is there a way to change nav toggle menu on mobile to normal text like on desktop?
How to edit topics/show.html.erb
Links into the header block
Customize the header with links, icons, or menus
Import Sql file but can't see Custom theme folder in local development
Locations Plugin :earth_africa:
Author name plus avatar
Sticky footer to the bottom, pure CSS solution
The best way to make small ui modifications
Customize topic list entries (sorting, grouping, filtering) for better organization
Hamburger-categories widget does not mount?
Hamburger-categories widget does not mount?
Can I make a custom button with CSS and HTML?
Is it possible to change vis CSS the Category Moderator shield?
How to use themes?
How to put javascript in Discourse theme?
Implementing a countdown bbcode
Customize Your Site Branding
How can I pull the currently open topic's list of tags?
How can I pull the currently open topic's list of tags?
Any existing theme with categories on top as cards?
Deleting permissions | Create new Topic
Category page layout in 2 columns
Mobile View Loading different HTML as compared to Desktop
How can I have a gif be the embed thumbnail on a topic/post
Disable topic buttons converting to select on mobile
Is there a way to create a footer on the home with icons? (Only for mobile users, and overlapping the topics)
Can anyone help me with this home modification code?
How to make changes on backend side of discourse application using rails
Introduction to Discourse Development
How to add btn before "sign in"
Discourse blog (article and comments)
Custom tags?
Chat look customization
Minimizing Maintenance on Theme Customizations
Sidebar link / top button to PM admin
Can we delete all 'Automatically Bumped' msgs in one go?
Why no view count on mobile
Adding custom html under header (d-header-wrap) instead of main-outlet
How to pass a component setting as a value to an attribute?
Show login first on invitation form
I want to learn how to program for Discourse
Cannot mount the "post-avatar" on the "topic-above-post-stream" plugin outlet
I need help to edit the sidebar
Help with Blocked words and custom button links
What Themes are being used for these Discourse forums?
How can one add a toggle button to the post menu and implement an action for that toggle button in a Discourse plugin?
How to copy the files/data/posts from production to Staging instance
Silent link seems can't handle #anchor links
Right Sidebar Blocks
New th in topic table
How to change category names via theme-component
How to develop new Theme
When to use a plugin vs theme component?
Silent link seems can't handle #anchor links
Is there a way to remove the pop-ups when making a new topic?
Looking for the perfect theme
How do I go about making a very customized theme?
Need help integrating code wrote on Edittext to the Discourse
Need help integrating code wrote on Edittext to the Discourse
I want to add adsense code in <head> for activet adsence account
How to change new topic's layout on mobile side?
JavaScript Execution Time
Search section like on Reddit?
Air Theme
Can you change the color of customizable text?
Gallery of discourse customization
How to resize 'Modern Category + Group Boxes' thumbnail via CSS
How can I change the main CSS codes?
How can I create a Discourse that's just like Stemaway.com?
Using api from custom component
Adding new columns to user lists in groups
Need help to **getSelected** and **replace** from Toolbarevent
How can I edit My Login Page
Embedding a whole Discourse forum on another site in an <iframe>
Error when clicking on the homepage logo
Developing Discourse Plugins - Part 1 - Create a basic plugin
How do I add category banners?
List of components or PluginOutlets with explanatory documentation
Develop a theme
Is it possible to change the icon for staff notices?
Customizing Sign-up and Log in
Handlebars template override all in the same html file?
Show sidebar to anonymous user + Welcome area in central theme
I'm trying to run discourse app locally in production env without docker
Challenges creating a custom color palette
Adding preview screenshots to Discourse themes
Theme Component for text over pics?
Webinar: Love Your Community
Sign Up button doesn't show up anymore with decorateWidget
Controlling site settings with themes
Customize user card
Why am I finding Discourse so difficult to customize?
Air Theme
Air Theme
How do the `@import`'s work with SCSS?
Hide flag actions for current user when they're flagged or the flagger
Policy notice: no basic HTML / CSS questions please
Add category moderators with the API?
How to create a Handlebar helper function
Need help setting up category list images
Self Service Badges?
Why are posts withdrawn instead of being deleted immediately?
How can I apply new changes when edit JS file in production?
Avatars by posts in Category with Featured Topics
Feature idea: Parameterized macros (or, "smart replacements")
Replacing Details Toolbar Button?
Feedback on my forum
Customisability in discourse?
Applying a custom header to Discourse site
Add localizable strings to themes and theme components
How to add customer HTML after "post_1"
Add text to top navbar to the left of login/signup buttons
Add text to top navbar to the left of login/signup buttons
Extending the About page
Description of the category is not displayed at mobile version
Custom structure and more questions
Widget's user awareness
CSS selector to separate posts by current user
Which is Better? Discourse or Flarum?
Javascript assets in a theme component
Can I update the user field automatically via API or otherwise?
Help changing color of buttons
Using Discourse variables to personalize embedded Typeform
How to get specific category banners with subcategories listed below
Category name after category image
Have users complete form when creating a topic?
How difficult would it be to make the Discourse UI more like Flarum?
How do we add buttons next to the "New Topic" button?
Can I use a theme I created without allowing it to be used by others?
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components
Need plugin code for customised dicourse header
How to make a newline in category description
Home page category lumping
How to make your side have a side-bar and external links