XenForoの最初のアドオンを作成しています。 MVC、テンプレート、スタイル、設定、ナビゲーション-すべてを使用

Cyrusがフォーラムにトレーニングアドオンを投稿しました。このアドオンでは、XenForoのアドオンの作成方法をデモンストレーションできます。 これが私たちが今やることです。 このトレーニングアドオンにはいくつかのエラーが含まれており、おそらくそれらを検出して修正することで自分自身を証明できます。 最初から同じアドオンを作成し、Cyrusが得たものをわずかに改善/修正できるようにします。







タスクは次のとおりです。 アドオンを作成し、別のページにフォーラムのユーザーのお気に入りのメッセージ（つまり、ユーザーが最も気に入ったメッセージ）を一覧表示する必要があります。 管理者は、コントロールパネルのページに表示されるメッセージの最大数を設定し、フォーラムのスタイルでアバターのアウトラインの色を選択できる必要があります。 アドオンは完全にフレーズ化可能で、別のタブでフォーラムのメインメニューに組み込まれている必要があります。



まず、フォーラムをデバッグモードにする必要があります。 これは、/ library / config.phpファイルに行を追加することで実行できます

$config['debug'] = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

管理コントロールパネルに移動し、表示された[開発]タブに移動します。 そこで「アドオンの作成」を選択します。 IDとして、一意の文字列を指定する必要があります。 「LikeReviewRus」（もちろん引用符なし）にします。 タイトルボックスに説明テキストを入力します。 それは何にも影響を与えず、単にコントロールパネルに表示されます。 保存します。 空のアドオンがありました。



次に、ページあたりの投稿数を制限するオプションを作成しましょう。 [ホーム]タブに移動し、[設定]に移動します。 設定のグループを追加します。 グループIDをLikeReviewRusSettingsGroupにします。 タイトルには任意を指定できます。 他の設定グループの中にこのテキストが表示されます。 長くしすぎないでください。 これは、フォーラムの「マスター言語」言語で表示するテキストであることに注意してください。 実際、この言語は英語であり、アドオンも元々英語であることが理想的です。 次に、翻訳して、アドオンファイルとともにロシア語のローカライズを配布できます。 しかし、簡単にするために、今のところ母国語ですべての行を示しましょう。 アドオンとして、アドオンを選択して保存します。



保存すると、この設定グループに自分自身が表示されます。 最初は空であり、ここで設定を作成する必要があります。 [オプションを追加]をクリックします。 オプション名に「LikeReviewRusMaxToDisplay」と入力します。 アドオンを選択し、見出しと説明文を作成します。 したがって、「矢印付きの数値入力フィールド」を選択する必要がある形式として、整数のみを入力する必要があります。 書式パラメータを指定できます

 min=1 step=5 max=100
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、矢印を押すたびに最小設定値が1になり、5が加算/減算され、そこに入力できる最大数が100になることを意味します。 デフォルト値は30です。現時点では、残りの設定はそのままにしておきます。 保存します。 すぐに確認できます。



それでは、スタイル設定を作成しましょう。 [外観]タブに移動し、[スタイル設定]をクリックします。 そこで新しいグループを作成します。 彼女のIDをLikeReviewRusStyleにします。 追加アイテムを含む他のすべてのパラメーターは、自分で選択できます。 保存して、このグループに移動します。 新しいスタイルプロパティを作成するためのダイアログがすぐに表示されます。 プロパティ名はLikeReviewRusAvatarBorderです。 補遺、タイトル、説明を記入してください。 プロパティタイプをスカラーに設定し、色を選択します。 また、グループを手動で再度選択する必要があります。 これはバグであり、修正される予定です。 保存して、得られるものを確認します。 クラスですよね？ :)



次に、アドオンを他の言語に翻訳できるように、いくつかのフレーズを作成する必要があります。 [外観]ページの[フレーズ]リンクをクリックします。 LikeReviewRus_Header（ページの最上部に表示する）およびLikeReviewRus_Descriptionというタイトルでフレーズを作成し、説明として以下に表示します。 この最後のフレーズのテキストには、「これは{numPosts}ユーザーのお気に入りの投稿です。」と入力します。 以下に、{numPosts}の代わりに数量がテンプレートに挿入される方法を示します。



次に、表示するページのテンプレートを作成する必要があります。 [外観]タブの[テンプレート]セクションをクリックします。 次に、新しいテンプレートを作成します。 テンプレート名にlikereviewrus.cssを指定し、次のコンテンツを貼り付けます。

 .mostLikedPosts { } .mostLikedPosts .avatar { float: left; margin-right: 10px; } .mostLikedPosts .avatar img { width: 64px; height: 64px; border: 3px solid {xen:property LikeReviewRusAvatarBorder}; } .mostLikedPosts .likedPost { position: relative; } .mostLikedPosts .primaryContent { padding: 0; padding-top: 10px; } .mostLikedPosts h3 { font-size: 12pt; margin-bottom: 5px; } .mostLikedPosts .likes { display: block; position: absolute; right: 0px; top: 10px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 13px; font-weight: bold; background: {xen:property primaryLighterStill}; border: 1px solid {xen:property primaryLighter}; } .mostLikedPosts .likes:hover { background-color: {xen:property secondaryLightest}; border-color: {xen:property secondaryLighter}; color: {xen:property secondaryDark}; text-decoration: none; box-shadow: 0 0 10px {xen:property secondaryMedium}; } .mostLikedPosts .meta { font-size: 11px; padding-top: 5px; padding-bottom: 5px; margin-left: 80px; margin-bottom: -1px; margin-top: 10px; border: 1px solid {xen:property primaryLighterStill}; border-right: none; border-top-left-radius: 10px; } .mostLikedPosts .meta dd { margin-right: 10px; } .mostLikedPosts .meta dd strong { font-weight: bold; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アドオンを選択し、保存して終了します。 テンプレートで使用するCSSスタイルのリストを記入しました。 タグ{xen：property}は、メインスタイル設定からのデータが挿入される場所を示します（ちなみにそれらを見つけます）。 また、作成したスタイル設定をそこに挿入し、作成者の間違いを修正します（わずかに無味でさえも）。



次に、別のテンプレートを作成し、reviewrus_indexのように名前を付けます。 以下の内容を貼り付けます：

 <xen:title>{xen:phrase LikeReviewRus_Header}</xen:title> <xen:navigation> <xen:breadcrumb href="{xen:link likes-review}">{xen:phrase LikeReviewRus_Header}</xen:breadcrumb> </xen:navigation> <xen:require css="likereviewrus.css" /> <div class="sectionMain mostLikedPosts"> <h2 class="subHeading">{xen:phrase LikeReviewRus_Description, 'numPosts={xen:count $likedPosts}'}</h2> <ol> <xen:foreach loop="$likedPosts" value="$post"> <li class="likedPost"> <div class="primaryContent"> <xen:avatar user="$post" size="m" img="true" /> <h3><a href="{xen:link posts, $post}">{$post.title}</a></h3> <div class="muted">{xen:helper wordTrim, $post.message, 140}</div> <a href="{xen:link posts/likes, $post}" class="likes OverlayTrigger"><strong>{xen:number $post.likes}</strong></a> <dl class="secondaryContent pairsInline meta"> <dt>{xen:phrase posted_by}</dt> <dd><a href="{xen:link members, $post}" class="username">{$post.username}</a></dd> <dt>{xen:phrase date}</dt> <dd><xen:datetime time="$post.post_date" /></dd> <dt>{xen:phrase likes}</dt> <dd><a href="{xen:link posts/likes, $post}" class="OverlayTrigger">{xen:number $post.likes}</a></dd> </dl> </div> </li> </xen:foreach> </ol> <div class="sectionFooter">{xen:phrase showing_x_posts, 'numPosts={xen:count $likedPosts}'}</div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで会ったすべてのタグを見てみましょう。

• <xen：title>-タグはページのタイトルを示します。
• <xen：require>-指定されたCSSファイルをマウントします
• <xen：navigation>および<xen：breadcrumb>-ナビゲーションチェーンとして表示されるものを決定します。 この場合、これは1つのリンクにすぎません。 ここでは、これより複雑なオプションについては検討しません。
• {xen：link}-フォーラムルーティングのルールに従って、パラメーター（likes-review）を使用してURLを作成します。 少し後でルーティングについて。
• {xen：phrase}は、ユーザーが設定で指定した言語でフレーズ値を挿入するだけです。 この言語へのフレーズの翻訳がない場合、メイン言語の元のバージョンが表示されます。 単一引用符では、フレーズのオプションのリストが後に続く場合があります。 既にお気づきのように、中括弧でフレーズ内のパラメーターが決定されます。
• {xen：count}-データベースへのクエリの結果として受信したレコードの数を返します。 要求自体は後で決定されます。
• <xen：foreach>-PHPのようにforeachループを定義します
• <xen：avatar>-ユーザーのアバターを挿入し、ユーザーパラメータで指定されたデータに従って識別します。
• {xen：helper}は、長いテキストをトリムするためのテンプレート内の単なる標準関数です。 このような関数は自分で定義できます。
• {xen：number}および<xen：datetime>-現在の言語（ユーザーに表示されるページ）で指定された設定に従って送信データをフォーマットします
• {$ post.username}のような構成-配列のユーザー名キーを持つ値を$ postテンプレート変数に挿入するだけです。 変数をテンプレートに転送する方法については、後ほど説明します。

以上です。 テンプレートは不完全であることに注意してください（なしなど）。 つまり、これは単にページの内側であり、外側には標準のXenForo要素があります。



ここで、XenForoがリクエストを処理する方法について少し説明します。 MVCモデルに精通している場合は、良いアイデアがある可能性があります。 そうでない場合、一言で言えば次のようになります。 XenForoは、受信したHTTP要求を解析し、ルーティングのルールに従って、制御を転送して処理するコントローラーを決定します。 コントローラーはリクエストを受け入れ、データモデルを作成し（たとえば、リクエストでデータベースからデータを読み取るだけです）、ビューを構築し（実際、テンプレートをHTMLコードに変換します）、データを含むモデルを渡します。 結果のメッソは、ユーザーのブラウザーに送信されます。



XenForoがフォーラムで最もクールなメッセージのリストを含むページを表示する必要がある要求を理解するには、まずルーティングルールを作成する必要があります。 [開発]タブに移動し、[ルーティングプレフィックス]リンクをクリックします。 新しいパブリックプレフィックスを作成します。 プレフィックス行には、likes-reviewを指定します。 クラスを使用してリンクを生成するための設定で、クラス名に「Never」を選択し、LikeReviewRus_Route_Prefix_LikesReviewを指定します。 適切なサプリメントを選択することを忘れないでください。



コントロールパネルでのセットアップが完了しました。 次に、コーディングを開始します。 まず、ルーティングプレフィックスを処理するためのクラスを埋めましょう。 Libraryフォルダーに移動し、そこにLikeReviewRusサブディレクトリーを作成します。その中に、プレフィックス内のRouteフォルダーを作成します。 確かに、カシチェフの死は本当に起こりました。 LikesReview.phpファイルを作成します。その内容は次のとおりです。

 <?php class LikeReviewRus_Route_Prefix_LikesReview implements XenForo_Route_Interface { /** * Match a specific route for an already matched prefix. * * @see XenForo_Route_Interface::match() */ public function match($routePath, Zend_Controller_Request_Http $request, XenForo_Router $router) { return $router->getRouteMatch('LikeReviewRus_ControllerPublic_Index', 'index', 'likes-review'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、likes-reviewプレフィックスが見つかった場合（管理パネルで構成した）、LikeReview_ControllerPublic_Indexコントローラーに制御を移し、「インデックス」アクションと、主要なセクションとして「いいね！」レビューを渡す必要があると言います。 Cyrusの2番目の間違い:)



ここで、パス\ライブラリ\ LikeReviewRus \ ControllerPublicを作成し、そこに移動してIndex.phpファイルを作成します。 その内容：

 <?php class LikeReviewRus_ControllerPublic_Index extends XenForo_ControllerPublic_Abstract { public function actionIndex() { $maxResults = XenForo_Application::get('options')->LikeReviewRusMaxToDisplay; $likedPosts = $this->_getLikeReviewModel()->getMostLikedPosts($maxResults); $viewParams = array( 'likedPosts' => $likedPosts ); return $this->responseView('LikeReviewRus_ViewPublic_Index', 'likereviewrus_index', $viewParams); } /** * @return LikeReview_Model_LikeReview */ protected function _getLikeReviewModel() { return $this->getModelFromCache('LikeReviewRus_Model_LikeReview'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで何が起こっていますか？ このコントローラーに対して定義されるアクションは1つだけです（インデックス、キャメルケースはメソッド名で使用されます）。 このアクションでは、結果の最大数の設定の内容が抽出されます（作成したことを思い出してください）。 次に、最もクールな投稿のリスト用のデータモデルが作成され、ビューに転送するためのパラメーター（テンプレートのパラメーター、$ viewParams）が作成され、その後、ビューが構築され（likereview_index、responseViewテンプレートがレンダリングされる）、パラメーターが渡されます。 _getLikeReviewModelヘルパーメソッドは、モデルがキャッシュされている場合、共有キャッシュからモデルをプルします。



それでは、データモデルに移りましょう。 パスライブラリ\ LikeReviewRus \ Modelを作成し、そこにログインします。 LikeReviewファイルを作成します。 その内容：

 <?php class LikeReviewRus_Model_LikeReview extends XenForo_Model { /** * Gets the most liked posts in descending order * * @param integer Maximum posts to fetch * * @return array */ public function getMostLikedPosts($limit) { //    -    xf_liked_content, //    $limitedSql = $this->limitQueryResults(" SELECT content_id, COUNT(*) AS likes FROM xf_liked_content WHERE content_type = 'post' GROUP BY content_id ORDER BY likes DESC ", $limit); //       (fetchCol)  ID     $postIds = $this->_getDb()->fetchCol($limitedSql); //            ID  //,            $postResults = $this->_getPostModel()->getPostsByIds($postIds, array ( 'join' => XenForo_Model_Post::FETCH_THREAD | XenForo_Model_Post::FETCH_USER )); //   ,       "" . $posts = array(); foreach ($postResults AS $post) { $posts["$post[likes].$post[post_date]"] = $post; } // krsort($posts); // return $posts; } /** * @return XenForo_Model_Post */ protected function _getPostModel() { //       return $this->getModelFromCache('XenForo_Model_Post'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、www.xenforo.local / likes-reviewにアクセスしてください。 ありがとうの投稿のリストが表示されます。 厚いいアバターフレームに注意してください:)



次に、メインナビゲーションのこのページにブックマークを追加してみましょう。 [開発]タブの[管理]タブに移動し、新しいイベントハンドラーを作成します。 navigation_tabsイベントを処理します。 LikeReviewRus_Tabs_MainTabハンドラークラス名、addTabメソッド名。



また、次のコンテンツを含むlikesreviewrus_linksテンプレートを作成します。

 <ul class="secondaryContent blockLinksList"> <li><a href="{xen:link likes-review}">{xen:phrase LikeReviewRus_Header}</a></li> </ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、メインセクションのサブリンクを作成するためのテンプレートです。 これまでのところ、メインリンクは1つしかありません。



パスライブラリ\ LikeReviewRus \ Tabsを作成し、そこに移動して、そこにMainTab.phpファイルを作成します。 その内容：

 <?php class LikeReviewRus_Tabs_MainTab { public static function addTab(array &$extraTabs, $selected) { $extraTabs['likes-review'] =array( 'title' => new XenForo_Phrase('LikeReviewRus_Header'), //   'href' => XenForo_Link::buildPublicLink('likes-review'), //   'selected' => ($selected == 'likes-review'), //,      'linksTemplate' => 'likesreviewrus_links', //    - ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ナビゲーションの準備ができました。 きれいに表示するには、SEOフォーラムの設定でCNCリンクを有効にする必要があります。 ページが使用するリクエストを確認するには、最後に/ _debug = 1を追加して開きます。 特に、新しいXenForo_Phraseを呼び出すと別の要求が生成されることがわかりますが、これは良くありません。 これを回避するには、LikeReviewRus_Headerというフレーズを開き、チェックボックスをオンにしてグローバルキャッシュに追加します。



以上です。 私はあなたが楽しんだことを願っています:)誤植があれば-教えてください ただし、説明したすべての後、自分で修正するのは難しいことではないと思います。



PSところで、 ロシアのXenForoコミュニティはアドオンの開発を始めました。 特に、最近私たちのフォーラムで、ユーザーが送信した投稿をPepelacが書いた行に接着するためのVBulletinアドオンの類似物が登場しました 。