Monday, 22 December 2014

how to customise keystone to fit your website (changing logos and index page)


1, using yo create the project without all useless components:



  Then it will looks like this:





Please ignore the black keystonejs logo because I have changed it.

2, because you just need the admin part and here is it. --- a welcome page with admin part (and one more login page)

If you don't like or you don't need this welcome page you can config your website and link the index page to "http://localhost:3000/keystone/signin". it is not a big issue, so I will not spent time on explaining it.

If you like this welcome page and you want to change it:

a, change the content: ks3/templates/views/index.jade.


b, change logo:
  you can find the logo here: ks3/public/images, just replace it by your logo (please use the same filename otherwise you need change code)

3. logging in page



The signin and signout pages are in keystone package (node_models package). that means you can't change it, because if you change it, npm install will override it.

However there are not much thing to be changed, only the logo.

if you check: ks3/node_modules/keystone/templates/includes/auth-brand.jade it links to '/keystone/images/logo.png. this logo.png file is also in node_models package.

I found a workaround: in your keystone project, create a folder in your public folder:



keystonejs will use your logo at run-time.


Alternatively, you can do this:



The official document didn't mention that but you can see that from their source code.


4. keystonejs project will connect to your local mongodb by default. You can manage it to link to another mongodb instance by add a line of setting in .env file:
MONGO_URI=mongodb://your-server/database-name















No comments:

Post a comment