Совет: как создать свою тему для телескопа Nova

Далее выполните следующие действия:

1. Найдите компонент PostsCommenters, открыв nova-base-components>lib>posts>PostsCommenters.jsx
2. Внутри вашего пакета создайте новый файл с именем CustomPostsCommenters.jsx Путь будет custom-theme>lib>components>CustomPostsCommenters.jsx
3. Вставьте в него содержимое PostsCommenters.jsx

Исходный код выглядит так:

 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;

Чтобы удалить аватары, вы удалите часть кода внутри вашего пользовательского файла, а не оригинал , который выглядит следующим образом:

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

И чтобы этот пользовательский файл переопределял исходный , необходимо внести следующие дополнительные изменения:

Найдите часть кода, которая выглядит следующим образом:

 const PostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
    // more code here
    </div>
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

Отредактируйте его так, чтобы он выглядел как фрагмент кода ниже:

 const CustomPostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
    // more code here
    </div>
  )
}

export default CustomPostsCommenters;

Важно, чтобы вы всегда называли свои пользовательские файлы и компоненты, добавляя слово Custom в начале имени! Остальное имя файла остается тем же, что и исходный файл.

Последнее, что нужно сделать, это написать еще несколько строк кода в файле components.jscustom-theme>lib>components.js

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

Telescope.components.PostsCommenters = CustomPostsCommenters;

Вам нужно будет повторить шаги выше для каждого нового компонента, который вы хотите изменить. Ваш файл components.js

На этом этапе необходимо применить желаемые изменения, и вы больше не увидите аватары, отображаемые на экране. Вот как должна выглядеть ваша тема:

Настройка CSS

Вы не ограничены настройкой структуры вашей темы Telescope Nova. Вы можете так же безболезненно настроить его внешний вид, изменив таблицу стилей.

 a {
  color:red;
}

 api.addFiles([
  'lib/stylesheets/custom.scss'
], ['client']);

 api.addFiles([
  'lib/stylesheets/custom.scss',
  'lib/stylesheets/custom.css'
], ['client']);