I've been reading through the documentation, which is great, however I'm still not entirely sure the best way of creating a nested route in NextJS.
In my example I have modules that have nested lessons. Or in other words, my module could be a book and each lesson a chapter.
So, my current thought is to have my pages directory like so:
pages/modules/[mid]/lessons/[lid]
Pretty generic route path, but it feels off to create a dir path like this:
/Pages
--/modules
----[id].js
----/lessons
------[id].js
It seems very very coupled to modules. What happens if I want a different route to lead to lessons or if I make another page that just GETs all lessons regardless of modules. What then?
Would the ex below be a normal/suitable design? Seems a bit messy having all these tucked away places to have lessons appear. I'm sure I'll get a better grip of it soon enough. Just want to make sure I'm not going well off the beaten path.
/Pages
--/modules
----[id].js
----/lessons
------[id].js
--/lessons
----index.js
Thanks!
If you want to nest the entire content of a directory under a route parameter you can name the directory itself between brackets. Then all the content under moduleId directory will receive a module Id.
You can have
/Pages
--[moduleId]
----/lessons
------[id].js
Related
So we want to create a big website with nextjs and strapi.
We sometimes have deep nested pages like
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
How is this possible?
I have tried to setup dynamic routing in nextjs which is working fine, but I have a problem.
If I want dynamic routes which are all nested I need to do something like this:
I know it's ugly, I'm sorry.
so now when I go to
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
I just get the latest word from the URL and take that and put that into my API to get the right data which is working fine! I configured strapi so it finds by slug and not by id. So my API URL looks like this: www.myStrapiInstalation/api/pages/parttime-bijbelschool
but when I go to
www.ourwebsite.com/onderwijs/parttime-bijbelscholen
It's also working! but that's not good! Because it needed to give me a 404 page because it doesn't exist but now it just takes the latest word and gets the data from strapi. My API URL is still this of course: www.myStrapiInstalation/api/pages/parttime-bijbelschool
So what do I need to do?
Is it just not possible to make everything hardcoded and do I need to make nested folders with real names like: 'onderwijs', 'activiteiten' etc.
Or can I make everything dynamic so that people can make nested routes in nested routes in strapi?
I feel like this is a very stupid question, but I'm really stuck here.
Next JS allows catch-all routes, which is useful for nesting pages and have this format:
pages/post/[...slug].js
In your example, the pages folder structure would be:
pages/secondNest/[...page].js
However, since you're using Strapi to fetch the content, the routes of these pages should be known in advance so that if the user navigates to an invalid page, the result should be 404.
You can set the valid routes in Next with getStaticPaths. But notice that you will also need to set up a custom controller in your Strapi application to return the content tree of your website the way that getStaticPaths expects.
That way, it's ok to use the last part of the URL to get the content.
One disavantage of using catch-all routes, though, is that you must know the base of each URL. For example, if you have the following URLs
www.example.com/onderwijs/bijbelscholen/parttime-bijbelscholen
www.example.com/activiteiten/bijbelscholen/parttime-bijbelscholen
the folder structure in pages would be:
pages/onderwijs/[...page].js
pages/activiteiten/[...page].js
The key factor here is that the paths following the base of the URL should be set statically with the help of a custom controller that returns the tree of the content.
I tried to make my title as direct as humanly possible.
I wrote some code, saved it in a file. I want the name of that file, and the disk path to it, at the moment it runs. This is for a website, and I have access to HttpContext.
I wrote some code in a Razor file. I put that file on my IIS website, and it got executed by some convoluted hierarchy steps with partials and the like. I want to write some code that spits out the path to that file.
I don't want to hard-code the filename and its current path in my code. I want to copy the magic piece of code I'm asking for here onto lots of other Razor pages, so each time I can spit out a comment in some script or style tag somewhere so that other developers can track down my mistakes amazing work.
I don't want to know how the end-user's browser got to my file. I'd use Server.MapPath or Request.ServerVariables["SCRIPT_NAME"] if I wanted that.
I don't want to know merely what directory my website app is running in. I'd use HttpContext.Current.Request.PhysicalPath for that.
Does anybody know how to do this?
I'm looking for some advice for adding d3.js charts to Wordpress.
My client has commissioned a forceSimulation - still in progress. It is currently organised as follows:
index.html
main_javascript.js
main_css.css
global_properties.js
data_file.csv
I'm totally clueless as to whether it is possible to add the chart to her Wordpress blog and if so how to do it.... Any advice would be much appreciated.
Many thanks.
For reference, here are the WordPress docs on Using JavaScript.
Making it easy for them
From past experience (though not in WordPress), I'd try to simplify the steps your client has to take to get the visualisation working well, just in case the person doing them has little technical skill.
Hence, as far as possible, I'd combine your files into one force-viz.js:
CSS rules can be inlined by using d3.style in JS on the appropriate elements.
CSV can be inlined as a JavaScript string, parsed with d3.csvParse.
global_properties.js can just be in the same JS file.
index.html is unnecessary if you use d3.select(...).append(...) to construct the DOM tree you want, and instruct your client to write—
<div id="force-viz"></div>
—where they want the chart to appear, then d3.select that in your script.
This would mean all your client has to do is:
Place force-viz.js in a scripts/ directory.
Paste—
<div id="force-viz"></div>
<script src="scripts/force-viz.js"></script>
—into the text of any page, wherever they want the chart to appear.
Making it easy for you
If being forced to program into a single file is annoying, I recommend Browserify. It's a tool that can process a set of JavaScript files with require('whatever.js')-calls to each other, combining them appropriately into one file. With a plugin, it can even turn fs.readSync('data.csv') calls into strings containing that file's contents, which you could use with that CSV file.
That way, you could continue programming the thing as separate files, then run browserify to bundle them up for your client.
Or just do it manually, if this is a one-off project. Your call.
I'm trying to modify the skin of the register.html.twig template found in FOSUserBundle/Resources/views/Registration/register.html.twig.
I've basically followed the instructions in the documentation down to a T.
Like it told to do so, I created /app/Resources/views/FOSUserBundle/views/Registration/register.html.twig.
Cleared the cache (and browser cache just to be sure)
NO effect! I've put a blank file in register.html.twig, but no matter what I put there, when I go to /register/, I still see the default template.
Yep, these things happen all the time.
It should be:
/app/Resources/FOSUserBundle/views/Registration/register.html.twig
Reference
I'm pretty sure I've read somewhere that you can actually move the main plugin *.php file to somewhere else (I assume under your theme directory) to have it safe in case you made changes to it and your plugin updates. I tried Google but I can't find anything. Google page with good results will suffice.
I've just experienced a situation where my 2 plugins which had its layout changed and accommodated my needs and I want to make sure it doesn't happen again. Apart from having the main file in another location, is there a way to move along any CSS and JS files as well?
In Concrete5 CMS there is a nice way of doing this, by creating a new folder inside a block of an addon (may be regarded as a WP plugin), inside of which you can create copies of main file, any CSS and JS files and then you can simply edit them and choose that template for a page location you are using that block in.
I assume there is no such thing in Wordpress but how close can I get?
UPDATE: I found where I applied that advice on creating a new instance of the file then moving it to the theme directory.
The plugin in question was HL-Twitter. These are the plugin files:
admin.php
archive.php
functions.php
hl_twitter.php
hl_twitter_archive.php
hl_twitter_widget.php
import.php
widget.php
Now, this is the top contents (commented out) of the hl_twitter_widget.php:
Widget Theme for HL Twitter
To change this theme, copy hl_twitter_widget.php
to your current theme folder, do not edit this
file directly.
Available Properties:
$before_widget
$after_widget
$before_title
$after_title
$widget_title
$show_avatars
$show_powered_by
$num_tweets: how many tweets to show
$tweets: array of $tweet
$tweet: object representing a tweet
$tweet->twitter_tweet_id
$tweet->tweet
$tweet->lat
$tweet->lon
$tweet->created
$tweet->reply_tweet_id
$tweet->reply_screen_name
$tweet->source
$tweet->screen_name
$tweet->name
$tweet->avatar
$user: represents the Twitter user (ONLY SET IF SHOWING A SINGLE USERS TWEETS!)
$user->twitter_user_id
$user->screen_name
$user->name
$user->num_friends
$user->num_followers
$user->num_tweets
$user->registered
$user->url
$user->description
$user->location
$user->avatar
So I was wrong about copying the main file (in this case hl_twitter.php), but still - this enabled me to edit the file outside the plugin directory and the system somehow checks for its existence and picks it up if exists.
If this behavior something that is natively supported by Wordpress or it has been integrated in the plugin itself?
With themes, Wordpress has a concept of "child themes" which allows exactly that: to keep changes separate from main theme, in case it changes.
I haven't yet found a way to do this with plugins.
I'm using a few tactics myself:
I bump plugin version to a very high number like 99.9. This way Wordpress won't ever update the plugin.
Store my plugins in version control (i use git, but it doesnt matter), this allows you to update the plugin, run the 'diff' tool and see what changes happend. If you don't like you just revert like it would be a bad code you've written. But this approach requires a bit of skill.
Are you talking about running parts of a modified 3rd party plugin, and an updated version, at the same time?
That's not going to be possible. There is no magical method of "preserve my changes and transfer them into the new version automatically". The way to go here is doing a diff between the edited version and the update, and integrating the changes in the actual source files.
The bottom line is, if you manually edit a third party plugin, you're in for manual review (and possibly rework) once an update takes place. That's why it's usually not a good idea to extensively modify third party plugins.
Well in fact, yes! There is some kind of way.
You have to remove the to be modificated plugin's original actions/filters and then add your altereted actions/filters.
If the desired plugin is even coded in OOP you can just inherit the whole class and rewrite the wanted functions (oh sorry: "methods". we're talking about OOP ;) ). Instantiate your inherited class and rest as above.
Maybe there are better ways! I already search for a method so that the original class won't even get loaded but our altered one instead but I'm no John Carmack.