# 自定义主页以根据用户兴趣显示话题

**URL:** <https://meta.discourse.org/t/customizes-the-homepage-to-show-topics-based-on-user-interests/311283>\
**Category:** Development\
**Created:** [2024 年6 月 9 日 07:28 UTC](https://meta.discourse.org/t/customizes-the-homepage-to-show-topics-based-on-user-interests/311283 "2024-06-09T07:28:35Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

作者： ![kokoloman001](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kokoloman001/32/389438_2.png) [@kokoloman001](https://meta.discourse.org/u/kokoloman001)\
发布日期： [2024 年6 月 9 日 07:28 UTC](https://meta.discourse.org/t/customizes-the-homepage-to-show-topics-based-on-user-interests/311283/1 "2024-06-09T07:28:35Z")

</div>

我想听听你对这个插件的看法。我正在开发一个插件，它将允许访客根据他们的兴趣选择一个新主题显示在主页上。我写下了这个想法并绘制了这张图，但我还没有实际操作过。

plugin.rb

```plaintext
# plugins/custom_homepage/plugin.rb
# frozen_string_literal: true

# name: custom-homepage
# about: Customizes the homepage to show topics based on user interests
# version: 0.1
# authors: MHAT
# url: https://domain.com

enabled_site_setting :custom_homepage_enabled

after_initialize do
  # code to be executed after initialization
end

```

```plaintext
// plugins/custom_homepage/assets/javascripts/discourse/initializers/custom-homepage.js.es6

import { withPluginApi } from 'discourse/lib/plugin-api';

export default {
  name: 'custom-homepage',
  initialize(container) {
    withPluginApi('0.8', api => {
      api.modifyClass('component:topic-list', {
        didInsertElement() {
          this._super(...arguments);

          if (this.currentUser) {
            this.loadUserInterests();
          }
        },

        loadUserInterests() {
          const userId = this.currentUser.id;

          fetch(`/u/${userId}/preferences/interests`)
            .then(response => response.json())
            .then(data => {
              this.set('topics', this.sortTopicsByInterests(this.topics, data.interests));
            });
        },

        sortTopicsByInterests(topics, interests) {
          return topics.sort((a, b) => {
            const aScore = interests.includes(a.category_id) ? 1 : 0;
            const bScore = interests.includes(b.category_id) ? 1 : 0;

            return bScore - aScore;
          });
        }
      });
    });
  }
};

```

```plaintext
# plugins/custom_homepage/config/locales/server.en.yml
en:
  site_settings:
    custom_homepage_enabled: "Enable Custom Homepage"

  user:
    preferences:
      interests: "Interests"

# plugins/custom_homepage/config/discourse_plugin.yml
enabled_site_setting: custom_homepage_enabled

```

设置的 HTML

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/user-preferences/interests">
  <div class="control-group">
    <label class="control-label">{{i18n 'user.preferences.interests'}}</label>
    <div class="controls">
      {{input value=currentUser.custom_fields.interests class="form-control"}}
    </div>
  </div>
</script>

```

```plaintext
# plugins/custom_homepage/plugin.rb

after_initialize do
  User.register_custom_field_type('interests', :string)
  
  add_to_serializer(:current_user, :interests) do
    object.custom_fields['interests']
  end
end

```

感谢您的反馈和改进建议。

我是泰国人。我的英语可能不太好。我在开发 discourse 的同时努力学习。

---

_[View the full topic](https://meta.discourse.org/t/customizes-the-homepage-to-show-topics-based-on-user-interests/311283)._