Can't get site-theme.js to display in site settings

  • I'm new to Pagekit and have started to follow the documentation on creating a new theme and adding theme options into the site settings.

    I've used the sample code from the docs for the .vue file:

    And when I run webpack, I get this:


    Which then doesn't display. Please help!

  • Okay thanks, I'll get a share link to my repo. Interestingly that link you sent me for theme-adrett - I can't see any custom settings in that theme. And I've now installed Pagekit in two different places to check. The output of their site theme looks the same as mine:


    and different to the packaged "theme-one":

    1. !function(o){function t(a){if(e[a])return e[a].exports;var n=e[a]={exports:{},id:a,loaded:!1};return o[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var e={};return t.m=o,t.c=e,t.p="",t(0)}([function(o,t,e){var a,n;a=e(2),n=e(5),o.exports=a||{},o.exports.__esModule&&(o.exports=o.exports["default"]),n&&(("function"==typeof o.exports?o.exports.options||(o.exports.options={}):o.exports).template=n)},,function(o,t){"use strict";o.exports={section:{label:"Theme",icon:"pk-icon-large-brush",priority:15},data:function(){return _.extend({config:{}},window.$theme)},events:{save:function(){this.$"admin/system/settings/config",{,config:this.config})["catch"](function(o){this.$notify(,"danger")})}}},window.Site.components["site-theme"]=o.exports},,,function(o,t){o.exports=" <div class=\"uk-margin uk-flex uk-flex-space-between uk-flex-wrap\" data-uk-margin> <div data-uk-margin> <h2 class=uk-margin-remove>{{ 'Theme' | trans }}</h2> </div> <div data-uk-margin> <button class=\"uk-button uk-button-primary\" type=submit>{{ 'Save' | trans }}</button> </div> </div> <div class=\"uk-form uk-form-horizontal\"> <div class=uk-form-row> <label class=uk-form-label>{{ 'Logo Contrast' | trans }}</label> <div class=\"uk-form-controls uk-form-width-large\"> <input-image :source.sync=config.logo_contrast></input-image> <p class=uk-form-help-block>{{ 'Select an alternative logo which looks great on images.' | trans }}</p> </div> </div> <div class=uk-form-row> <label class=uk-form-label>{{ 'Logo Off-canvas' | trans }}</label> <div class=\"uk-form-controls uk-form-width-large\"> <input-image :source.sync=config.logo_offcanvas></input-image> <p class=uk-form-help-block>{{ 'Select an optional logo for the off-canvas menu.' | trans }}</p> </div> </div> </div> "}]);

    Theme-one is the only theme I can see custom theme settings for. Very strange...

  • Okay that's interesting. When I downloaded your file above and placed it in the Templates folder it does appear in the settings page:

    BUT, weirdly, when I run webpack in that folder I get the "Theme" tab, but then no content in it??

  • Oh really? So I should develop the themes outside of the Pagekit folders? I haven't used PHPStorm before.

    I just tried running webpack outside of the Pagekit folder, but this didn't seem to work again. I get that blank Theme screen with no options!

  • So I always do the following:

    • /Users/roman/Development/
      • Pagekit-Source
        • Sourcecode, which is included to PHPStorm
      • Pagekit-run
        • Sourcecode again, but here I install the extensions
      • My-Developments
        • De
          • extension-1
          • extension-2
          • extension-3
        • Build

    So I build extensions in /Users/roman/Development/My-Developments/Dev and create an export to /Users/roman/Development/My-Developments/Build .

    The extensions in the build-directory can easily be installed to /Users/roman/Development/Pagekit-run

    I am writing a small blog series on my blog at where I explain all this with small examples (but I am building an extension, not a theme). I think you can take some informations from this blog for your dev environment.

    I stopped building inside my Pagekit-environment as I sometimes do some database migrations and I always want to see whether my updates are working fine or not.

  • Interestingly, when I run webpack and compare the generated "site-theme.js" to your "site-theme.js", my file has extra bits yours doesn't. I've attached them to compare...

    Is this why whenever I run webpack, I can't see the settings?