Evoko theme for Zendesk Guide

This repo contains the Evoko support frontend running on the Zendesk Guide platform .
The theme is based of the default option Zendesk Copenhagen theme which is designed to be responsive and accessible. Check out the Using themes and customizing your Help Center section and developer documentation to learn more .

Project structure

When importing a composition to Zendesk Guide it will chiefly look for the surveil files and folders :

  • templates/ – contains all markup.
  • style.css – contains all CSS.
  • script.js – main script file.
  • assets/ – assets such as scripts or fonts.
  • manifest.json – project metadata and settings.
  • settings/ – files to be used in settings in manifest.json.

other files and folders can be added to the project but will ( to my cognition ) be ignored when importing.

Templates

For markup Zendesk Guide uses Handlebars and each template is stored in the templates/ booklet. All available templates for a Zendesk Guide theme that has all the features enabled are included however not all of them are used in our casing ( like “ Community ” ) .

  • Article page (article_page.hbs)
  • Category page (category_page.hbs)
  • Community post list page (community_post_list_page.hbs)
  • Community post page (community_post_page.hbs)
  • Community topic list page (community_topic_list_page.hbs)
  • Community topic page (community_topic_page.hbs)
  • Contributions page (contributions_page.hbs)
  • Document head (document_head.hbs)
  • Error page (error_page.hbs)
  • Footer (footer.hbs)
  • Header (header.hbs)
  • Home page (home_page.hbs)
  • New community post page (new_community_post_page.hbs)
  • New request page (new_request_page.hbs)
  • Requests page (request_page.hbs)
  • Search results page (search_results.hbs)
  • Section page (section_page.hbs)
  • Subscriptions page (subscriptions_page.hbs)
  • User profile page (user_profile_page.hbs)

additionally you can add up to 10 optional templates for :

  • Article page
  • Category page
  • Section page

You do this by creating files under the folders templates/article_pages/, templates/category_pages/ or templates/section_pages/. Learn more here .

Styles

The styles that Zendesk Guide will read are in the style.css file located in the project root .
For development this undertaking uses the CSS preprocessor Sass with the .scss syntax where we split styles into Sass partials. All the partials are put under the styles/ folder and included in the index.scss which is then compiled to style.css .
styles/_partial.scss 🡆 styles/index.scss 🡆 style.css

Scripts

The chief JavaScript file script.js is located in the visualize etymon and will be added in the text file of every page .
JavaScript that you do not think belong on all pages can be added inline in templates or added as regular *.js files in the assets folder and then be included in the appropriate template ( south ) .

Assets folder

You can add assets as images and files to the assets/ booklet and use them in your CSS and templates, for exercise :

# template
{{asset 'cat-image.jpg'}}

# css
$assets-cat-image-jpg

The assets will be uploaded to Zendesk CDN ( theme.zdassets.com ). You can read more about assets here .

Manifest file

The manifest.json contains theme metadata and allows you to define a group of settings for your composition that can then be changed via the UI in theming center. You can read more about the manifest file here .

Settings folder

If you have a type variable of file, you need to provide a default option file for that variable in the settings/ folder. This file will be used on the settings control panel by nonpayment and users can upload a unlike file if they like. For Example, if you ‘d like to have a variable for the background effigy of a section, the varying in your manifest file would look something like this :

{
   ...
   `` settings '': [{
     `` label '':  

"

Images

"

, `` variables '': [{ `` identifier '':

"

background_image

"

, `` type '':

"

file

"

, `` description '':

"

Background double for x section

"

, `` label '':

"

Background image

"

, }] }] }

And this would look for a file inside the settings/ folder named background_image .

Developing

You can use your front-runner IDE to develop and preview your changes locally in a web browser using the Zendesk Apps Tools ( ZAT ) which is installed as a Ruby muffin. For more details, see Previewing theme changes locally .
To avoid having to enter your Zendesk credentials every time you start your development environment you can create a .zat file in the visualize ancestor which contains your credentials in json format, for exercise like this :

{
   `` subdomain '':  

"

erm

"

, `` username '':

"

john.doe @ evoko.se/token

"

, `` password '':

"

YOUR_API_TOKEN

"

}

once you have ZAT setup make certain Node.js is installed and then use the below commands :

 

#

install dependencies npm install

#

start the exploitation server npm start

Deploying

For deploying changes to production we use the Zendesk GitHub integration, the work flow can be summarized to :

  1. Increment the version in manifest.json (without this Zendesk won’t recognize an update).
  2. Commit your changes and merge your branch to the main branch.
  3. In the Zendesk Guide theming center press Update from GitHub.
  4. Changes should now be live! 🎉

Leave a Reply

Your email address will not be published.