Quick Tip: How to Build Your Custom Theme for Telescope Nova

Quickly build custom Telescope Nova theme guide

This article will guide you how to quickly and easily create custom themes for Telescope Nova. Telescope Nova is an open source project based on Meteor.js and React, which is ideal for building social networking applications quickly.

Preparation: Install the necessary software

First, make sure Node.js, NPM, and Meteor.js are installed. If not, please follow the steps below to install:

1. Installing Node.js and NPM (Windows users can refer to Dave McFarland's tutorial: How to Install Node.js and NPM on Windows).
2. Install Meteor.js.

Installation Telescope Nova

Clone Telescope Nova locally by entering the following command line:

git clone https://github.com/TelescopeJS/Telescope.git
cd Telescope
npm install
meteor

The application should run in http://localhost:3000/. For more installation information, please refer to the GitHub guide.

Create custom theme package

1. Enter the Telescope/packages folder. Find the my-custom-package folder.
2. Copy the my-custom-package folder and rename it to custom-theme.
3. In the custom-theme/package.js file, replace "my-custom-package" with "custom-theme".
4. In the terminal, navigate to the Telescope folder and enter meteor add custom-theme.
5. Run meteor Start the application.

Custom components

• Remember: Never modify the original file directly! Always work in custom files and prefix "Custom" on custom files and component names. Use className instead of the class attribute and make sure the HTML tag is closed.

The following is an example of how to remove the right avatar:

1. Copy packages/nova-base-components/lib/posts/PostsCommenters.jsx File content.
2. Create a custom-theme/lib/components file in the CustomPostsCommenters.jsx folder.
3. Paste the copied content to CustomPostsCommenters.jsx.
4. Delete the following code snippet (delete in a custom file, not the original file):

<div className="posts-commenters-avatars">
  {_.take(post.commentersArray, 4).map(user =>
    <Telescope.components.UsersAvatar key={user._id} user={user} />)}
</div>

5. Modify the component name in CustomPostsCommenters.jsx:

const CustomPostsCommenters = ({ post }) => {
  // ...
};

export default CustomPostsCommenters;

6. Add the following code in the custom-theme/lib/components.js file:

import CustomPostsCommenters from "./components/CustomPostsCommenters.jsx";

Telescope.components.PostsCommenters = CustomPostsCommenters;

Repeat the above steps for each component that needs to be modified.

Custom CSS

In the custom-theme/lib/stylesheets folder, create or modify the custom.scss or custom.css file to modify the style. For example:

git clone https://github.com/TelescopeJS/Telescope.git
cd Telescope
npm install
meteor

Add a custom stylesheet path in the custom-theme/lib/package.js file.

More resources

• Telescope official document
• Telescope GitHub code base
• Telescope Official YouTube Tutorial (Part 1 & Part 2)

FAQs (FAQs) (Removed because the FAQ in the original text has nothing to do with the topic and belongs to different application scenarios)

Hope this guide will help you quickly create custom Telescope Nova themes!

The above is the detailed content of Quick Tip: How to Build Your Custom Theme for Telescope Nova. For more information, please follow other related articles on the PHP Chinese website!