Install the Discourse Theme CLI console app to help you build themes

The discourse Discourse Theme CLI is a ruby gem that allows you to use your editor of choice when developing Discourse themes and theme components. As you save files the CLI will update the remote theme or component and changes to it will appear live!

Installing

To play with it, make sure you have Ruby 2.5 or up installed.

If you are on Windows, you have 2 options:

Option 1: Windows Subsystem for Linux.

Windows 10 has access to a full Linux environment, you can use it to install ruby simply with sudo apt-get install ruby, this will give you Ruby 2.3.

Options 2: Older Windows

Older versions of Windows have no access to WSL, you can easily install Ruby with Ruby Installer, go for the recommended version and default settings for the install.

Mac OS version 10.13.3 ship with Ruby 2.3 out of the box, nothing special is needed. If you are running an earlier version of Mac OS consider using rvm, rbenv or homebrew to install a recent ruby.


Once Ruby 2.2 or later is running, open a terminal or command shell and run:

gem install discourse_theme

Once installed, to learn more about it:

discourse_theme

Upgrading

gem update discourse_theme

Features

The CLI provides 3 main functions:

discourse_theme new

You can use it to quickly create a new theme with discourse_theme new YOUR_DIR_NAME

discourse_theme watch

You can use it to monitor a theme and synchronize with a discourse site (with live refresh) using discourse_theme watch YOUR_DIR_NAME

What this means is that you can use your own editor to edit you theme and site will magically :unicorn: update with the changes!

discourse_theme download

You can download an existing theme from Discourse using discourse_theme download YOUR_DIR_NAME. You will then be given the option to start “watching” straight away!

Credentials

You will need to generate an API Key. Go to the admin area and generate a key there.

  • :exclamation: Select a “User Level” of Single User when generating the key, not All Users.
  • :exclamation: Make sure to check Global Key or you will receive 403 forbidden errors.

Credentials are (optionally) stored at ~/.discourse_theme. API keys are stored per-site, and the URL/theme_id for each directory is also tracked. If you ever need to change your settings, just add --reset to any command and you will be prompted for all values again.

Testimonials

“This tool is truly a GEM!” @awole20
“This is very very good.” @awesomerobot
“It’s working :slight_smile: And it’s pretty dosh garn cool. Nice!” @angus
“OMG. It’s unbelievable.” @pfaffman


This document is version controlled - suggest changes on github.

79개의 좋아요
Theme Creator, create and show themes without installing Discourse!
CSS Theme Contest (with Prizes!)
Customizing handlebars templates
Setting up a solid workflow for custom theme development
Theme Developer Quick Reference Guide
Structure of themes and theme components
Automating Discourse Plugin Setup with `create-discourse-plugin` gem
Developing Plugins Faster by separating the frontend into a theme component
Feedback on "on-discourse" javascript for setting up custom JS for each page?
Add settings to your Discourse theme
Get started with Theme Creator and the Theme CLI
Designer's Guide to getting started with themes in Discourse
Split up theme Javascript into multiple files
Updated Custom Header Icon: Post Data via URL
Theme Developer Tutorial: 2. Creating a remote theme
Developing Discourse Themes & Theme Components
Hiding GUI elements for new users (less overwhelming)
Add custom content that only appears on your homepage
Custom CSS/HTML
If you want to edit this theme, you must submit a change on its repository
Edit CSS/HTML editor cursor offset makes it unusable due to CSS font override
How "difficult" is modifying/extending Discourse for a backend dev
Exporting a Theme from Staging and Importing it to the Production portal
Using Plugin Outlet Connectors from a Theme or Plugin
Downloaded component installs fine, but does not once changed/re-zipped
What are the benefits of a dev environment?
3.2.0.beta2-dev (7019dbcfe1) does not load CSS from common.scss anymore
End-to-end system testing for themes and theme components
Different CSS changes for different color schemes
Need help integrating code wrote on Edittext to the Discourse
Need help integrating code wrote on Edittext to the Discourse
How to add a custom button in user profile card?
Remote themes not in database
When to use a plugin vs theme component?
Discourse core is switching to pnpm for JS package management
Using the new custom-homepage feature
Focus the editor when title is pre-filled
Cannot put the template in the desired outlet
Is this the correct way to create a theme component?
Split up theme Javascript into multiple files
Canvas Theme Template
Getting error while uploading theme
[Zotero extension +] Firefox v116 on macOS broken Discourse?
Install Discourse for development using Docker
How to install plugins without using a third-party host?
How to easily edit my site remotely?
Import site theme via console
How are theme setting fields created?
Customisability in discourse?
Discourse Theme CLI is the bomb
Discourse 2.0.0.beta5 Release Notes
How difficult would it be to make the Discourse UI more like Flarum?
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components
Import Error: about.json does not exist, or is invalid
How to Add Unique HTML Content Below Topic Body in discourse forum for Specific Topics
Reuse Discourse Hamburger Functionality
Themes - Add a description field
Create and share a font theme component
Customisability in discourse?
How to create a theme (if I am a pure end user)
Linting configuration
Linting configuration
Is it possible to use a local plugin directory with a docker install?
How to overrule a color variable for one theme only?
Can't customize text on custom button in template override using UI
Is it possible to use theme component from local folder (as plugin) - for local development?
Restrict editing of remote themes
When exporting a theme, I get a broken archive

