Telescope Nova is the perfect platform to use if you want to build your own social web app fast and easy. This is a free and open-source project created by Sacha Greif. The front-end development part of the app is built with the React library , while the back-end is taken care of by the Meteor framework. Both are written in JavaScript, one of the most popular programming languages today.
Telescope Nova是您想要快速简便地构建自己的社交网络应用程序的理想平台。 这是Sacha Greif创建的免费开源项目。 该应用程序的前端开发部分是使用React库构建的，而后端则由Meteor框架负责。 两者都是用JavaScript编写的， JavaScript是当今最流行的编程语言之一。
Since at work we are using Meteor.js for back-end development, it was next to impossible for us not to try to customize Telescope Nova, which is one of the most popular among Meteor apps.
由于我们在工作中使用Meteor.js进行后端开发 ，因此几乎没有可能不尝试自定义Telescope Nova，它是Meteor应用程序中最受欢迎的应用程序之一 。
In this quick tip, you will learn how to create your own custom theme for Telescope Nova. But first, a few words on how to get your development environment set up.
在此快速提示中，您将学习如何为Telescope Nova创建自己的自定义主题 。 但是首先，关于如何设置开发环境的几句话。
Before you can install Nova, you need to have Node.js, NPM and Meteor.js already installed. If you haven’t, proceed with the following installation steps:
在安装Nova之前，您需要先安装Node.js，NPM和Meteor.js。 如果尚未安装，请继续以下安装步骤：
Install Node.js and NPM . If you are using Windows and struggle with installation, How to Install Node.js and NPM on Windows by Dave McFarland should be helpful
安装Node.js和NPM 。 如果您正在使用Windows并难以进行安装，那么Dave McFarland 撰写的《如何在Windows上安装Node.js和NPM》应该会有所帮助。
Install Meteor.js.
安装Meteor.js 。
Now let’s install Nova on your localhost. On the command line, type:
现在，让我们在本地主机上安装Nova。 在命令行上，键入：
git clone https://github.com/TelescopeJS/Telescope.git cd Telescope npm install meteorThen you should be able to see the app running on http://localhost:3000/ .
然后，您应该能够看到在http://localhost:3000/上运行的应用程序。
For more info about installing Nova, go to their GitHub instructions.
有关安装Nova的更多信息，请转到其GitHub说明。
Once your app is up and running, you can start to customize its default look by following the steps outlined below:
应用启动并运行后，您可以按照以下概述的步骤开始自定义其默认外观：
Go inside your Telescope>packages folder. There you will find the folder my-custom-package
进入Telescope>packages文件夹。 在那里，您将找到文件夹my-custom-package
Copy/Paste the my-custom-package folder and rename the copy, for
复制/粘贴my-custom-package文件夹并重命名该副本，
example,
例，
custom-theme. Now you have created your own package
custom-theme 。 现在您已经创建了自己的包
Inside your custom-theme package, find the file package.js and open
在您的custom-theme包中，找到文件package.js并打开
it in your editor. Replace this piece of code –
在您的编辑器中。 替换这段代码–
name: “my-custom-package” — to match your package name. So in this case it will be name: “custom-theme”
name: “my-custom-package” —与您的包名称匹配。 因此，在这种情况下，其name: “custom-theme”
In the terminal, navigate to your Telescope folder and type: meteor add custom-theme to apply your new package to the app
在终端中，导航到Telescope文件夹，然后键入： meteor add custom-theme将新程序包应用到应用程序
Then start the app using the command: meteor
然后使用以下命令启动应用程序： meteor
Finally, go to http://localhost:3000 where you should see this new look with
最后，转到http://localhost:3000 ，您应该在其中看到这种新外观
star-shaped emojis around the logo.
徽标周围的星形表情符号。
Before going ahead with customizing components, here are a few reminders:
在继续自定义组件之前，请注意以下几点：
You will find most of the components you want to change in the packages>nova-base-components folder
您可以在packages>nova-base-components文件夹中找到要更改的大多数packages>nova-base-components
Never edit original files! You should only change your custom files!
切勿编辑原始文件！ 您只应更改自定义文件！
Don’t forget to use className instead of regular class
不要忘记使用className而不是常规class
Always write the closing html tags, for example <img src="/" alt=""></img>.
始终编写结束html标签，例如<img src="/" alt=""></img> 。
Now, let’s say you want to remove these avatars on the right side. You should see the relevant class using your browser’s developer tools’ inspect element functionality, which will help you locate the markup you are looking for.
现在，假设您要删除右侧的这些头像。 您应该使用浏览器开发人员工具的检查元素功能查看相关的类，这将帮助您找到所需的标记。
Next, follow the steps below:
接下来，请按照以下步骤操作：
Find the PostsCommenters component by accessing nova-base-components>lib>posts>PostsCommenters.jsx , and copy its entire content
通过访问nova-base-components>lib>posts>PostsCommenters.jsx找到PostsCommenters组件，然后复制其全部内容
Inside your package, create a new file called CustomPostsCommenters.jsx. The path will be custom-theme>lib>components>CustomPostsCommenters.jsx
在您的包中，创建一个名为CustomPostsCommenters.jsx的新文件。 路径将是custom-theme>lib>components>CustomPostsCommenters.jsx
Paste the content of PostsCommenters.jsx, which you copied before, inside it.
将您之前复制的PostsCommenters.jsx的内容粘贴到其中。
The original code looks like this:
原始代码如下所示：
import Telescope from 'meteor/nova:lib'; import React from 'react'; import { Link } from 'react-router'; import Posts from "meteor/nova:posts"; const PostsCommenters = ({post}) => { return ( <div className="posts-commenters"> <div className="posts-commenters-avatars"> {_.take(post.commentersArray, 4).map(user => <Telescope.components.UsersAvatar key={user._id} user= {user}/>)} </div> <div className="posts-commenters-discuss"> <Link to={Posts.getPageUrl(post)}> <Telescope.components.Icon name="comment" /> <span className="posts-commenters-comments-count">{post.commentCount}</span> <span className="sr-only">Comments</span> </Link> </div> </div> ) } PostsCommenters.displayName = "PostsCommenters"; module.exports = PostsCommenters; export default PostsCommenters;To remove the avatars, you will delete the part of the code inside your custom file, not the original, that reads as follows:
要删除头像，您将删除自定义文件中的部分代码，而不是原始代码 ，其内容如下：
<div className="posts-commenters-avatars"> {_.take(post.commentersArray, 4).map(user => <Telescope.components.UsersAvatar key={user._id} user={user}/>)} </div>And to make this custom file actually override the original one, you need to make the following further changes:
为了使该自定义文件实际覆盖原始文件 ，您需要进行以下进一步的更改：
Locate the portion of the code that looks like this:
找到如下所示的代码部分：
const PostsCommenters = ({post}) => { return ( <div className="posts-commenters"> // more code here </div> ) } PostsCommenters.displayName = "PostsCommenters"; module.exports = PostsCommenters; export default PostsCommenters;Edit it to look like the snippet below:
编辑它，使其看起来像下面的代码片段：
const CustomPostsCommenters = ({post}) => { return ( <div className="posts-commenters"> // more code here </div> ) } export default CustomPostsCommenters;It is important that you always name your custom files and components by adding the word Custom at the beginning of the name! The rest of the file name remains the same as the original file.
务必始终通过在名称开头添加“ 自定义 ”一词来命名自定义文件和组件！ 文件名的其余部分与原始文件相同。
The last thing to do is to write a few more lines of code inside the components.js file, which you can find here: custom-theme>lib>components.js:
最后要做的是在components.js文件中写几行代码，您可以在这里找到： custom-theme>lib>components.js ：
import CustomPostsCommenters from "./components/CustomPostsCommenters.jsx"; Telescope.components.PostsCommenters = CustomPostsCommenters;You will need to repeat the steps above for each new component you want to change. Your components.js file will look something like this:
您需要对要更改的每个新组件重复上述步骤。 您的components.js文件将如下所示：
At this point, the desired changes should be applied and you should no longer see any avatars displayed on the screen. Here’s what your theme should look like:
此时，应该应用所需的更改，并且您应该不再看到任何化身显示在屏幕上。 这是您的主题外观：
You are not limited to customizing the structure of your Telescope Nova theme. You can just as painlessly customize its appearance by modifying the style sheet.
您不仅限于自定义Telescope Nova主题的结构。 您可以通过修改样式表轻松地自定义外观。
Here’s how.
这是如何做。
Inside your package, you should find a file called custom.scss , where you are going to write your custom styles. The path should be: custom-theme>lib>stylesheets>custom.scss
在包内，您应该找到一个名为custom.scss的文件，您将在其中编写自定义样式。 路径应为： custom-theme>lib>stylesheets>custom.scss
If you are more comfortable with pure CSS rather than Sass, just make a new file and call it, for example, custom.css .
如果您更喜欢纯CSS而不是Sass，那么只需创建一个新文件并调用它即可，例如custom.css 。
Now make a simple change inside it, just for testing. For instance:
现在，在其中进行简单的更改，仅用于测试。 例如：
a { color:red; }Save custom.css and then open the package.js file located at custom-theme>lib>package.js .
保存custom.css ，然后打开位于custom-theme>lib>package.js的package.js文件。
Find the part of the code that reads:
找到下面的代码部分：
api.addFiles([ 'lib/stylesheets/custom.scss' ], ['client']);Add the path to your new file, like this:
将路径添加到新文件，如下所示：
api.addFiles([ 'lib/stylesheets/custom.scss', 'lib/stylesheets/custom.css' ], ['client']);Save your work and wait for the app to reload. Now the color of your links should have changed into red.
保存您的工作并等待应用程序重新加载。 现在，链接的颜色应该已变为红色。
Check out the live version of one of our customized Telescope Nova theme in action!
看看我们定制的Telescope Nova主题之一的实时版本 ！
For more information about making a custom Telescope theme, take a look at these useful resources:
有关制作自定义望远镜主题的更多信息，请查看以下有用的资源：
Telescope official documentation
望远镜官方文档
Telescope Github repo
望远镜Github回购
Telescope official youtube tutorial part 1 and part 2
望远镜官方YouTube教程第1 部分和第2部分
Now it’s your turn, add your own customizations and share the result in the comments!
现在轮到您了，添加您自己的自定义并在评论中分享结果！
翻译自: https://www.sitepoint.com/quick-tip-how-to-build-a-custom-theme-for-telescope-nova/
相关资源：欧拉项目：:telescope:欧拉项目解决方案-源码