Modifying the grunt-ngDocs template

Question

How can I modify the look&feel template of the website generated by grunt-ngDocs ?

The final goal is to integrate the generated documentation inside a website.

Per example, we want to display the following tabs for each topic

• Demo (focused on the final user rendering)
• Code (for the developers)

To do that, we need to modify the template used by ngDocs, but how ?

Answer 1

To create different tabs just add another Target to the ngdocs task:

ngdocs: {
  options: {        
    ...
    startPage: '/code' // this is displayed first
    ...        
  },
  demo: {
    src: ['path/to/demo/files'],
    title: 'Demo'
  },
  code: {
    src: ['path/to/code/files'],
    title: 'Code'
  }
}

Now, regarding the custom template.

You can provide your own Template file and CSS file.

You can even create a custom Navigation Template

Answer 2

You may style the template provided with your own css files that you can copy each time you generate the docs.

See https://www.npmjs.com/package/grunt-ngdocs#styles? where you may specify styles in the option object used to intitialize your docs in grunt