Uploads via Admin >> Customize >> Themes disappear after a watched theme is saved.

How do we include image assets in the theme so they don’t get wiped out after a save is done?

2개의 좋아요

Hi, welcome!

You need to include the assets in your theme component directly.

At the root, you create an assets directory.
Then, you declare them in about.json

"assets": {
  "<your_identifier>": "assets/<your_asset_filename>",
}

You can see an example here GitHub - MeghnaAJ/discourse-christmas-decorations · GitHub.

3개의 좋아요

A quick heads-up for developers who are using this tool to generate theme components:
You are encouraged to upgrade it! :+1:

A recent PR made the discourse-theme-skeleton repo as the default template. It will give you the latest configuration files!

9개의 좋아요

Thanks!

It would be great to add an Update section to the topic…

Is it a --reset or a rubygem update?

4개의 좋아요

Good idea! I’ve added a ‘upgrading’ section to the OP

gem update discourse_theme
5개의 좋아요

To install the gem on WSL, I had to run both
sudo apt-get install ruby and sudo apt-get install ruby-dev.
Maybe that can be added to the installation instructions.

If you do not install ruby-dev, do you get an error? It should not be necessary to install ruby-dev as ruby itself is sufficient.

4개의 좋아요

I’m pretty sure that I got an error that told me to install ruby-dev, otherwise I wouldn’t have known the package existed.
But I cannot reproduce it by trying to reinstall. Maybe I did something weird the first time.

2개의 좋아요

Hmm that is indeed odd. Feel free to let me know if you can reproduce the problem again.

2개의 좋아요

어제 서버를 3.5.0.beta9-dev로 업데이트했는데, 그 이후로 discourse theme gem으로 라이브 리로딩이 되지 않습니다. Gem 버전은 2.1.6입니다.

오류 같은 것은 보이지 않아서, 혹시 다른 분들도 같은 문제를 겪고 있는지 먼저 여쭤봅니다.

2개의 좋아요

스타일시트의 라이브 리로드는 테마 및/또는 Discourse 코어 업데이트 시 문제를 일으키고 있었기 때문에 프로덕션 인스턴스에 대해 비활성화되었습니다.

근본적인 이유는 스타일시트 변경이 종종 JS/HTML 변경과 연결되어 있기 때문에, 스타일시트만 라이브 로딩하는 것은 위험할 수 있습니다. 사용자는 ‘새로운’ 스타일시트를 ‘오래된’ HTML과 함께 실행하게 되며, 이로 인해 매우 이상한 경험이 발생할 수 있습니다.

라이브 로딩은 개발 모드 Discourse 인스턴스에 대해서는 여전히 활성화되어 있습니다. 이상적으로는 프로덕션 사이트 대신 개발을 위해 이를 사용해야 합니다. 스타일시트 리로드 외에도, 개발 모드 Ember는 프로덕션 모드 Ember보다 훨씬 더 친근한 에러 메시지를 제공합니다.

4개의 좋아요

꽤 큰 변경사항이네요. 공지사항이 없었다는 점이 놀랍습니다. 저는 주로 프로덕션 사이트에서만 테마 개발을 해왔거든요.

이전 동작 방식을 복원할 수 있는 사이트 설정 항목이 있으면 좋겠습니다.

6개의 좋아요

동의합니다. 저도 놀랐고, 검색을 해봐도 이 현재 스레드를 찾을 수 없었습니다. 아니면 이전 OP 날짜를 보고 무시한 걸 수도 있겠네요.

1개의 좋아요

게시물이 새 주제로 분리되었습니다: 이전 테마를 복구하는 방법

설정에서 앱(Apps) 섹션의 스크린샷을 올려주실 수 있나요? 찾을 수가 없어요.

이 키에 대한 액세스를 취소하려면 사용자 설정의 ‘앱(Apps)’ 섹션을 방문하세요.

2개의 좋아요

설정(Prefs) 하단의 보안(Security) 항목에 있습니다.

해당 문구를 다음과 같이 개선할 수 있습니다:

이 키에 대한 액세스를 취소하려면 사용자 설정의 ‘앱’ 아래 ‘보안’ 섹션을 방문하세요.

1개의 좋아요

이제 보입니다. 새로고침을 해야 표시되는 것 같네요.

1개의 좋아요