[hexo] Offer a way to skip tags plugin totally during editing (#1755)

hillwave.md

title	id	categories	date	tags
hillwave in Ember.js Part 2 - Routes	409	hillwave	2016-01-09 06:50:39 -0800

Create routes, templates, models, JSONAPIAdapter etc.

Create index route

$ ember g route index --pod

This is the content of the outlet in application/template.hbs

Create other routes: login, register, work, proses, prose as well. They are all independent pages. No embed routes so far.

Create model work, prose

$ ember g model work
$ ember g model prose

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr(),
  owner: DS.attr(),
  image: DS.attr(),
  prose: DS.belongsTo('prose')
});

This is work model which belongs to prose. And, a prose could have many works.

Create application adapter

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

We use JSON API format as you will see. So change adapter to JSONAPIAdapter if it's not. ( I guess my Ember-cli at this point is out-dated.)

Dummy data mirage/config.js

...
  this.get('/api/works/:id', function() {
    return {
      data: {
        type: 'work',
        id: 2,
        attributes: {
          title: 'Title X',
          owner: 'Owner X',
          image: '/upload/1/sushi_1_wanghulouzuishu.jpg'
        }
      }
    };
  });

  this.get('/api/proses', function() {
    return {
      data: [{
        type: 'proses',
        id: 1, 
        attributes: {
          title: 'Title 1',
          author: 'author 1',
          content: 'content 1'
        }
      }, {
        type: 'proses',
        id: 2,
        attributes: {
          title: 'Title 2',
          author: 'author 2',
          content: 'content 2'
        }
      }, {
...

Since Ember Data will follow convention to send HTTP request if you simply try to read data from its store like this:

this.store.findAll('work')
this.store.findRecord('prose', params.prose_id)

our Mirage will providing the data currently.

Router.js

Router.map(function() {
  this.route('works');
  this.route('work', {path: 'work/:work_id'}, function(){});
  this.route('proses');
  this.route('prose', {path: 'prose/:prose_id'}, function(){});
  this.route('register');
  this.route('login');
});

and set the model in all the routes,

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('prose', params.prose_id);
  }
});

Template

<div class="container">
  <h1>书法</h1>
  <ul class="row-fluid block-grid-4">
  {{#each model as |w index|}}
    <li>
      <h5>{{w.title}}</h5>
      <p>Owner: {{w.owner}}</p>
      <p>{{#link-to "work" w.id}}<img class="img-responsive img-rounded" src={{w.image}} alt={{w.title}}>{{/link-to}}</p>
    </li>
  {{/each}}
  </ul>
</div>

{% raw %}

<div class="container">
  <h1>书法</h1>
  <ul class="row-fluid block-grid-4">
  {{#each model as |w index|}}
    <li>
      <h5>{{w.title}}</h5>
      <p>Owner: {{w.owner}}</p>
      <p>{{#link-to 'work' w.id}}<img class="img-responsive img-rounded" src={{w.image}} alt={{w.title}}>{{/link-to}}</p>
    </li>
  {{/each}}
  </ul>
</div>

{% endraw %} Bootstrap grid needs to know when to break a new row. So I used non-ordered list with CSS and Media Query by editing styles/app.css

ul.block-grid-4 {
   display: block;
   overflow: hidden;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-4 > li {
   width: 25%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-4 > li:nth-of-type(4n+1) {
   clear: left;
}
/** PHONES **/
@media only screen and (max-width: 768px){
  /* grid-4 */
  ul.block-grid-4 > li {
     width: 100%;
     float: left;
     padding: 0 12px 12px;
     display: block;
     height: auto;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
  }
  ul.block-grid-4 > li:nth-of-type(n+1) {
     clear: left;
  }
}

As a start, I have some routes and some data to display.

npm_ls.output

$ npm ls --depth 0
hexo-site@0.0.0 /opt/www/jusfeel
+-- hexo@3.1.1
+-- hexo-generator-archive@0.1.4
+-- hexo-generator-category@0.1.3
+-- hexo-generator-index@0.2.0
+-- hexo-generator-search@1.0.2
+-- hexo-generator-tag@0.2.0
+-- hexo-migrator-wordpress@0.1.2
+-- hexo-renderer-ejs@0.1.1
+-- hexo-renderer-marked@0.2.10
+-- hexo-renderer-stylus@0.3.1
+-- hexo-server@0.1.3
`-- hexo-tag-bootstrap@0.0.8