TemplateEngine Details

Please reference official documentation for detailed usage of pug.

Pug directories

Pug directory in the .build/src.

pug/
├── _inc
│   ├── mixin
│   │   ├── _meta.pug
│   │   └── _shareButton.pug
│   ├── modules
│   │   ├── _analytics.pug
│   │   ├── _footer.pug
│   │   ├── _head.pug
│   │   └── _header.pug
│   ├── settings
│   │   ├── _pathSetting.pug
│   │   ├── _projectNamePath.pug
│   │   └── _siteSetting.pug
│   └── template
│       └── _layout.pug
├── index.pug
└── subpage
    └── index.pug

When development, .html files are not created.
The reason is that it is middleware rendering by URL request unit.

Path setting

Managing the path to asset directory with variables.

pug/settings/_pathSetting.pug

pathSetting object value
pathSetting.image '/assets/images'
pathSetting.svgSprite.keepFill '/assets/svgSprite/keepFill/symbol/sprite_keepFill.svg'
pathSetting.svgSprite.removeFill '/assets/svgSprite/removeFill/symbol/sprite_removeFill.svg'
pathSetting.css '/assets/css'
pathSetting.js '/assets/js'

Site setting

pug/settings/_siteSetting.pug

Enter the site information settings supported by DEKOMORI.
The set values are used as a good feeling for meta tags,OGP,etc….

Example

//- siteSettings. please set.
-
  const siteSetting = {
    siteName: 'exampleSite', //- {string}
    rootUrl: 'https://example.com', //- {string} without last "/"(slash)
    googleAnalyticsID: 'UA-xxxxxx', //- {string} If you have Google Analytics trackingID. Set the ID like "UA-xxxxxx".
    googleOptimizeID: 'GTM-xxxxxx', //- {string} If you have Google Optimize containerID. Set the ID like "GTM-xxxxxx".
    fbAppID: '0123456789', //- {string} If you have Facebook AppID
    twitterUserName: ['example_user_name1', 'example_user_name2', 'example_user_name3'], //- {array} If you have Twitter account. Set your username without "@". In case of "@grimgar_merry", set like "grimgar_merry"
    hashtag: ['DEKOMORI','serve_petite_on_big_dish'] //- {array} If you want to set SNS hashtag. Set your hashtag without "#".
  }

Page summary setting

likes: pug/index.pug, pug/subpage/index.pug

Enter the page summary in block pageSummary for each page.
Specific settings can be made for each page.

Example

//- about this page summary
block pageSummary
  -
    // Please set as you like.
    const pageSummary = {
      id: 'page-index', //- this is like a page number => add class to <body> tag
      title: 'this is index page title',
      description: 'this is index page description',
      pageUrl: '/index.html', //- please set root path.
      ogImageUrl: siteSetting.rootUrl + pathSetting.image + '/siteImage/ogp-image.png', //- if set other image, please set absolute path.
      type: 'article', //- (OGP type: http://ogp.me/) - if the top page, this value is "website"
    }

Additional assets

You want to add more assets each page.
Please enter tags in block additionalAssets.

Example

block additionalAssets
  script(src= pathSetting.js + '/index.bundle.js' defer)
  link(href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet")

Share button mixin

DEKOMORI prepared two types of share buttons.

Support these services.

  • Hatena Bookmark
  • Twitter
  • Facebook
  • LINE

Official share button

Support landscape minimum size official button with counter.

Example use in pug

  li.example__shareButton__official
    +shareButton('hatebu')
  li.example__shareButton__official
    +shareButton('twitter')
  li.example__shareButton__official
    +shareButton('facebook')
  li.example__shareButton__official
    +shareButton('line')

Output

Custom share button

You may need to customize share button.
Please use at your own risk.

Example usage in pug

  ul.example__shareButton
    li.example__shareButton__custom
      +shareButton('hatebu', 'custom')(class='btn btn-hatebu')
        |B!
    li.example__shareButton__custom
      +shareButton('twitter', 'custom')(class='btn btn-twitter')
        |Twiter
    li.example__shareButton__custom
      +shareButton('facebook', 'custom')(class='btn btn-facebook')
        |Facebook
    li.example__shareButton__custom
      +shareButton('line', 'custom')(class='btn btn-line')
        |LINE

If you want to add a class name, follow the example according to the pug notation.

Output html

<ul class="example__shareButton">
  <li class="example__shareButton__custom">
    <a class="btn btn-hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=https://example.com/index.html" onclick="window.open(this.href, 'HATEBUwindow', 'width=520, height=480, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank" rel="noopener noreferrer">B!</a>
  </li>
  <li class="example__shareButton__custom">
    <a class="btn btn-twitter" href="https://twitter.com/share?url=https%3A%2F%2Fexample.com%2Findex.html&related=example_user_name1%2Cexample_user_name2%2Cexample_user_name3&hashtags=DEKOMORI%2Cserve_petite_on_big_dish&text=this%20is%20index%20page%20title%20-%20exampleSite" onclick="window.open(this.href, 'TWwindow', 'width=680, height=480, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank" rel="noopener noreferrer">Twiter</a>
  </li>
  <li class="example__shareButton__custom">
    <a class="btn btn-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Findex.html" onclick="window.open(this.href, 'FBwindow', 'width=680, height=640, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank" rel="noopener noreferrer">Facebook</a>
  </li>
  <li class="example__shareButton__custom">
    <a class="btn btn-line" href="https://timeline.line.me/social-plugin/share?url=https%3A%2F%2Fexample.com%2Findex.html" onclick="window.open(this.href, 'LINEwindow', 'width=700, height=650, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank" rel="noopener noreferrer">LINE</a>
  </li>
</ul>

results matching ""

    No results matching ""