在前端开发中，经常需要在网页的顶部加入 Fork Me on GitHub 图标，以鼓励用户参与开源项目的贡献。而 ember-fork-me 就是一个非常方便的 npm 包，可以帮助我们快速地在 Ember.js 应用程序中添加这样的图标。
安装
首先，我们需要使用 npm 进行安装。在终端中输入以下命令：
$ npm install --save ember-fork-me
使用
首先在应用程序的 template 文件中，加入以下代码：
{{fork-me}}接下来，在应用程序的样式文件中，加入以下代码：
-- -------------------- ---- ------- --------------- - ----------------- -------- ----------- - --- - ------- -- -- ----- ----- - --- - --------- ---- ---- ------ ------ -------- - ---------------------- - ----------------- -------- ------- --- ----- ------- -- -- ----- ----------- - --- - --------- ---- ---- ----- ----- - --- - --------- ---- ---- ----- ------ -------- -
在样式文件的 app.scss 或 app.css 中引入样式：
@import 'your-path-to-ember-fork-me/node_modules/ember-fork-me/styles/ribbon';
然后，在应用程序的 controller 文件中，加入以下代码：
import Ember from 'ember';
import ForkMeMixin from 'ember-fork-me/mixins/fork-me';
export default Ember.Controller.extend(ForkMeMixin, {
forkMeUrl: 'https://github.com/my-project-name',
});forkMeUrl 指定了点击图标跳转的地址。
最后，在 config/environment.js 中添加如下配置：
-- -------------------- ---- -------
--- --- - -
---
---- -
---
------- -
-------- -----
--
--
---
--这样，便完成了在 Ember.js 应用程序中添加 Fork Me on GitHub 的操作了。
示例代码
下面是一个完整的示例代码：
{{!-- app/templates/application.hbs --}}
{{fork-me}}-- -------------------- ---- ------- -- ------------------ -- ------- ---------------------------------------------------------------------- --------------- - ----------------- -------- ----------- - --- - ------- -- -- ----- ----- - --- - --------- ---- ---- ------ ------ -------- - ---------------------- - ----------------- -------- ------- --- ----- ------- -- -- ----- ----------- - --- - --------- ---- ---- ----- ----- - --- - --------- ---- ---- ----- ------ -------- -
// app/controllers/application.js
import Ember from 'ember';
import ForkMeMixin from 'ember-fork-me/mixins/fork-me';
export default Ember.Controller.extend(ForkMeMixin, {
forkMeUrl: 'https://github.com/my-project-name',
});-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
---
---- -
---
------- -
-------- -----
--
--
---
--
------ ----
--这样我们便可以在 Ember.js 应用程序中快速添加 Fork Me on GitHub 图标，让用户更方便地参与到开源项目中来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecae9