Verifying the URL to determine if it includes the specific string needed to modify the Jade theme in

Question

Verifying the URL to determine if it includes the specific string needed to modify the Jade theme in

I am currently exploring ways to check if a URL string is present in an express application, in order to initiate a theme change.

At the moment, I have a basic router.get function:

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Home' });
});

My goal is to check the URL for a specific string, such as "Toy", and based on that, somehow trigger jade/pug to display a different graphic.

store.org 
trigger main Graphic

toystore.org
trigger a different graphic

Then, I need to pass this information so that I can adjust the theme in pug/jade. What are your thoughts on this approach?

I was considering using string.match along with regex to search for the desired trigger, but that may not work as I need to modify it to change the theme in pug/jade.

javascript regex express pug

Answer 1

Answer №1

In order to adjust a view based on certain conditions of the request, follow these steps:

Firstly, check the condition in a middleware and add a custom property to the request or response object
Then, utilize this custom property later on

In your app.js, preferably above the routes section:

const evaluateTheme = (req, res, next) => {
    if(req.hostname === "store.org" {
        res.locals.theme = "graphic"
    } else {
        res.locals.theme = "other-graphic"
    }
    next();
};

app.use(evaluateTheme);

Afterwards, simply access the value stored in res.locals.theme when needed.

EDIT: In response to your inquiry about "displaying different graphics", providing a solution without specific details can be challenging.

If you wish to showcase distinct page elements, consider creating two separate pages and selecting which one to display within your controller logic:

const pickIndexBasedOnUrl = (req, res, next) => {
    if(res.locals.theme === 'graphic') {
        res.render('index/graphic');
    } else {
        res.render('index/other-graphic');
    }
};

For minor adjustments, evaluate the theme inside your view file and apply changes using an if condition:

if theme === 'graphic'
    h2.green Description
else 
    h2.red Description

You could even incorporate conditional statements to import varying CSS files.

Answer 2

In order to adjust a view based on certain conditions of the request, follow these steps:

Firstly, check the condition in a middleware and add a custom property to the request or response object
Then, utilize this custom property later on

In your app.js, preferably above the routes section:

const evaluateTheme = (req, res, next) => {
    if(req.hostname === "store.org" {
        res.locals.theme = "graphic"
    } else {
        res.locals.theme = "other-graphic"
    }
    next();
};

app.use(evaluateTheme);

Afterwards, simply access the value stored in res.locals.theme when needed.

EDIT: In response to your inquiry about "displaying different graphics", providing a solution without specific details can be challenging.

If you wish to showcase distinct page elements, consider creating two separate pages and selecting which one to display within your controller logic:

const pickIndexBasedOnUrl = (req, res, next) => {
    if(res.locals.theme === 'graphic') {
        res.render('index/graphic');
    } else {
        res.render('index/other-graphic');
    }
};

For minor adjustments, evaluate the theme inside your view file and apply changes using an if condition:

if theme === 'graphic'
    h2.green Description
else 
    h2.red Description

You could even incorporate conditional statements to import varying CSS files.

Verifying the URL to determine if it includes the specific string needed to modify the Jade theme in

Answer №1

Similar questions

Implementing a UserID field that automatically increments with each new entry

What is the best way to transfer a variable from jQuery to a PHP script?

Having Trouble Parsing JSON Object with JQuery?

Refresh a Particular Section of a Website Without Having to Reload the Entire Page

Guide on importing CDN Vue into a vanilla Typescript file without using Vue CLI?

Is it possible to retrieve a JSON property using a string?

Deactivating checkboxes once the maximum selection has been made through jquery

Sending a multitude of variables using strings, evaluating them through various functions, and incorporating a variety of methods

The de-duplication feature in webpack is not functioning properly when the splitChunks cacheGroups commons option is activated

Assign the ng-repeat item to a variable in the controller's scope

What is the best way to connect a series of checkboxes within a form utilizing Angular?

Creating effective test cases for Angular JS controllers

A helpful guide on displaying validation errors in a form using React JS

Error in AngularJS v1.2.5 when using textarea with placeholder attribute in IE11

Using jQuery in Yii: Detecting when a radio button loses its checked state

While executing a jssor code in SP 2007, IE experiences freezing issues

Improving the Performance of DisplayField Binding in ExtJS 5

The ashx file is triggered with every server control postback in jqgrid

What is preventing the audio from playing in Safari?

Creating a query string using a jQuery array that contains multiple values for a query variable