Creating MkDocs Template, Part 3

In this video, I close out the video series about creating a templte for a MkDocs website. For more information about the template, check out the video.

Video

Transcript (Unedited)

between the last part and this part of the video series i was not able to figure out how to get the jumbotron to only show for one piece of content that is available so instead i'm going to take a different approach to that particular problem and continue building out the template for the mk docs website or blog that i'm building here we go [Music] all right so we're going to go ahead and jump right back into it all right here we were last from the last part of the series we're working on the jumbotron to get it to show just for the first piece of content instead i'm going to actually change the logic in here that post this jumbotron so i'm gonna leave what's in here here but instead i'm going to actually add an attribute in the page that will check to see if the item is set to be the featured piece of content and if it is set to be the feature piece of content then it will show on the page and what i'm going to do so i'm going to use nav child meta featured so that value does exist it will put the it as the jumbotron and the only thing is i'll just have to make sure that there are not two pages in here that have the feature tag as the jumbotron uh i mean excuse me there are not two pages that have the featured uh meta attribute set and that should be fairly difficult to do just got to make sure you got to remember what's there and remove the other one so i'm going to say feature true it could be yes it could be one whatever value goes there because they're not going to actually display the value we're just putting a value there so that it knows that something needs to be shown there all right and so here we have our one piece of content here now let's go back to the page here and we're going to actually change the title and we're going to say nav child i'm going to nav child title and actually need to put that in braces title and i want to also put in the link to this particular page so we're going to do nav child dot url we're going to pipe that to url which is a special filtering mechanism that is used in the ninja templating engine and then for this one i'm going to actually use the um i'm actually going to make this an if condition here and what i want to do is actually put in the description for this page so we're going to take that out and we're going to check to see if the uh actually don't need two braces we just need one if nav child dot description excuse me now that meta dot description then you're going to display the dab child dot meta dot description and if there is nothing else there then we're going to do what was done down here with the truncating of the nav child content and i need to close this out so do and if with the parentheses there all right now here we have it and it's working correctly so we have the title of our post as well as the description of said post and how we're triggering that is again in the content we have a true flag in the meta here for featured and so with that there anytime that flag is there it will show true so the only thing is you just got to make sure that you don't have it set in that featured meta attribute in multiple places otherwise you will get multiple jumbotrons showing on the home page all right and to check the link so it does point to the red mountain park post and and going down you'll see at the top of the page here we actually have the post show the title of the page showing up twice and that's something i'm gonna have to fix next so if we go back to the this particular section here and here we have the page title and what it's doing is actually the page title is in the body content or the page content of that page and so what's happening is it's pulling the title and saying okay i see the title but then i'm posting it again because it's in the content or the body of the page and that's how we are getting this double page heading so what i need to do is actually to put a condition in here so that this does not happen and what i need to do is to actually so we need a if condition and um so i'm actually going to surround this block here and the reason being i'm going to do it this way is because if the page title is not in the metadata then it's going to show up in the body and what will happen is that actually will show up kind of weird in nature on the page so i want to actually enclose all of that into a single block that if the title is in the page itself and not in the metadata that is not showing all of this and coming out with a weird output like this the long-term fix would be to actually go back and correct the content that is set up this way so that we don't have that problem going forward but right now i'm gonna go ahead and code this fix in as i want to be able to show you all how to do this on your particular setup what we're going to check is if the page dot meta dot title attribute does exist and [Music] we want to do page dot meta dot title and then we also want to show the metadata and i'm putting all of that the h2 and everything else in here inside like this for a on purpose um really this actually should also come think of it should be a h1 not an h2 because it is the page title so now that i've corrected that i'm going to go ahead and get this to correct that and i have saved the page so if we go back and refresh it let's see did i mistype something oh so i have the title here as well as that so what i need to do is also make another condition in here that will uh if the metadata title is present and [Music] i guess that's that yeah what i actually need to do is just remove it here from the page and that should correct that issue that with the title showing twice and as you see it has now what i was talking about earlier is let's put that back temporarily and remove this one and it should now not show the credits and it doesn't as you see it just only shows the title and that's what i want it to do all right so let's remove this and we also need to [Music] change this to posted i like to also have updated on here updated 2020 what's today 20 20 uh 09.06 is the current date and time and if we go back to here so we have the posted date and time and then i also want to include the updated date and time because sometimes you'll write a post but then that posts you something in that post is incorrect or the data in there has changed or something of that nature and if that's the case i want to make those necessary updates so i'm going to do if condition meta dot uh updated so past tense and then i want to do similar to how i have the above element with the posted date so page.meta.updated and then do a closing and if on this the jinjo2 template does have a date time available in here where you can do a filtering of a time pattern i don't do that but if you wanted to you could do that and i'm also going to put updated here so that you clearly know that this is the updated time and i want to put yeah okay so if the updated time updated date rather that's been provided then there it is all right and let's see i think that is sufficient so should be good so here we have the date posted by who yours truly and updated on today at the time of this recording and so here's that full post that you have there all right so let's go back to the home page so we have our featured content up here which is pretty great and we have our list of posts down here um i actually think i want to get rid of this sidebar and probably actually move this to a separate page that way i have a single column website that is capable of well it's already bootstrapped so it can already resize for any type of device that is being used for but i wanted to be able to have a single column website that way it's less to manage because when you have the sidebars over here it's somewhat a little bit more complex but not severely complex bootstrap makes it a little bit easier to deal with that being said i'm going to actually move so we can move this elsewhere block down to the bottom of the page so let's go and grab this content block here or this div and i want to move it within the nav so here's the closing div for the main navigation section or excuse me the main page body and i'm going to take this class off because i don't well i'm going to leave that class there and i want to actually add a horizontal row here class uh call it order border danger i believe is what i'm looking for here with this one and let's see if we get a red line there yes so now that i have that there i can actually go and take these two blocks off the side and just comment that section and i actually need to let's move that down a line and now see there we go comment that section almost not quite okay i guess because i have the commented section in the middle that when i try to hit the shortcut it's not liking it so much so now that we have that out of the way we need to actually come up here and change the div on this container [Music] to take up the full width of the screen and there you have it all right now if i have some additional blocks i can drop these down here at the bottom if i choose which is what i think i'm gonna do i'm actually going to uh spaces out and put a bg we'll go with light on this one just to see how it looks and i'm probably going to do a empty div [Music] between the main and go back to class with a i believe it's a margin if not is padding to get kind of a gap yeah and it's kind of difficult to see let me change that to vg dark so you can see it a little bit better all right so you see there's white space in between the x the footer and then this next block or section of the page another thing about it i don't like that red line there if i have this darker background here and so that will get things through this particular page i mean excuse me this particular section um the next thing that i'm gonna have to do is actually go back through and check the links on the page and the reason being is because i move the content around that's kind of more of a manual process you could write a shell script that would be able to handle that and i may actually end up doing that in this case um but it's a little bit more difficult to do and whatnot and so i want to test out the bootstrap part of this where it may show where it will resize and as you see it's resizing pretty well and let's open this back out all right so for the there was a nav section up here at the top that was commented out earlier i'm actually go ahead and bring it back okay not sure what i did all right so here we go so let's try to bring this back and in case you're wondering i actually use visual studio at uh sometimes and so as you see me typing this some of the shortcuts in visual studio are slightly different than those in visual studio code and so you'll see the screen randomly jump is because i actually hit the wrong shortcut and so it's doing something completely different than what i intended um just know i'm not just messing up things on purpose here all right so next i'm going to disable some of this stuff here for right now and i'm going to actually go ahead and change some of these uh links that are here so go about and do contact on this one and just as a helpful tip if you do not have about or contact pages on your website google will actually penalize you for the lack of those pages because it considers those two pages to be critical for every website again about and contact pages are critical for every website according to google that being said create them even if you don't have a lot of content on them you need to create them and have links to them from pretty much any page on the site because as google crawls the site it will look for those pages and if you're trying to come up in the blogging world those two pages and seo will be a critical factor in what you are able to get in terms of seo rankings as you see i don't have any contact on i mean content on my contact or any content on my about pages i will be fixing that but not in the video all right and if i wanted to add other categories or sections to the site i could do that i'll probably go back and tweak this so that i have pages for each category and have them to be able to be accessed from the navigation bar up here as you see but right now the remaining text will remain there it'll just be commented out and i really want to i don't want to have this justified with the content in between i really want it centered so i'm going to change this to text center and if i come back uh looks like i got the wrong bootstrap [Music] class is it centered i believe it might be center oh okay uh a line item center maybe that's what it all right so yeah justify okay it looks like i'm missing i have somewhere i thought i had it maybe i don't okay let me go look back into other code and see this is one of the main reasons that you want to be able to keep your existing code so text center does exist okay maybe it's just not working for this this is one of the main reasons you want to be able to keep your existing code and be able to reference your existing code because sometimes you may make a mistake like this or you know have some uncertainty like this and it's still justifying which i'm not sure why and it might be because of this flexboxes here and that's fine i will just remove that for now um well worst case scenario you can go to the bootstrap website and reference the information that they have there about the classes and so forth so if you go to documentation text alignment is what i am looking for and text center is the correct thing that i should be using but for reasons that i don't understand um and it might again might be because of this d flex let's see what happens with that if i take that out and take this out and replace it with the text center all right so it's still justifying to the left and if i do margin auto margin x auto i believe this is okay still not doing what i wanted to do that's fine i will actually just undo this for the time being because i do have these other links that i also want to leverage in here so it'll be fine if i put those more links in there but right now with it spaced out you know all the way across the screen like that it's kind of a looks kind of weird that you got those two links so far apart from each other all right and let's see what else can we do so i do want to monetize this site what i will do is i will put another block down here i'm not going to do that on video because of the amount of stuff i had to go through to get to the monetization code but it essentially would be another block that goes down here on the page or even at the bottom of the page here that you can put a ad banner there if you have a blog i do recommend suggesting monetizing your blog and that way you're able to make some money you may not make a lot of money off of it but you are making some money off the content that you are creating however if you're not interested in monetization don't worry about it but it's an easy way to make a little bit of passive income you know even if you're only getting five bucks a month five bucks can probably get you a lunch or a snack or something you know for your efforts and your knowledge sharing and it's also kind of uh in my opinion a good way of using that to your advantage because you're able to the more the more content that you create that is useful to the community whichever community you're in whether you're in technology whether you're in gardening the more content that you create and the more people you bring to your site the more money you get in return because of that and so i just kind of see it as a positive picture for that so in the end i'm going to go ahead and close out this series if you want to check out the sites once i finish everything completely completely like the bulk of the work is done if you want to see final tweaks and so forth that i've done you can go check out this particular blog it'll be a link down in the description below this blog is hosted on my github page or github on my github pages and you can check it out you can also look at the finalized template that source code will also be available in the uh almost encr.github.io repository again the link to that will be down in the description below hopefully you have good success in building your site out and i've given you some insight into how to build a template using mk docs with the ninja templating engine if you have any questions put them down below i do read the comments i do answer the comments if you learned something from this video or interested in more videos like this please give it a thumbs up don't forget to subscribe i drop new videos every week on tuesday and saturday and until next time peace out Music