クイックヒント：望遠鏡ノヴァのカスタムテーマを構築する方法

カスタム望遠鏡NOVAテーマガイドをすばやく構築します

この記事では、Telescope Novaのカスタムテーマをすばやく簡単に作成する方法を紹介します。 Telescope Novaは、meteor.jsとReactに基づくオープンソースプロジェクトであり、ソーシャルネットワーキングアプリケーションを迅速に構築するのに最適です。

準備：必要なソフトウェアをインストールします

最初に、node.js、npm、およびmeteor.jsがインストールされていることを確認してください。そうでない場合は、以下の手順に従ってインストールしてください。

node.jsとnpmのインストール（Windowsユーザーは、Dave McFarlandのチュートリアル：Windowsにnode.jsとnpmをインストールする方法を参照できます）。
meteor.jsをインストールします。

インストール望遠鏡nova

次のコマンドラインを入力することにより、 アプリケーションは

<code class="language-bash">git clone https://github.com/TelescopeJS/Telescope.git
cd Telescope
npm install
meteor</code>

で実行する必要があります。詳細については、GitHubガイドを参照してください。

http://localhost:3000/

カスタムテーマパッケージを作成

フォルダーを入力します。

フォルダーを見つけます。
1. Telescope/packagesフォルダーをコピーしてmy-custom-packageに変更します。
2. my-custom-packageファイルで、custom-themeを
に置き換えます。
3. custom-theme/package.js端子で、フォルダーに移動して"my-custom-package"を入力します。 "custom-theme"
run
4. アプリケーションを開始します。 Telescope meteor add custom-theme
5. meteor

カスタムコンポーネント

覚えておいてください：元のファイルを直接変更しないでください！カスタムファイルで常に動作し、カスタムファイルとコンポーネント名で「カスタム」をプレフィックスしてください。 属性の代わりにを使用し、HTMLタグが閉じていることを確認します。

• 以下は、適切なアバターを削除する方法の例です。 className classコピー
ファイルコンテンツ。

フォルダーに

ファイルを作成します。

1. コピーされたコンテンツをpackages/nova-base-components/lib/posts/PostsCommenters.jsxに貼り付けます。
2. 次のコードスニペットを削除します（元のファイルではなく、カスタムファイルで削除）：custom-theme/lib/components CustomPostsCommenters.jsx
3. CustomPostsCommenters.jsxコンポーネント名を
：
4. に変更します

<code class="language-javascript"><div classname="posts-commenters-avatars">
  {_.take(post.commentersArray, 4).map(user =>
    <telescope.components.usersavatar key="{user._id}" user="{user}"></telescope.components.usersavatar>)}
</div></code>

ファイル：
5. に次のコードを追加します CustomPostsCommenters.jsx

変更する必要がある各コンポーネントの上記の手順を繰り返します。

<code class="language-javascript">const CustomPostsCommenters = ({ post }) => {
  // ...
};

export default CustomPostsCommenters;</code>

6. custom-theme/lib/components.js

   

   custom css

   フォルダーで、または

   ファイルを作成または変更して、スタイルを変更します。たとえば、custom-theme/lib/stylesheets custom.scss custom.css

   ファイルにカスタムStyleSheetパスを追加します。

   <code class="language-bash">git clone https://github.com/TelescopeJS/Telescope.git
   cd Telescope
   npm install
   meteor</code>

   custom-theme/lib/package.js

   その他のリソース

   望遠鏡の公式文書

   望遠鏡Githubコードベース
   Telescope公式YouTubeチュートリアル（パート1およびパート2）
   • FAQ（FAQS）
   （元のテキストのFAQはトピックとは関係がなく、さまざまなアプリケーションシナリオに属しているため削除されます）

   このガイドが、カスタムテレススコープNOVAテーマをすばやく作成するのに役立つことを願っています！

以上がクイックヒント：望遠鏡ノヴァのカスタムテーマを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。