Transcripts
1. Intro: Squarespace is an easy to use platform for building beautiful websites, usually targeted towards those with no coding skills. But what if you can have full control over your website? What if you could edit or create your own Squarespace template? Hi, I am Christopher Dodd and I am a top teacher here on Skillshare.com covering topics such as web development and online freelancing. In this class, we are going to learn how to use something called the developer mode in Squarespace. It is a feature in Squarespace that allows us to download our template code and make more precise updates to our website, plus add in features that might not already exist on our template. The result is the same great user experience of building any Squarespace site. It is just now you have full control over the template. In this class, we are going to start with a basic template enable developer mode, and start to build our website using both the admin interface as well as the languages that make up the Squarespace template, including HTML, CSS, JavaScript, and Squarespace's own Jason. T language. By the end of the class, you will understand the structure of the template, as well as the majority of features available to customize through the use of code. As far as I know, there is no course quite like this one. I am excited for you to join me on the inside.
2. Required tools and Knowledge: Before we get started with this class, I wanted to cover some of the required knowledge or tools that you're going to need in order to actually follow the class. Of course, this is more of an intermediate class so it assumes that you have some front- end web developer skills already. I've got a list of a few things here on my computer, including command line, the use of DevTools on Google Chrome, or whatever browser you like to use. You need to know some CSS, and we're going to talk about local and live versions of a website so that's something you need to know as well. Basic Git and of course, JSON. I just wanted to address these things upfront in this lesson. If you know all of these things, don't worry about this lesson, just skip it, but for those of you who a little bit more on the beginner side, I just wanted to cover these off because they will trip you up in the class if you have no idea what these are. First of all, command line, a very essential tool for all programming. For instance, I use iTerm for my terminal application, but on Mac the standard one that comes with every computer is Terminal. Here, you can see it's just a little bit of an app where you can write commands into, like a basic line, change into the code folder, list the code folder, clear. You should know a little bit of the command line, but if you follow the commands exactly as I say in the video, you shouldn't come up with many issues, even if you're new to writing commands in command line. Like I said, the one I'm going to use in this class is iTerm. It's a special one that I have certain features set up on like for instance, I don't have to type cd when I want to change into a directory. If I wanted to do what I did before, I can just type in code, and if there's no command, it'll understand that I'm trying to change directories. On Windows, the program is probably going to be called Command Prompt. I'm pretty sure that is the standard command line tool that comes with Windows. Just to be aware, we're going to be using command line, but we're not going to be heavy on the command line, so you don't have to be an expert in it. The other thing I need you to be familiar with is Chrome DevTools or whatever software you use. The browser I like to use is Google Chrome, but you might like to use Firefox or Safari. The DevTools for me, I can open up by pressing option command "I" on my Mac, and you'll get this panel over here that has Elements and Console. This one here, Console is the one we're going to be looking at in this class as it says here, JS Console. What we're going to be doing is we're going to be doing what's called a console.log, which takes data and basically outputs it into this Console here. What we're going to do is take Objects, put them into this Console, and then we're going to navigate through them. If you've never seen that before, that part of the class might be a little bit unfamiliar to you. But again, this is a skill that you should have as a front-end web developer using the Console. In fact, if you do want a class purely on DevTools, let me know but it should be pretty easy to follow along with nonetheless. CSS, I'm going to write some CSS, but this isn't a CSS class. I don't want you to see some CSS and then be overwhelmed by it. If you don't understand CSS, I highly recommend you learn CSS. I have classes already here on Skillshare that you can take. But if you don't understand it and you're not interested in learning it, obviously, don't worry about it. It's not essential for this class, but as a front-end web developer building Squarespace templates or anything on the front-end, you'll definitely want to know how to use CSS. As I mentioned here, Less will be discussed, but is not a required knowledge. As we'll find out later in this class, we'll be using Less files which you can just interchange with CSS. Less is CSS pre-compiler. You don't necessarily need to know what that is, but just know that when you see.less in the file name, it means you can write a CSS code in it, or you can write a Less code, which is slightly different to CSS. But don't worry if you don't know anything about Less or its counterpart Sass, which I have a class on here on Skillshare as well, you don't need to know any Less in order to get the benefit out of this class. When you see.less, just think.CSS if you're not familiar with Less at all. One other thing that I talk about consistently throughout the class that might confuse you is I talk about the local version of the website. When we download our code and we run a server on our own computer in order to run the code, that is what's called running something locally. Locally just means on your computer. Throughout the class, what we'll be doing is editing code on our own computer and that will change the version or change what comes up on the screen locally so on our own computer. But in order for that to actually go to the website, we're going to have to push those changes, which I'll show you later in the class. I just wanted to mention that briefly because if you hear me say locally, local version, local website, that's what I mean, I mean, the website that we're running on our own computer. It's not going to be the same as the website on Squarespace itself. I also need you to understand basic Git, very basic Git. Git is a version control system. It is the most popular version control system, a very important skill to have as a developer. It's important to know Git for this class because we'll be using it to update the live version. We'll be making local changes and then we'll be pushing it to the live Squarespace site. We'll be doing that through basically just three commands. Actually, I think there's a total of four commands that we're using for Git in the whole class. Not a lot, but again, when you see Git and you haven't had any experience with it before, I don't want you to freak out. We're only using four commands. One to download the Git code to your own computer, and then one to add the code to your Commit, then to commit the code, and then to push the code. It's very basic. Just don't freak out if you're not familiar with Git. Again, plenty of resources online if you want to learn Git. Then the final thing is JSON. JSON is just a simple data structure format. If we go into our browser right now and search for JSON, it went to JSONlint. It stands for JavaScript Object Notation. It's a lightweight format for storing and transporting data. Once you get your head around it, it's very simple. I definitely recommend if you have no idea what JSON is to do some research on it first but basically, you just have these key-value pairs. In this case, the value is actually an array and then inside that array, you've got multiple objects with two different key-value pairs. That's a bit more of a complex one, but here you'll see this example right here is a typical example. You have the key which is the first name and the value which is John. The only skill you really need with JSON in this class is to know how to navigate through a JSON object. For instance, if I wanted to get John from this data structure right here, I would have to find the first item of the array, employees and then grab the first name off of that item in the array. Again, this is not complex stuff, but if you do get caught up on the JSON part of this class, I definitely recommend taking a pause and going researching a little bit about JSON because basically, JSON is at the heart of Squarespace templates. It's not something that's particularly complicated, but at the same time, it's going to trip you up if you have no idea what's going on with the JSON. That's a good recommendation for all of these things. If any of these things you have no idea about, definitely do some research. I would recommend before even getting to that point in the class. I just wanted to cover this required knowledge because there are some questions that come up in the classes sometimes. Getting stuck on small things that I haven't really considered for a beginner user, this is more of an intermediate class so keep that in mind. These are some of the things, on top of what we're going to learn in today's class, that you'll need to have some familiarity with. I just wanted to put this video in here. Obviously, required tools, just like any other of my web development classes, you will need a web browser so for me it's Google Chrome. You might use Firefox or Safari and then a code editor. As you can see here, I like to use Atom when I'm working with just single files. That's A-T-O-M. When I'm working with full projects, I like to use VS Code now, which is short for Visual Studio Code. Obviously, you're going to need a command line program, but that comes standard with any computer. We're going to install some other software in the class, so you don't need to necessarily have that yet. We'll get through what packages you need to install in this class as we go along. But that's it, guys. I just wanted to make sure you're aware of these things which you really need to know. Make sure you have a code editor and a web browser as always. That's all. I will see you in the next video.
3. What is a Squarespace Template: Before we start to edit and create our Squarespace template, we need to be clear on what a template actually is. If we enter the squarespace.com website and click on the menu item for templates, we can see a portfolio of the different templates that are available by default in Squarespace. They have this ones which are the most popular and then you also have them organized by category. These are ones that you might want to use if you had a photography portfolio website or maybe you have created a whole website just for your wedding. These templates are probably going to be the ones you want to look at first. But of course, it doesn't matter. You can use whatever template you want in Squarespace. The cool thing about these templates though, is that they work on any Squarespace site. The back-end architecture and all the pages and photos that you've added still should work on all of these templates. It basically is just customizing the layout, presentation, and style of your website. In order to demonstrate this, what I think is best is to show you one of my websites and see what happens when we change the template. As I'm currently logged in, I can go over here and click on "Account Dashboard." Here you'll see my list of websites. This one is the one we're going to be building in this class, this one is another project I have, and the reason why they're sitting up here is because they are trial sites with developer mode turned on and one of the features of developer mode is that the trial never expires. You can have them in developer mode for as long as you want until you're ready to publish, and then you can go on a plan. But right down here is a website that is currently live and I have a plan on. It's my photography and videography portfolio website. If I click "Edit Site," it'll take me to the Squarespace admin for this website. Now, if you're not familiar with this admin, we'll get into the basics in a future lesson, but for this video, what I want to show you is the template. Let's have a quick look at my website. I can either click on the menu items here or go into the pages directory, and you can see here in "Secondary Navigation," I have "Events," and here is a gallery of embedded videos. These are Vimeo links of some of the events I've shot. If we go back here, I have some videos in the fashion niche that I shot, and you can see the layout for all these pages, it's the same. It's just a gallery of videos, and if I go to the "Photos" page, it's just a gallery of different photos. I can upload them here in my admin and they show up on the page based on what template I'm using. Let's go backwards here, let's go "Home," click on "Design," click on "Template," and you can see we're running the jasper template, that's our live template. But what we can do is switch templates at any time and we can also install a template without having to switch straight away. We can actually preview. I'm going to click "Install New Template," and as it says here, installing a template will not affect your live website. What I'm going to do is choose a template that I think will also work well with a website like mine of photography and videography portfolio. Right here I'm going to click "Preview Avenue," and that actually just shows you a larger preview, doesn't actually preview on your store. What we're going to have to do is click "Start With This Design," and it's going to install that template onto our website. Here we have it, we can uninstall it or we can click to preview. I'm going to preview, and now, what you'll see is our website will now be loaded into this template. Now, the issue with my website, I believe, was that I had all the navigation inside a secondary navigation. Because this is using the primary navigation, it's inserted its own nav, but if we go back to "Home, " and then we go back into "Pages," and we scroll past this top navigation here, we can see all the pages that exist in my website at the moment. I can go to that "Events" page we looked at before, and you can see all the same content in there, all the same Vimeo embeds, but instead of presenting it as a grid, what this template has done has presented it as a slide show. Now, we have to click through this slide show and that's how you play a video. Then with the photography page, if I go to my "Photos" page, you can see the photos are also displayed in a slide show. The point I'm making here is all the content is still there and we can still view the content, but the difference is that the look and presentation is different. For all galleries, we've got this slide show instead of what we had before, which was a grid. Obviously there's fonts that are different, there's the title of my website that's positioned differently, but that's all determined as we have just discussed by the template. That's why, because the template is effectively just taking whatever content you have in your website, it's not changing the content or deleting anything, we can switch our template as much as possible, as much as we want and we can easily switch back. Now, I have my old website back. I never actually lost it. I'm going to click "Uninstall" because I'm happy with this theme or with this template. That was demoing a template changed on an actual live site, but what we're going to do for this class is we're going to start with a base template. The way we can do this is by going to base-template.squarespace.com, so it's base dash template dot squarespace dot com, and you can see this base template. Down here, you can click "Create a Site Like This," which I'm going to do, and what that's going to do is create a new developments door or new trials door for you, which you can quickly turn into a development store by enabling the developer mode. We'll get into that in a later video, but I wanted to get this template started because this is going to be the starting point that we'll continue to build on over the class, and it's also the one I suggest you start with as well if you're learning how to build your own template because it has a lot of the basic stuff that you need that you really don't want to code from scratch, but at the same time it's not highly opinionated in the sense that it's not highly stylized and it doesn't have a lot inside, so there's not a lot you have to break down in order to get the result that you want. In the next video, we're going to learn how to use the admin here. We're going to create some content and then after that, we'll dig in how to actually edit the template code.
4. Squarespace Basics: So right now we have our new website running the base template. Before we actually go and edit this template, it's important that we all have an understanding of how Squarespace actually works from the admin, users, respective. Most of the uses of Squarespace, the great majority of them will only edit their website from this admin. So it's important we understand what we're actually doing here. For those of you who are experienced with Squarespace and have managed a Squarespace website for a while or have build your own Squarespace website using this interface. Then perhaps this is a lesson that you can skip over, but for the rest of us, I want to actually show you how you can control the content and design of your website just using the admin. Then we'll move into how to actually edit the template with code. The admin you're looking at right here is the only control you have over your website's back-end and it forms the structure of your website content. Knowing this stuff is very important before you edit any code. The first thing I want to do is head into pages and remove this demo content. So this page, this blog. Now with the demo content removed, we can create our own pages. If we want the page to be not linked in the navigation, we can click here. Or if we want it to show up automatically in the site navigation, we can click this icon here. I'm going to click this icon and we have our options here. In this layout section, we can create a page with a predefined layout. Here in this collection section, we can add what's called a collection in Squarespace. A collection is basically something like a blog, a gallery, a collection of products is basically a list of something. So when we click on it, we should see a listing. Then within a collection you have various items. The perfect example, of course, is a blog, which we'll get to in a sec. A blog, you can click on the blog and you'll see a list of all the blog posts. But then you can also click on the individual blog post and read them. But that is a perfect example of a collection. It's basically a list of content with apparent page and children pages. The other content we can add here is a cover page which as far as I know, is a page that covers the whole of your screen and has one or two links. So you click on the link and then you get taken to a certain page on the rest of the website. The other option here is to open up an external link. What I'm going to do is create an about page. So I'm going to click here for the about layout. We have three different layouts we can choose from. I'm just going to click the banner version. When it opens up this box here, I'm going to call the page About Us. After we name it that, it's going to show up here. You can also see it shows up in our site navigation. Here is where you can edit the content of the website. If I hover over the page content, you can see page contents show up and there's two options, Edit or Settings. If I hit Settings, I get a range of different settings to change here. But if I click Edit, then I have access to this page builder that comes in Squarespace. So here I have a text block. I can edit the placement of the title. If I go down to this image block here, I can either add an image from my desktop or I can click edit and I can click here to search for an image. This is a cool feature of Squarespace is that it automatically searches on splash, which is a website where you can find free stock photos. Let's just say I want to use this. Click add to site. It gets processed and resized. There we have it. I'll click Apply. Maybe I'll write a caption. Girl doing sit-ups. I'm just going to leave the content here 'cause it's irrelevant. Here you can edit the page however you want. You can click on these little icons here and you can add different blocks that are available in the Squarespace page builder. It's important to note here that this is not customizable. These blocks come in Squarespace and as far as I know, we can't add our own blocks here. That's all right, there's plenty of options here. As you'll find out soon with the template, we are actually able to customized quite a bit with code. So not to worry there. If I click save. Now this page is saved. If I go back to the welcome page, you can see, like I said, it's in this site navigation here. Next I want to show you a collection. So we mentioned blog before. If I click on New Blog, I'm just going to call this the Blog. If I go into here for the Blog, I can actually add in a new blog post. It's going to ask me to enter a post title and a description here. I'm just going to copy and paste some content, some very basic content. There we go. I can add tags and categories just like you would in any blogging platform going to put in at home. You just separate them by a comma and it'll automatically separate them. Lock down. I'm going to pick a category of exercise. Cool. So right now this post is in draft mode, but I can hit save and publish. Now you can see that it's in this list here. So if I set it to a draft. I can see all my draft posts here. I can also schedule them or put them in review, but basically here on the blog page or let me just double-check, I'm on the blog page. If I hit the blog page here, you'll see that I get a list of abbreviated blog posts which is only one at the moment. If I actually click onto the blog post, you can see it's the same, but that's because I only have one of them. Let's actually create a second blog post so I can prove what I'm saying here. Let's call this one, again I'm just making up stuff here. Don't take too much notice of the actual contents of these pages. Going to create these categories as Nutrition, hit Save and Publish. Hit Done. Now you can see this is the blog post for top things to eat to stay healthy. If I go back to the blog, you can see we've got both the posts in here, so it's like a listing. This should bring home the idea of a collection. With a collection, you've got a collection of individual post, images, videos, in this case, blog posts. If you go to the collection, you can see the list and then you can click on the individual items. This concept is very important to understand because we can actually edit the code for the list and edit the code for the items using Squarespace developer mode. Finally, I want to show you one option from the final category, which is the other category. I'm just going to add an external link. So you can add a link to something that's not in your website. I'm going to just put in and links to say, find us on Google. If I go in here, local gym, and let's make that open up in a new window. I'm going to hit save on that. You'll see that we've got this external link icon. We can rearrange the links in our navigation. We can move the About page to not link section and therefore it doesn't appear in any navigation. But basically we have the three main types here that are available to us right now in our template, which are these basic dynamic pages with the page builder, the collection, say in this case a blog and an external link. Obviously we also got a cover page. But you can play around with that if you want. One thing I forgot to do actually is to go into our design section and update the title of the website. So instead of Your Site Title, I'm going to call it Your Local Gym. The tagline come visit us. It's not really relevant. But now it's going to update wherever we pull in the site title, it's going to pull in your local gym. Cool. So there are more features and we'll get into it as we build out our template here. But this is the core concepts. You basically are just creating pages in this page part here. You can choose to either put that into a navigation or put that into the not link section. We can actually build out some options here. We can create our own collections. We can create static pages as well, which I'll show you how to do. We can actually have what's called folders and indexes, which allow us to nest on navigation. That's all coming up in this class, but these are the basics of Squarespace. There's not really much else to it in terms of the structure. You're just building different pages and collections. Your template will determine how that looks when you actually view it on your website. All right, cool. So in the next video, we're going to actually get started with editing our template and we're going to enable developer mode. So I'll see you in that video.
5. How to edit your Squarespace template: In this lesson, we're finally going to introduce this Squarespace developer mode, and talk about the two ways in which you can update your template. I want you to head to the settings section here and go down to Advanced, and then go to developer a mode. If we click on this toggle right here, will be faced with a warning and then we click continue and suddenly will be enabling our developer mode. If we scroll down to connectivity details, we can see all the details that we need in order to connect to our Squarespace website, and actually edit the template. You've got the username and password which is equal to your Squarespace account, username and password, so no new information there. But here we've got the SFTP host name and port and we've got a Git repository. The SFTP host name, as far as I know, is always going to be dev.squarespace.com. The port I think doesn't really change either and the Git repository address, is this going to be the development address of your store with template.git at the end. This is subject to change, but right now, that's how it works. As you can see here, this is the development address of my store and the Git repository is just setting as a template.git on that. Now, the way we're going to do it in this class and the way I recommend is using Git. The reason why is because you're able to download the code locally and edit it on your own computer. You can do it with SFTP, which we'll see in just a second. But then you're editing individual files and waiting for them to upload. Whereas with Git, you can run a local server, make changes, run it in the local server, and when you're ready, you can push those changes to your Squarespace website. Push is a bit of Git terminology. Not sure if you're familiar with Git, but it's a very important skill to learn if you're doing Web development. So hopefully know all about Git. If not, we'll be covering some basic Git. It's not going to be too hard. But before we get into Git, what I want to show you is SFTP, and this allows us to edit the files directly on the website. SFTP stands for secure file transfer protocol. You may be familiar with FTP if you've edited another website before, I have edited my WordPress website by connecting via FTP, and that enables me to edit the templates directly. It's a similar concept. What we're going to need to do is to install a FTP client. The one I have installed is Cyberduck, but there are other ones you can use, like FileZilla, there's probably a whole heap of them out there. But for this class, what I'm going to use is Cyberduck. If you want to follow along exactly how I'm doing it, you can download Cyberduck as well. It's completely free. Let me just look it up for you now Cyberduck, it should really come up as the first option. There you go. The first one when you search for it on Google, All right. I already have it installed, so what I'm going to do is open up Cyberduck, and let's open up a new browser. I'm going to click "Open connection." Up here we want to change file transfer protocol to secure file transfer protocol or SSH file transfer protocol. For the server, we need to put in the host name. It's dev.squarespace.com and the Port is what is written here, 2030. Then for the username, it says it there already, it's just your Squarespace username, which is going to be an e-mail address most likely and then for the password, I've got saved in my password management, pasted in there. And let's hit, I'm not going to add a key chain and let's hit "Connect." It might come up with a few errors like unknown fingerprint. Not necessarily errors, but more warnings. You can just click allow. Right now it's trying to login. It's successfully logged in. Here you can see that it's logged into my Squarespace server. Now, as you can see here, there's a collection of three different folders here, because I'm running three websites now in developer mode, I have the folders for each of them. Let's have a look at what else it is. It's dahlia-lime-sh9g, which is this first one here. I'm going to double-click to focus in on that. You can see this right here is our template. Now in order to demonstrate editing your template using SFTP, what I'm going to do is make a simple change that's going to add a feature that we're going to use in the class today and that is to allow photos. In order to allow photos, I'm going to open up the collections folder here. What I need to do is create a new file called folders.conf and upload it to this collection right here. If I was to edit an existing file, what I can do is just right-click on the file and edit with whatever is my favorite code editor. I like to use Atom to edit individual files and say for instance, I wanted to make an edit to this, I could make my edit hit "Save" and it will automatically upload to the server right here. Very cool. But because we're creating a new file what I'm going to do is open up Atom again. Let's create this folders.Config. Now I don't expect you to know how to do this, so let's actually look it up and find the instructions on the squarespace documentation. Squarespacefoldres.conf, hopefully that works. If we click on this first link here, you can see here folder configuration to add folders on your site, create a folders.com file in your collections folder. The standard settings for a folder.com file are below. Easy. I'm going to grab this, I'm going to paste this in to our untitled file right now. I don't want it to be called my folder. I'm just going to call it folder and I'm going to hit "Save." You can save this anywhere. I'm just going to save it to my desktop. Of course it needs to be called folders.conf. Hit "Save" on that. Now I'm going to open up a browser window or a Finder window rather, navigate to the desktop where I put that folders.Config file, go over to Cyberduck and drag this in. Now you can see it's uploading. It's giving me a warning about the unknown fingerprint. I'm going to click allow and not a big risk there. Now it's uploaded. In order to see whether that's actually working now, I'm going to go back into my Squarespace site. Actually, you need to refresh the page to make sure that it's pulling the latest changes. Now when I go into pages and click on this plus here, you will see that folder has appeared down the bottom here. By adding this folders.com file to our collections folder, I've actually updated my admin within new option. That's what I meant earlier by what I said about adding features to your template by the use of code. By adding this com file, we're actually adding a new feature to our admin. I can click on "Folder" now. What this allows me to do, this is not going to be a permanent change, but I can nest things. I've got New Folder. Unfortunately, our template does not currently support drop-down menus, but as you can see here, at least in the admin it is nested and we'll see how that works in just a second. But that is a perfect example of adding something to our Squarespace website using SFTP. It's going to happen instantly because this is the actual code, that is running right now on our template. But as cool as this is, I don't actually recommend you using SFTP when you're doing a lot of changes to your website, what I recommend instead is using Git. I am going to close Cyberduck. Let's go back to settings, advanced developer mode. What we're going to do is clone this repository. Now unfortunately this is not going to be a class all about Git. So I'm going to either assume you have knowledge of Git or assume that if you don't understand something that you're seeing here, that you'll look it up and understand what it means because it's assumed knowledge that you know, a little bit of a Git or that you can still follow along even without knowing exactly what all the commands out within Git. But basically, the concept here is we're going to clone this repository into our computer. That means we're just taking the code at this repository and copying it to our computer. I'm going to copy that address. What I'm going to do is open up my terminal application. Open up your favorite command line app. I use iTerm. The default app on a Mac is Terminal, and the app on a Windows computer, I believe is called Command Prompt. But Git should work exactly the same. What I'm going to do is I'm going to go into my code directory. Here you can just run it in your desktop if you want. It's up to you. But for me, I'm going to go into my personal code folder, into current, and actually going to have a look there. I've already got a file called template. So I just need to quickly go into my code folder and rename that. This probably won't affect you, just going to call that template 1, because when you clone, it is going to be cold template as it's written here. All right, so can clear that now. What I'm going to do is run Git clone. Git clone, paste that address in and then hit "Enter." Now it's going to say cloning into template. It is important guys that this isn't going to work unless you have Git installed. So make sure you just go to the website for Git. If you don't have it already and install, it should be pretty straightforward. Anyway, back to the lesson right now it's going to ask us for the username and password, and that is equal to our Squarespace username and password. That's easy. Just use the same process as before. Now it's going to ask for the password. I've got up here, my password management hit "Enter." If access is not denied, it's going to actually download it. What's going to happen is we can actually change into the template directory now. Now what I'm going to do is open up my favorite code editor, which has changed now I use VS code. I'm going to quit the terminal. Open up VS code. You don't have to use the exact same code editors me, that VS code is pretty good. It's opened up a previous project of mine, but what I want to do is click open. Actually it is loading the template because it has the same name as the one I was loading before. But just to be sure you want to click on "Template." Now you have the template code sitting locally on your computer. You can edit this as much as you want but the changes aren't going to go live to your website just yet. I've got the feeling right now that this video is getting a bit long. For the next part where we install Squarespace live server and start running it, I'm going to separate that up into the next video. In the next video, we're going to actually run a local server, which allows us to run a lot of the parts of our Squarespace site locally. It's still going to connect to Squarespace servers to bring in the data. But we can actually run what code we have here on a local server. That's going to be in the next video. I'll see you in that one.
6. Squarespace Live Server: In the last video, we downloaded our Squarespace template to our own computer, and that allows us to open it up in a code editor of our choice and dig into the folders, click on various files and edit them. I am of course, using Visual Studio Code, but you can use whatever coding software or coding editor that you like to use. There is one tip I'll give you is that regardless of which code editor that you're using, you should enable an extension that allows formatting of this code right here, which is JSON-T. We'll learn more about JSON-T later in this class. But if you are using VS Code, the extension that I'm using is called JSON-Template by stormwarning. Without this, the highlighting of the syntax of JSON-T won't be happening. It will still work, but it'll just be harder to work with because you won't have this nice color coding happening. The workflow for editing your template is you're going to make your changes here locally as it's known. Then you're going to have to commit that code and then push it to the actual Squarespace website. At that point, the code that you have here will be the same as the code you have on your Squarespace website. Now if we weren't running a local server and we had to commit and push code using git every time we wanted to see a change on our website that would grow quite tiresome and we might as well just use SFTP, which we saw in the last lesson. What I'm proposing instead is that we use a local server and one is provided to us by Squarespace called Squarespace Live Server. A big disclaimer before we get into Squarespace Live Server, it is not that well-maintained by Squarespace. I'm going to show you an email in a second where I installed Squarespace Live Server. It didn't work and I actually contacted support and they admitted that there is a specific area that I had to re-install that wasn't installed correctly by default. Acknowledge here that there may be issues with running Squarespace Live Server, and that's up to Squarespace whether they want to publish the most correct and up-to-date version on GitHub and on their own website. But what I will say is if you have any issues here with Squarespace Live Server, I would definitely contact Squarespace support first before diving into the comments. Unless it's something specific that I've done that you're wondering about. But otherwise, if Squarespace Live Server changes in the future, which it's likely to do, and it's getting an error that you don't see in this class, then it's probably best for you to go and ask to Squarespace, what's up? Just like what I did. All right, so with that out of the way, we need to make sure that we have something called npm installed. I'm going to open up a browser window and I'm going to type in npm. Npm stands for Node package manager. It's a piece of software that allows us to basically install packages. You don't necessarily need to know all about what a package is, but you need to have npm installed in order to run Squarespace Live Server. I already have npm installed and if you don't, I'm sure it's pretty simple to do. Let's go over to documentation. I'm sure if you go into getting started, not the most user-friendly website, but if we go to Google, install npm, then you can see, get npm is the address you're looking for, all right. You can download Node.js and then npm and you can follow all of these instructions to make sure that npm is installed. I already have npm installed, like I said. Right now what I'm going to do is open up a terminal because I've already got my code editor open. I'm going to open up the terminal within my code editor and this way it's already set to the correct directory. Now I'm going to run the command to install the Squarespace Live Server which is npm install -g@squarespace/server. Now how do I know that this is the right command? Well, I got this from the official Squarespace documentation. This is subject to change. I recommend that if you get lost at this point, head to developers.squarespace and the page at the moment is local-development and as you can see here for installing the dev server, this is the command. We're going to hit that. I already have it installed. But this is what you need to do if you don't have it installed already. We need to accept the developer terms of use. I have already read this document, so I'm going to hit Enter and then hit Yes. It's going to take a little bit of time to install and bundle compatible JRE. You don't need to know what that means. It's just taking some time to install. I just need to be patient and once it's installed, it will hopefully work. There you go. Now the reason why I say it will hopefully work is I ran it earlier and it didn't work and I had to actually contact Squarespace support. I will just show you the email now. If I go into this support email, you'll see that there was an issue and the engineering team had to apply a fix to the local development server code. They just asked me to run the install again with the latest version. The reason why I show you this is, this is subject to change and this is subject to how Squarespace want to maintain the project. If you have any issues, you may need to contact support. I found them quite responsive. They were able to help me out and they obviously fixed the issue pretty quickly. If you get any errors after this, definitely recommend contacting Squarespace support. All right, with that out of the way, we can actually start to run our Squarespace server. The way we do that is we type Squarespace-server. Then we put our site address after that. I currently have it closed. But if I go back to account.squarespace.com, find that website, you can see that that is the website address. I'm going to copy that, put that right after Squarespace server and afterwards you want to use the flag - -auth, and that's going to stop you from getting permission denied errors. All right, so hit that. Now for you, it might ask you for your username and password again, in which case just enter it. But for me, I am already logged in and what it says is that it's listening on port 9,000. What that means is we can go to our browser, open up a new tab or window and run localhost: 9000. It's just localhost: followed by the port number, which is usually 9,000. Now, when you first start up, Squarespace Live Server usually takes a little bit of time to get going. Again, we need to be a little bit patient here. You'll see after a period we are now running our website, but on our own computer, which is pretty cool. If I click on Blog, you'll see we have the blog page and then we can click on the individual blog posts, click on About us page. The external link should work. We've got the website right here on our computer. Now it's important to note here that if you want to make any changes to your admin, you're definitely going to need to push your code. This live server is going to update as soon as we edit any code in this folder right here. As you can see, it's accessing all the files. If we were to change something, it would show up straight away. But if we want to change something on our admin. Right here, for instance where we added the ability to have folders, we are going to have to push that code. All right. We'll see how that works in a later video. But for now, you've got your Squarespace Live Server running and you're able to make changes to the template code that for the most part, will be affected instantly on this local, sorry, on this local version. Again, like I said, if you want it to go to this version that's on the actual Squarespace website, you're going to need to push, which we'll get into later. But if for instance, I wanted to change the place here where the title is to something completely different. We'll get into where everything sits in just a second. But for instance here where the site title is, if I change that to just Site title, hit Save on that, and then refreshed my website over here, you can see it updates instantly. But up here on the actual Squarespace server, you haven't changed anything until you push that code, which means you upload it to Squarespace. All right, so I'm going to change that back to the dynamic field. That's going to be it for this lesson. In the next lesson, we're actually going to talk about the main concepts of template development because we need to understand conceptually how it all works before you can actually dig in there and edit code. I'm looking forward to that one. I will see you in the next video.
7. Template Structure & the JSON Data Layer: In this video, we're going to talk about the template structure, and if we have time, we'll talk about the other concept, that we need to understand for template development, including, Jason daughter, and Jason T. Right now, I've got my website or my template running at localhost:9000 with the command that we saw before, squarespace-server, followed by your website address, then dash, dash auth. In another browser I've got this diagram. What you're seeing here is a conceptual diagram that I've prepared that explains, how the template is all set up. So without further ado, I'm going to jump straight in. So at the very top, you've got your template, which is configured by the template.conf file. So if we go back into our folder here, we can see this file here, template.conf it's a configuration file that sits at the heart of your template. It gives the name to the template, it provides the author, and we can define layouts, navigations, and also the style sheets in order that we want to have them loaded. If we head back to the diagram, you can see that this template.conf file is where you define layouts and navigations. So if I go back to the code, you can see we've got an object here for layouts, and we've got an object or, an array with an object inside for navigations. If I go back here to layouts, you'll see that layouts link directly to regions. So here in layouts, we've got a default layout to find. It's just called default, and the regions that it's using is just one and it's the site.region file. So in a basic website, there's just one site.region file, and that is the layout. Basically, there is a one-to-one relationship between this and the layout. But as you'll see in a later video, we can separate out our region files and create a layout that has multiple region files combined, and that'll make a lot more sense once we get into it in a later video.The other one is this array of navigations. As you can see on our website, we've got this navigation block right here, which we can see in our code as the site navigation with the name inside the code of site nav. We can actually add navigations to our template by adding to this array right here. So we might want to open this up, and throw in another navigation for, I don't know, secondary navigation, maybe. There you go. We're not really going to do that in this class, so I'm going to remove that. But theoretically, we can have as many navigations, as we want I'm not sure if there's a limit to them, but we can definitely have more than one. Same thing with layouts, we can create as many layouts as we want, and we can combine region files to create those layouts. So going back to the diagram for this structure, you can see here that regions make up the layouts, and a block is directly linked to a navigation. So if we go back to our code here, inside this blocks folder, we can see this site-navigation.block. This is what determines the code for our site navigation. So this right here is determining this right here, these navigation items and how they work, is defined right here. The thing that's actually linking the navigation, we'll get into details later in this class. But we can actually link the navigation using the name of the nav as it's set in the template.conf file by using this squarespace navigation tag. So when we use this tag, we bring in that specific block. As I mentioned guys, we're going to see this in practice pretty soon. But just as a high level conceptual overview, we're talking about how the structure all works together to produce the template.The other thing I've written here is that blocks can also be partials as well, and partials are just snippets of reusable code. If you ever find yourself writing the same code, and including it in multiple parts of your template, then you're going to want to use a block, write the code once inside that block, and then just make a reference to that block to bring in that code everywhere you need it. For me personally, I haven't found many situations in which I need to use a partial, so I don't know if there's an example specifically in this class, but I will provide a link to the documentation on how to use it. It's actually quite simple. So as you can see, blocks is leading into regions, because as I showed you before, we have to bring in the block to our region file somehow, and with navigation, it's like this. With partials, it's a different tag. But essentially we're always using the region file or maybe the list or item file, which we'll look at in just a sec, we're using them to bring in these blocks. So blocks by themselves won't appear anywhere, they need to be on a region file, or on a collection item or list file. Moving back to the diagram, you can see regions here link to this cloud, which is squarespace.main-content. The reason why this is a cloud is because it's not a particular file, it is just an attribute on the squarespace object, which we'll see in just a sec that displays the content of the page. So if we go into our site.region file, and I look for squarespace.main-content, which is right here, you can see that this is where the main content of the page will get loaded into. Now a lot of the time that main content as written here, is determined by the contents of a regular squarespace page. Or as it says in the code here, it is the CMS content. So as we saw before when we were using the page builder to construct, say for instance the about page and we added blocks, and used the interface to change this image, all of this right here, is the main content that's coming through. So as you can see, no matter what page we're on, we're still getting all the other code that surrounds it. But the code inside squarespace.main-content is the content of the page that's changing. Again we're going to see this all in practice, very soon but just a high level conceptual understanding, you might have to go back to the diagram as you go throughout this class, and that's cool, but this is the overarching theory behind the template. If you've created a normal Squarespace page, like this, and you've put in page content using the admin, then squarespace.main content will just be that content. But if you've set up what's called a static page, which is a page we write ourselves in the template, then that content will show up in this object, squarespace.main content. If we're looking at a particular collection, what we'll see is either system default content that comes from Squarespace. Or if we've defined the collection code ourselves in our template, then the squarespace.main content will show up the list file. Perfect example, right here, we've got a collection defined, which is the blog. When we're on the blog listing page, this is the code that shows up. If we go to our website and click on this link for the blog, this page right here, is determined by the code in this file. Of course, this code is coming through Squarespace.main content and then it has all the other code around it. Just to make that extra clear guys, I'm going to inspect this in the browser, and show you that we have this container here, content container, in our site region. There you can see, and everything within that, is the code from the blog.list file. Going over here to blog.list, you can see article id. There you go. It's got all the articles in this item loop, which you can see the comment for right there. The next level down is the item. Remember we talked about how a collection is a list of items, and you can have a look at the full list of individual item, while the item file is the code that makes up the individual items page. If we go into our code here and look at blog.item, this will be the code that gets loaded into squarespace.main content, if we are on an individual item. Clicking on five at-home exercises to do, this code right here inside this particular main tag, is going to be whatever code we set up here. That's the template structure right there, it's actually quite simple once you get your head around it. Obviously, right now, this is just conceptual and once you actually start to do this, you're going to solidify this conceptual knowledge. I only created this diagram after going through and doing some template development. It takes some time to actually have this concept cemented in your mind, so don't worry, if this is all a bit vague at the moment, we'll get into every one of these different files in this class today. But the second concept we need to talk about is the JSON DataLayer and JSON-T. At the risk of this lesson going a bit too long, I'm going to talk about JSON-T, which is the templating language of Squarespace templates. Now, on every page in your Squarespace website, there is a JSON DataLayer that exists. JSON is just a simple way of representing a data structure, you don't need to be too scared of what JSON is, if you're not familiar with it already. But on any page in our website, what we can do is add a question mark, and then write format=JSON-pretty, and we will see that page in JSON form. So how JSON works is, there's just a parent object, and then we go in and dig into these child objects. Then inside them we've got different attributes and more nested objects, arrays, all sorts of things. Right here is all the data available to us on that particular page. On every page, what you'll find is that we have a website object, so we can access the site title of our website from any page. We can access things like, the site tagline, we can access different parts of our website settings. We can look at the account that's currently logged in. The data for the individual page is in this collection object. I know that it's kind of confusing, given that this homepage that we're looking at is not actually a collection itself, but every page, the data for that specific page in Squarespace is contained in this collection object. As you can see, the title of this collection object is Welcome, which is our welcome page. You can see whether it has any tags or categories on this page. The region name that we're using, which I believe is the layout, the type label, all sorts of data relating to this specific page. Now, as we will see later, there is also a data that becomes available within the context of a block and that allows us to pull off items of our navigation. But for now, this is the main concept, is that, we have this data layer sitting on every page, no matter what page we go to on our website. Maybe I go to the blog page, you'll see this is how it looks on the front end, but behind every page on your Squarespace website, there is JSON data that relates to that page. A lot of these objects are going to have the same information as they do on any page like your website, that's not going to change. But then the collection object right here is the thing that's going to change, depending on what page you are on. We've got the title, we've got the amount of items within this collection, and as you can see, all the tags that we've added are in this array here and all the categories within the blog are listed here, in this array. What I'm getting at here is that, all the data that you want to dynamically display on your page, comes from this JSON data layer. As you can see here, we actually have the individual items for the blog. The way we actually take the data from this JSON layer, and represent it on the page, is through JSON-T. I'm going to open up a new browser here, load, developers.squarespace.com, head to template docs. As you can see here, under this menu, we have a full set of instructions on the template language. It talks about what JSON-T is and talks about a few little bits of terminology. I think perhaps we have covered a lot in this lesson already. I'm going to break this up into another lesson. Let's talk about JSON-T in more detail in the next video.
8. Overview of JSON-T: In the last video we learned about template structure, and we introduced the JSON data layer. The way we actually bring that JSON data onto the page is through JSON-T. I wanted to separate out this concept into another lesson, because I realized there is a little bit to get through here. There is lots of documentation here on the Squarespace website, but I'll admit even for me it took a little bit of time and practice to get my head fully around this basic language. But after using it in practice and understanding how it works, I've realized that it's quite simple and hopefully this lesson will make that a little bit easier for you to understand as well. JSON-T is a powerful template language designed to be paired with a JSON dataset. That is the key phrase right here, it's designed to be paired with a JSON dataset. Remember in the last video we saw how any page becomes a JSON dataset when you put question mark format equals JSON-pretty. In fact, the data is always there sitting on that page regardless of whether we put that into our browser or not, that's just to view the data in a nice format. But if we go on any page and we, this is a good area to come up against. Sometimes you'll get a 500 internal server error, you just need to restart the server and then it should work again. Frustrating, but it seems to be the only thing that fixes it at this stage. Now it's saying listening on port 9,000 I'm going to refresh it. Now that we have our website back again, what I'm going to do is I'll put the JSON data layer of any page into our JavaScript console using code that's provided here. We can go to view JSON data, and we can throw this anywhere within a particular file and we'll get to console log the object for the current scope into our JavaScript console. We'll see that in just a sec. If we want it to happen on every page, we can put it in our site.region file, but of course that means that the site.region file is going to be the context. It'll only show what's in scope for this site.region. That might not make a lot of sense. But we'll see in just a sec how this works. I'm going to put it right here after the body tag, hit save on that. Let's refresh the page and let's open up our console, and you can see here we've got an object. It's the same object we looked at before when we typed in format equals JSON-Pretty, but now we can actually see the page and we can see the object as well. As you can see here, it's pulling the items from this items array. Here's all the information that it's using, and we're pulling that using JSON-T. I recommend you when you're writing JSON-T, to open up the object perfectly in your console like this, and then you can start to navigate through the object to determine how you're going to actually pull the specific attribute you want off of this object. The main concepts to understand with JSON-T, if we go back to the documentation is that if we have an object in JSON that has baz hello and we write baz, we're going to get hello. If we put the key into our document, we're going to get the value. This is what's called a key value pair in JSON. Let's have a look at our page here and see an example. As you can see here we've got the opening body tag, and inside the ID we're outputting the page ID on the Squarespace object. Let's have a look at how that corresponds to our object right here. If I look at the object, scroll down, you can see that there is a Squarespace object. If I open up that square space object, I can see the page ID. This right here is making reference to this value right here, and if we actually look and inspect our HTML code right now, you can see that's the actual value that's going in the ID field. At a very basic level, we can start at the top of the object, and then we can target any object within this object and then by using the.notation we can go deeper. We can take the Squarespace object and then go into the page ID. Again, you can see here we are taking page classes of the squarespace object. So you squarespace page classes, there you go. We can also use what's called a section tag. What a section tag allows us to do is zoom in on a particular area of our JSON dataset. Here you can see instead of just having website, we have started the tag with a.section, and we also have to have a.end to signify the end of this code block. What this represents here is the object that we're going to be zooming in on. So we've got section website, if we go back to our dataset, remember we saw before the website object here, so here is website. What we're basically doing is we're zooming in on this particular object, and then the 'at' symbol which we haven't seen here, but we saw up here is going to be set to website because we're in that scope. If we want to take a particular attribute of that object, we don't actually have to write website.site title anymore because we're already scoped to a website. Then we can just reference any key within that object without having to write the parent. Just saves us a bit of rewriting. Here you can see inside the website object, we're looking for site title, scroll down, there you can see site title. We can also just remove this section altogether and instead of having section code, we can do like I said before. We can actually just for the specific site title here, we can just put website.site title. That should work just as well, which it does. I'm going to change to that back. That should explain the sections. Let's go back here and look at a repeated section. If we have a key with a value that is an array, then we can basically loop through all the items and scope to that particular item using dot repeated section and then the object name. As I mentioned before, this at symbol references the scoped in object. Let's see that in action right here by going to our navigation block. Because navigation isn't a page in itself, we're going to have to take this code, head over to site navigation, and once it's in this repeated section, right here we're taking the navigation items and we're pulling data of each individual item. If I was to do a console log here, now we're going to see the data for each individual item. Let's refresh over here. As you can see, we've got four menu items, and therefore, we've got four objects that show up. All of these objects should be pretty similar because they're all links. As you can see inside, we've got attributes like, is it the active link, is it a folder, and we've got the collection object, which gives us all the information like this one is actually a folder link. I'm going to go to the second one. Here you can see this is the link to the blog. We've got the title of the link and then most importantly, we've actually got the URL to the blog, and that's what we need in order to create a link. Heading back to here, you can see from within this item, we're scoping into collection and we're taking the full URL and the navigation tittle. Again, we are looping through and putting out all these objects as you can see, and for any given object in this loop, we're going into collection, we're zooming into that context, and we're taking the navigation title and the full URL as you can see right here. Here we're also zooming into another part of the JSON context, we're zooming into external link. If we open up the final object, you can see that instead of a collection object, it has external link. Then we're pulling from that the title and the URL as you can see here, URL and title. It's important to note here as well that the section tagged here allows us to check for the existence of that object. Here you can see this is essentially saying, if there is a collection object, take the full URL and navigation title off it and put it into this HTML structure. If there isn't an external link, take that information and put that into a link much the same. As you can see here, this is a perfect example. It's not actually using the data from new window because new window is just true or false, right here. But it's basically saying if new window is true, then we will open a link in a new tab using target equals underscore blank. Section allows us to zoom into a particular context with the JSON object, but it also allows us to check whether an attribute or an object exists within that scope. As you can see here, this is another example. If active is true, then we're going to put this class on this list element. I understand that this might be a little bit heavy to get your head around at first, but as you move through and actually start to use this, you start to realize that this JSON-T language isn't actually that complex. This is actually 80% to 90% of the whole language. It's just zooming intersections and pulling data of the JSON object like this. If we head back to the documentation, there are some other things to note. If we click on directives, you can see we've got the section, repeated section. We can also create an or which is like an else. We can check for the existence of item. If it exists, we have this, but if not, we'll have this show up. You can also have alternates with which is pretty cool. As you're looping through something, we can add something to the end of each line. Then we can also create our own variables. If we wanted to make life easy for ourselves, we can assign certain attributes into a custom variable and use them. Honestly, I'm not really using this feature much at all because the data is all there. There's is not many options to manipulate variables anyway in JSON-T, but that is also an option right there. We can also add comments, but that isn't particularly important. The main other concepts to understand is this, predicates. These predicates basically, not necessarily objects within your JSON context, but special directives that Squarespace provides in order to check the existence of stuff. A common one and one that we'll see in this class is the folder predicate. That basically tests if the navigation item is a folder. In the situation here, where we have this first link as a folder, we want to treat it differently. Sorry, I need to click on this one right here. We want to treat this one differently to the other links because it is a folder, it's not linking to a page. Predicates allow us to check whether the context we're looking in meets a certain criteria, and we'll see that in just a sec. We've also got this thing called a JSON-T Formatter, and we've already seen it now with taking the object and making it into something that's JSON pretty. If I remove this, I wonder if my browser will still show up the object nicely. If we refresh the page here, you'll see that my browser still recognizes that as JSON and formats it in a nice way. But if we just took the object here and didn't use a format at all, you'll see here that it just doesn't export at all. We're taking the object data and we need to format it into a human readable JSON format for us to see it. That's one example of a formatter. There's not too many examples. I don't think that will go through in this class. But when you see it, maybe you're editing an existing template and you see there's this pipe symbol and then a key word after it. Notice that it's actually taking what's on the left of the pipe and formatting it in some way. For instance, actually, this example probably exists in our code base. If we go into a blog item, you can see here we've got the added on object and we're formatting that in a particular way, right here using this date JSON-T formatter. They are useful. That being said, there's not too many of them. You just head to the documentation to look at the available ones and if you see it in your code right here, there's a pipe and a dash. What does this mean? Just head straight to the documentation and look it up. As a subset of format as you've also got helpers, which are just like formatters, but the main difference you'll see is that each of these helpers is a pipe and a keyword after the at symbol. It's taking a fully featured object and it's basically pulling new information that might not already exist on the object. For instance, we don't have an image necessarily yet, I don't think. Maybe in the about us page. That image is dynamically generated, we won't be able to demonstrate that right now. But essentially, you'll see in a later video we'll use image dash meta and we'll bring the mixture information about an image using this JSON-T helper. You'll see that in a later video. Helpers are also with the pipe and a key word, this is another page to look up if you are trying to figure out what something is when you see this kind of syntax. Last one, system variables. This is stuff that sits on your JSON data layer. We've seen all of it before when we go into our console. What's one of them, Squarespace headers. If we scroll down, we can see there is an object for Squarespace headers, and it holds a bunch of different code that comes from our back end and goes into our head section of our template. If we go into our site dot region file, you can see we're just outputting that object direct to our head section here. A lot of content there. That's not absolutely everything within JSON-T, I'm sure. But that's the main concepts and as I said, it's all here in the documentation. I just thought I would talk about it a little bit as well because it did take me some time to get my head around it. But now that I've used it in practice, I've realized that it's pretty simple and you'll start to understand that there's not much to it in the end. Depending on how much practice you'll give yourself with coding JSON templates, you will start to solidify this knowledge in your head and it will start to be a lot more simpler. I have a feeling that this video is long enough, so we're going to move on and actually finally edit our template. I know there's a lot of theory before we actually got to this point, but now we're going to actually go in there, make changes to our template and show you all the features of the Developer Mode. I'm excited to finally dive in and make some edits. I will see you in the next video.
9. Layouts and Regions: After quite a bit of theory and a little bit of configuration, it's now actually time to start editing our template. Exciting times guys, I'm glad to finally get into it. But of course, the theory is important as well, so don't skip over that. But now we can actually create some edits to our website given that we have that theoretical knowledge. One of the first things, I want to do is update the layout. As you can see here, I'm not really fond of how everything is just sitting to the left of the page. I like things more centered, and also for the homepage which we're going to create in a second, I would like it full width. On many websites, you've probably seen the content of like a blog post or a particular page will sit inside a little bit of a container here, it is not going full width, that makes it a little bit easier to read, but on the homepage, you'll often see full width sections. That's what we're going to create in this video. The first thing we're going to do is head over to our code, make sure we're running our local server. What I'm going to do is head to the styles directory. We're going to talk about how CSS gets compiled more about less, and how it all bundles together in your template later in this class. But for now what I want to do is just hit into "Base.less", and find the style rule for the container. It's right here on the site-container, as you can see, we've got a max-width and no automatic margins. That's the first thing I'm going to change. I'm going to change the max-width to 1,140 because I like that number better, remove the padding and give it a margin-left and right of order. Let's hit save on that. When we refresh the page, you'll see our content is now wider and it sits in the middle, no matter what the screen sizes, as long as it's above 1140. If we go down to here, we can see that below 1140 there's no margins on either side, so that's one other thing we'll need to fix. I'm going to go down here, and within less we can actually go inside the code for site container and put our media query here. Media max-width 1140 pixels. We're going to have the margin-right, 20 pixels and the margin-left 20 pixels. The order of those doesn't matter. Going back to our page here, and if I pull this in, you'll see once it gets to 1140 pixels of the window width, you'll get a fixed 20 pixel margin on each side. There you go. Cool. That is an example of a CSS change we can make to our template here. But what I want to do is actually create an alternative layout. The reason why I want to do that is I'm going to create a homepage that allows full width sections. This image being in the middle, will have it full width and have like text over the top. Before we actually create that layout, what I'm going to do is actually create the page on our Squarespace website. I'm going to go through the address for my Squarespacewebsite/config. Head into pages and here for the welcome page, we can just edit this directly. We can go into here and edit the page content. Right now we've got this three column layout with this random image up the top, I'm going to remove all the content. This is just demo content anyway, and let's actually put in some content that's more relevant to this fake website. We can either click this plus symbol here, I'll click on these tabs because there's no content yet. I'm going to click the plus, and I'm going to insert what's called a poster. A poster is just a background image with text over the top. I'm going to search for an image for a gym. Let's just select this one. I'm going to write a title here, "Your Friendly Neighborhood Gym", and then the subtitle here, "Come say hi". To spruce up this page a little bit more. What I'm going do is insert a little bit of a primary video. This time I'm actually going to click this tab here, and, I'm going to look for video, which is there under basic, and, I'm going to insert a video that I prepared earlier for this fake gym. Originally I called the gym, Backpack Gym. This is my silly little promo video that I created. But as you can see, it's another piece of content that we can add, just like we can add so many different things like a quote, a button, an audio embed, all sorts of things. Slideshow, all sorts of stuff that is available here within Squarespace. For our homepage, I'm just going to leave it at that. I'm going to click "Save". That's now our homepage. So if we go to our local version, and we remove the slag on the end and just go to localhost: 9000. Unfortunately, the content hasn't come through yet, in situations like this, what I like to do is restart the server. This should load the most recent changes from our Squarespace website. Again its going to take a while to load. Let's just let it load and have a look once its finished. As you can see here, we've got your friendly neighborhood gym, Come say hi, and we've got our amazing little promo video here. Just random people working out using stock footage. anyway, so you get the point. We've got the poster and the video right here, but the issue with this is that we want it to be full width. Now the reason why it isn't full width is because we have the content in this site-container. If I look through the code, a lot of stuff here, but here in this div, we've got sight-container. There's two things we're going to have to do here. We're going to have to move this div into each of the header, the main section, and the footer; because we still want the header and the footer to be in the container. But we want the contents of just the homepage and any other pages that we set to this specific layout to be full width. The first change is that we're going to reposition the div for site-container, and before we do that, what I'm going to do is break up our site.region file into three different parts. The header, the footer, and the middle section, which can remain the name site.region. I'll show you how we can do this right now. I'm going to take everything above this CMS content injection point. Copy that into my clipboard, create a new region file called header.region. Paste that in there, and then let's take out everything after this main tag, which represents our footer. Make sure that's saved to the clipboard, and then, footer.region. Sweet. The nesting is good there and inside.region, we just want to clean up the nesting and little bit here. We need to update our layout now to tell Squarespace that we want to load in order the header, the site, and the footer. In our template.com file, what we're going to do is add header and footer to our array of region files here. Basically, what we've done, this is going to produce the exact same result, but this is going to split up our region file into three different sections, because we may want this middle section to be different on other pages, but we want the footer and the header to stay the same. It also makes it a little bit easier to edit. If I want to edit something in my header, I know that I have to go to header.region and if I want to edit something in my footer, I can go to footer.region so a few benefits to doing this. Let's go back to our website and refresh and prove that there isn't any issues. There you go. We've still got the header, the footer, which is just this text and we've got the content in the middle, so it's still working. But now what we can do, is we can create another layout in our template.conf. I'm going to copy this object and then update some stuff. This one instead of default, I'm going to call full-width and the title that'll show up in the squarespace admin will be full-width. Instead of site in the middle, I'm going to create another region file called full-width.region. Full-width.region is going to have basically the same content as site.region, but the difference is we're not going to use site container inside. I'll show you what that looks like in just a second. Refreshing the page again, there should be no difference until we start to make these edits to the position of the development. But as I showed you before, site container encapsulates the header, the content, and the footer so we're going to need to restructure this. Heading into our header file right here, I'm going to remove this opening tag and then going into the footer.region, I'm going to remove this div tag here. Now, if we refresh the page, everything's going to be full width. There you go. As I mentioned, what we want to do is have this header and footer in the container for the homepage, but the content of the homepage be full width. What we're going to do is add back in the site container, but within the footer and within the header. Right here, we're already inside the footer file so let's start here. I'm going to wrap the contents of the footer in the site container div and then for the header, I'm going to do the same. Moving into the header here, going to add in this div for site container. Hit Save on that, go back here, refresh the page and you'll see that now this middle section is full width, but the header and the footer is still in that container. The problem with this, however, is that every page on our website is now going to be full width, as you can see. We still want the other pages on our website to be inside the container, it's just we want the homepage to be full width. What we need to do is, add the site container to our site.region here. That'll fix that issue. Now, on every page that uses the layout that we defined here of default, it'll use header, side, and footer. In order to get the best of both worlds in the sense that we want the alternative layout to show on our homepage. We want full width, but on the other pages we want just a default layout. We're going to have to push out changes, so that they go on to the squarespace admin and then we can actually select our new layout, inside the squarespace admin. Let's go and have a look at our layouts here. I've realized that we need to actually change the middle section to full width. That way it's going to pull in this region here, which doesn't have the div with the class of site container. The difference between the two layouts, this and this is virtually the same except for this site container div, all right? Any page that uses the layout full width, is going to use these regions, and any page that uses the default layout is going to use these regions. As I've mentioned previously, in order to actually see this alternative layout on admin and select it, we are going to have to push these changes to our Squarespace website. What I'm going to do, is open up a new terminal here. What we're going to have to do first, is use the keyword get ad with a dot, and that'll add all the changes that we've made so far into our commit. Then, I'm going to make a commit, using dash m, I can write a message. The message is going to be, add a full width layout. Now we've committed that to git, we can type git push and it's going to push that change to Squarespace website. There you can see, it's updated and now, we can lowered our Squarespace website. As you can see, it's produced a bit of a funky effect, and that is because we left in that console log in our header dot region. Doing a console log so that you can see adjacent data layer is helpful when you're doing development. But for some reason when you push it to your Squarespace website, it ends up breaking the admin, and so you'll get this weird effect. What I'm going to do is just remove it for now. That way we don't have the funky looking website. I'll have to just add that change again to my commit, make another commit, saying remove console log, and then push that again. Once that's pushed, we can refresh our page over here, and it should all be okay. Now what we should have in our Squarespace admin, is the other layout registered. Let's see if this is the case. By going into our welcome page here and clicking the gear icon. I want you to click on advanced, and here you can see a new option appearing for page layout. I believe if there's no option to change it, it doesn't show up at all. But because we've added full width, we can now change the layout from default to full width, on this page. We're going to hit save, and you'll see that now we've got a full width section. That's because we have this alternative layout defined here called full width, which uses a different region file in the middle between header and footer. That's what gives you the full whip section. While on these other pages that are still using the default layout, they still have the container. To recap, what we've done is we've separated at our region file into three different parts, the header, the middle section, and the footer, and that has allowed us to keep the header and footer are the same for other layouts. We can still use that code, but then for the middle section, we can swap out that site dot region file with something else like this full width dot region file. We also updated a little bit of CSS. Now we're ready to look at the next part of the diagram. If I click over to here is navigation. In the next lesson, we'll look at blocks and how we can update blocks to update our navigation.
10. Navigation and Blocks: In the previous lesson, we created a few new region files, and we did that in order to set up new layouts in our template dot conf file. In this lesson, we're going to talk about navigations and how we can represent on navigations using blocks. If I head to my code and we go to the only block file in blocks, this is the block file for navigation. Let's go back to the diagram and let's talk about how this block is actually brought in to our region. In our template dot conf file, we have our layouts as we saw in the last lesson, but we also have an array of navigations. A lot of the time there's just one navigation, but we can create multiple navigations here. I want to bring your attention to this key value pair right here. This is the name that we're going to reference in our code. As you'll see in the diagram, navigations are set up in your template dot conf file, but the code for those navigations exist in blocks that go into places like regions. Let's see that in effect now. If I go to my header region, which is where the navigation is, we'll see this special tag provided by squarespace. Squarespace colon navigation brings in a navigation that we have defined in our template dot conf. Remember I said to take note of this name right here, siteNav. Here in our navigation ID in this tag is that exact name. We're saying here in this tag that we want to use this particular navigation that we've set up in our template dot conf. The next attribute is template equals. This is where we define the block that's going to hold that site navigation. Here we can see site dash navigation. We don't need to put the dot block at the end, you can see that this maps perfectly to site dash navigation dot block right here. Wherever we put this tag we're registering that navigation that we set up in template dot conf and we're telling it to use the code in this block. Right here, the code that we place inside here will get rendered. The other thing to note about navigation is that it'll give us access to an items' array. Within any navigation block we'll have an array of items. Let's actually just prove that right now. I'm going to move this above our repeated section so we can see what the JSON context is inside this navigation block. If I refresh the page over here, we might actually need to restart the server. I've had this sitting idle for a while, so we just need to restart by running squarespace server, followed by the address, followed by dash dash auth. You should be familiar with that by now. It's listening on port 9,000 let's refresh the page and wait. I don't know if it's going to take as long on your end, but for me it takes like 30 seconds for the whole thing to load, so not a very efficient package at the moment, but hopefully it will improve. After what felt like an eternity is now showing up. If I head to my ''Console'' here we can see this object here. In this object we'll see an array of items and in this array of items, collection objects which have our navigation. Inside our navigation element, if we look at the JSON context within that, we have access to an items' array. If we just output this outside the navigation, then we won't have access to that navigation array. Let's put that back where it was before. Now we're going to have to console logs. Refresh the page over here. As you can see, we've got two objects. The first one, if we look inside, has no items. This is the one that's coming through from site dot region or head dot region rather. But this one is coming from our navigation. Here you can see we've got items. That's important to note. You won't see the items if you look at the JSON context on the region file. But if you go deeper into the navigation, it creates that array of items. That's very important because now we're going to cycle through those items and produce a list element for every one of those items. We explained a little bit about the JSON-T that's going on here in the lesson on JSON-T, so you should have a pretty good understanding of what these are and where they're coming from, from that lesson. But there is one change that we really need to make here, and that's that our template currently doesn't support folders. Remember we added the folders dot conf file right here to our collections folder. That allowed us to create a folder in the admin. But our template does not have the ability to have a drop-down menu when we hover over the folder, which is probably what you would expect from your navigation. First things first, let's build out our folder. I'm going to click on this ''New Folder'' and I want to change it to, let's do a folder full of the different ''Class Types''. I'm going to update the page title, navigation title, and slug. Hit ''Save'' on that. Now what we can do is create pages within this folder, so I'm going to create a page and we'll call it HIIT for High Intensity Training. Now you can see we've created this HIIT page. What I want do before we go any further is click this icon here to open up the folder. Then what I can do is drag this page inside that folder. Now like I said before, we don't actually support drop-down menus when we hover over folders yet in our template. But in here you can clearly see that we're nesting that page within this folder. For this HIIT page, what I'm going to do is put in a title, High Intensity Interval Training, otherwise known as HIIT. There we go. I'm going to change that to a Heading 1. Then down below here, because it doesn't really matter for the purpose of this class, we're going to find a Lorem ipsum generator. This is good for putting in fake paragraph content just to see how it would look. Basically dummy content. Now we have a page for High Intensity Interval Training. What I'm going to do to build out this folder is duplicate this page. I'll go back one second. You can actually click on this gear, scroll down on ''General'', and then click ''Duplicate Page''. Confirm that I want to do that. I'm going to call this one ''Pilates''. Let's put that underneath HIIT and of course we are going to have to change. The URL is all changed to ''Pilates'', so that's good, but we need to change the title here. Pilates. ''Save'' that, and then one more duplicated page. Let's call it CrossFit as the last class. Drag that one from not linked into the photo and then, once we get to that page because it is duplicated, we just need to update this to CrossFit. Hit Save on that. Now, we've got a folder for class types with three different pages describing out various class types. Right now, our navigation up here does not actually recognize and display pages that are within a folder because remember, we added the ability to have folders into this template after we started with it. This template by default doesn't have drop-down menus, but we can easily could that in now using JSON-T. If I go to the code, let's clear out all of this. You can just start from where we need to start from, and we can go into the site-navigation.block file. For every item, what we want to do is we're checking whether it's a collection, we're checking whether it's an external link, but we're not checking if it's a photo. Above the collection link, what I'm going to do is put in a I think they call it predicate in JSON-T, but there's a special predicate which I showed you before, which checks if something is a folder. Then, we'll put the end, we'll bring that in and I'll just show you if we go back into the documentation, we can see all the predicates here, and if I search for folder, you'll see it just tests if a navigation item is a folder because we need to treat a folder menu item differently. Back to our page. If it is a folder menu item, what I want to do is put in a link that right now, it won't go anywhere. Let's just not put a href in, but I want to put in a tag with the navigation title. This is going to be the folder name basically. Then, what I want to put in is an unordered list of all the menu items within that folder. The way to do that is if we actually look at the code, so let's go over to our local version where we have all the console.logs. Let's have a look. In our items array, in the first item inside the collection object, and we can see this is the folder, and if we scroll down, currently, there are no sub menu items, so we just need to refresh the page here. Here we go. We've got the collection, which is got the navigation title for the folder, but then, we've also got items within this item, and that's where we can loop through and pull off the different pages within that folder. I can see I've made a bit of a mistake here and I need to put in collection in front of here because we haven't zoomed into that context like we have done down here. What I'm going to do in here is start another repeated section. So.repeated section items, just like we've done up here, but now we're inside one of these items, and there's an array of nested items. What I'm going to do is the same thing as we've been doing here. If it's a collection, first of all, we want to put in a list element regardless of what kind of link it is. I'll put it in the list element. If there is a collection present, which basically means any page on your Squarespace site apart from an external link, like down here, we will create a sub-list underneath. I'm going to hit Save on that. Let's see what happens when we run this on our local server. You'll see that the code we've written is now coming up in our navigation. We've got this class types. It's a link tag with no href because it doesn't link anywhere, and inside, we've got another unordered list with all the links to the pages within that folder. We've got a bit of an issue here because we've got another collection link here for class types. Unfortunately, even if it is a folder, it comes up as a collection. In order to fix that, all we need to do is take all that code and make sure it's one or the other. If it's a folder, we're going to treat it that way, but if it's not a folder, we treat the collection this way, and that should stop the duplicate menu item. Refreshing the page over here, you can now see that we've got class types listed up here with an unordered list for the different class types within our folder. We can click on them because we've set the URL and you can read up about all the different class types. Now, obviously, we need to make some CSS changes here because this doesn't look that great. What we want to do is go in here and make sure that this is displayed not by default and then, when we hover over class types, it'll show up. That is all CSS stuff right there. I'm going to quickly throw it together now, but the main principle here is that we are able to access the sub-items within this menu item. Let's fix this up a little bit by going into base.less. We're going to be inside our site navigation item. If you've never used less before, it's just like Sass or any other CSS compiler. I have a class here on skill share about Sass if you want to know more about it. But basically, if you've never seen this before, we're able to actually nest. We can target the A tags within site navigation item by throwing the rule set inside this other rule set. Given that I know how to do this, I would write it in here, but for those of you who don't know less or Sass but just know CSS, I'm going to write it outside here. Basically, what we're trying to do is target the site navigation item and the ul inside it if we want to display none. Unless of course, the site navigation item is being hovered over, then, any nested uls should display. Hit Save on that. That now will give us the ability to have them show up on hover. Obviously, the positioning is off now, so I'll quickly fix that. Let's see how that works. You just need to give it a background color. Let's say "White." Now, it's not the best looking menu, but at least we've got our items within our folder show up when we hover over that folder item. It's more of a user experience that we would expect from a template, but this is not a CSS class, so we won't get too caught up on how it looks. But as you can see from this lesson, we're able to update our site navigation here using our knowledge of JSON-T and our knowledge of how to look up JSON data. Sorry, it's right here, in our console tab. Here are all the items, and this is the process you would take regardless of whether it's a block, or a list, or an item, you would look at the JSON data layer, see what you're trying to access, and write JSON-T based on that. Before we move on to the next lesson, what I want to do is transform this folder into what's called an "index." An "index" allows us to access the data from these child pages in a separate page that represents all of the items within this folder. So it's similar to a collection. It is basically a collection of pages rather than posts, images or videos. I'm sure it'll start to make a little bit more sense once we actually start to implement it. If we look over here, we can see it's clearly a folder given this icon and also when we click on it, nothing really happens. If we click on another page and then click on the folder, it's not actually a page. We can't actually view a page for this folder. So the benefit of making an "index" is that this can be a page as well as a collection of different pages in here. I've got to be careful using the word "Collection" because technically in terms of Squarespace terminology, it isn't a collection, but basically an "index" is like a folder that is also a page. We can learn more about indexes by going to the documentation again, and there is a menu item here for "Folders and Indexes." Remember we use the instructions here to enable folders within our Squarespace template. But if we scroll down, we can actually create an index. As it says here an index is a folder with a main page that allows developers to aggregate data from the collections and pages contained within it. To create an index we are going to do what it says here. Add an "index.conf" file to our collections folder. We're going to use these standard settings. We're going to go into collections folder, click "New file", call it an "index.conf" file, paste that in, and I don't want it to be called "My index" just "index" is fine. I don't want it to say add collection. I'm going to say "add page" and we're going to allow it to accept pages, not galleries. Of course, if you wanted to create multiple indexes that were indexes of galleries, then you would leave that in there. If you wanted indexes of blogs, then you could put "blog" in here. But for us we're only nesting pages. We're going to clear that out for now. I'm going to hit "Save" on that, and then the other part is that we need to make an index page template. We do that by creating an "index.list" file, and we add that to our collections folder as well. Let's go into collections. New file, "index.list". To save time here, I'm going to copy and paste some code in, but it's very basic code. I'll explain quickly what this does. Where console logging, what the JSON context is inside this list file. Then what we're doing is looking for the collection object, which remember, holds all the information for this particular page. We're looking for the nested collections within that and making a list of all those collections. As we will see shortly, this JSON-T code matches what we have in our JSON contexts. What I'm going to do is I think we might have to push this to the server. Let me go to the address for the index. Yeah, so it just redirects to "HIIT." What we're going to have to do is push these changes to Squarespace. I'm going to open up this other terminal here where I do my "git" add everything, commit with the message, "Transform folder into index." Then we're going to push that. Now, when we go over to our website in our Squarespace admin, that we can click on here and we get a new option here, which is index. We can't actually transform this folder into an index per se, but what we can do is create an index and then move these into the new index. Going to delete this folder now for class types. As you can see on this new index page, which I should rename straight away to "Class types" and hit "Save" on that. You can now see that this index, which looks a lot like a folder, is a page in itself. Then within this index, we are looping through and outputting all the pages within this index page. We can click on "Pilates" and it'll bring up the "Pilates" page. If we look at the JSON object., if we go up to here, go to the address for class types. We can see in the second object here, we've got a collection object, and inside the collection object, we've got a list of collections or an array of collections. And then within that, we've got the individual pages with the page title and the full URL. This matches up with the code that we've written here. We're inside the object, we head to the collection. Then inside the collection we're going to loop through this collection's object and that's exactly what's going on here. The other thing we need to do before we wrap this up is to head into our site navigation, and because this navigation item is a page in itself, we can now add a URL path to this. I'm going to write "Collection.full URL." Hit "Save" on that. "Refresh" over here. Now, we can actually click on this "Class types" menu item and it will go to the "Class types" page. We were already on it, but let's move to another page. Click back on "Class types" and now we're able to access that index page and all the pages within it. There you have it guys, we've updated our block file for our site navigation, but as we saw in the diagram, blocks can also be partials. I don't have a specific example that comes to mind of a partial that you would use. But if we go into the Squarespace documentation again, we can actually look up partials. Here, under template files we can learn about template partials. Here you can read about how we can create a block file and then use this syntax to bring that block file wherever we want within our Squarespace template, and that code will come through in the place that we place this code. Here you can read up on why we should use partials. It has an example itself here. This particular example wasn't particularly relevant for our purposes. But if you ever do find yourself repeating yourself, often, definitely look into using partials. It'll save yourself time and make your code more organized. That covers pretty much everything we can do with blocks. Like I said, mainly it's used for navigation, but it can also be partials. In the next video, we're go talk more about what's going on down here.
11. Creating an Events Collection: In the previous lessons of this class, we talked about the top of this structure here. We talked about Layouts and Navigation-s that are set up in your template.com file, and those are determined by the code in your regions and blocks. Now we will talk about the main content. Of course, regions determine the overall layout that you are looking at on a particular page. Blocks mainly for determining navigation that will sit probably in a header region like we have in our template. But now it is time to talk about what is displayed inside this Squarespace.main content. Now in most situations I would say this content is just going to be the content that you set up in your Squarespace admin. If I click over to our other window here and we look at the About Us page, for example, the content that we set up in this page content box, using the blocks available within Squarespace is our Squarespace.main content. This is when we are viewing a page. But if we are viewing a collection, the code that comes through in Squarespace.maincontent is determined by a list file. That is not always true because we can have system collections, which we will show you in this lesson. But if we have got a list file set here, then the code in this list file will be what comes through from Squarespace.maincontent. We also have static pages, which we will cover in the next lesson. But in this lesson, I want to talk about collections. Collections are made up of the list page and the individual item pages. Now as I mentioned before, there are a number of system collections that come with Squarespace automatically. What I am going to do is head to the documentation, scroll down and click on collections. Here you can see a section on system collections. As you can read, Squarespace creates and maintains several collection types in the system that you can use in your site without needing any files in your template. Let us test that out right now. Let us allow all of these system collections to come through our template. I am going to copy that object, go into our template.comfile. After navigation, I am going to put system collections. Now we should expect to see once we pushed this to our Squarespace website, the ability to add albums, blogs, events, galleries, and products, without having to write any of that code in our collections folder. Let me just add that commit that with the message of add system collections. Then we are going to push that so that we can see the change on our Squarespace website. Go over to the Squarespace website, now. Refresh the page. If we go into pages and click on this, we can now add galleries, products, blogs, events, albums, and then an index which we created before. In this lesson, what we are gonna do is create an events collection first using system collections, and then we are going to do it custom. The reason why we are going to do a custom, even though system collections might be sufficient, is so that we can learn how to create custom collections if we want to do something custom in the future. So maybe it is not an events collection that we want different to here, but maybe we want to add in something like projects or a portfolio if we wanted to create our own custom collection later then the skills we learned in this lesson will help us to do so. But for this lesson, I am going to use the example of events. Let' s actually create an events collection right now using system collections. Here, we've done, we have just created an events collection and now we can create events. Let's say Saturday Boot Camp, free to the public. All right, I am going to hit save and publish, and as you can see, it looks a lot like a blog post, but it is a little bit different in how it is presented. As you can see here, the date and the time is very prominent, and then you have got this button for back to all events with this nice kind of calendar tag here. It works a lot like a blog. But instead of blog posts, you've got events. All right, so I am going to remove that now. Let's remove all of our system collections and add our own custom implementation of that list. All right, so I am going to go into Visual Studio code. Let's remove system collections. Let's push that change. I'm going to run git, add, git commits, remove system collections, push those changes to our website and let us confirm that events is now gone. After the page is loaded, we can now see that we do not have those collections available to us. Okay, great. Now we are going to code it ourselves. For that, let's go into the Squarespace documentation and scroll down on this page on collections to look at creating custom collections. You can see we need the name of the collection.comf as a file, and we also need one of the following. We need a dot list file or a dot item file, but oftentimes we'll have both. Okay, so here you can see the configuration options. I'm going to copy and paste this. Head over to our code, create a new collection with the title of Events.comf. I'm going to paste that [inaudible] object in. Now let us not leave this like it is because this does not make sense. It is just a copy of a configuration for a blog. We are going to replace blog with events. The ordering, if we have a look back at the available options, chronological, user, order-able or calendar, because we are running events, let us change it to calendar. It will arrange in terms of time for the add text right here. This is basically the directive texts that is going to come through on the admin for adding a new, whatever the item is. In the example for blog, if we go into blog and we hover over here, you can see it says Add Post for us, we want as to say add event. So add event down here for except types. You can see it is currently set to text. Which is one of the three available options. It says here, there is actually more than just three. So if we go back to our calendar or our thence.comf file, we can actually change this text to an event. An event is one of the accept types that we can use. Now there is a few other things I want to do here. Just to make this a lot nicer, it is going to show up with a blog icon by default. So I'm going to change the icon to the calendar icon and that is about it guys. All right, so because we do not have system collections defined in our template.comf file anymore. We are definitely going to have to create a list file here. So Events. List, and in here, we need to put in the presentation of our events. Before we do that, however, I am going to push these two files to our live Squarespace website. So I'm going to git add git commit and say add events collection, then git push. Let's see what changes that makes to our admin. Remember, we removed the system collections so we should not be able to add an events collection right now until we refresh the page showing those changes. Now when we hit this plus, we should see events and it's showing the nice little icon here because we set the icon to calendar in our comfile. If we click this button, we can now create an events page. We can click this icon here to add a new event. Let's add that event again. Saturday Boot Camp. I realized the last one was set to a Monday. So that is not very appropriate, Is it? Free to the public. Let's set it to a Saturday in the future. I'm not going above with lorem ipsum for now, maybe I will just say lorem ipsum. Let's save and publish. Now if we go into that event, we can see that there is an item page that is automatically generated for us. But if we go backwards and click on the list page, you can see that there is no content because it is using L.listfile right here, which is blank. let's start building out this list file. I'm going to switch over to local-host now because what I want to do is run a console log so that we can see the json data layer and figure out which attributes we want to pick off the json data layer and put on our page. Again, I've got this HTTP era, which means I need to restart my server. So I'll go back into my first terminal tab, control C on a Mac to end the currently running process. Then let us run the Squarespace server with the flag of off. We will get listening on port 9,000 again. I will check in with you once this finishes loading. All right, so now we can see our Events Page, which is completely empty because we have a blank events.listfile. Even though that there is an event in our events collection, it will not show up until we write some json T to take the list of events and outputs some of that content on the screen. Like always, what I'm going to do is I'll put the json data layer in this particular json context. Then we can start to navigate the object and figure out the json T that we need to write. Going back to that page after I throw in the script for console log of the json context. You can see now in our console we have a secondary object. I'm going to click on that. Inside the collection object, you will see that we have all the information for the collection, which of course is code events. If we scroll down, we should try and find the list of events, which, as you can see here, split up into two arrays. One array for upcoming events, M1 array for a past events. We have no past events, so that is empty. But we do have one upcoming event. If we look inside, we can see the Saturday Boot Camp right here in adjacent context. All right, so as you can see, we've got a title attribute here, and we've also got a body attribute with a whole bunch of HTML. This body attribute is coming from when we write or edit a particular event. Right here, we can put in some text, but we can also put in blocks of other rich content as well. So all of the HTML that represents that, will come through in this body attribute right here. Let's use those in our file here. So navigating upwards, we're going to have to loop through the upcoming array, and then for each item, we're going to pull the title and the body. Let's do that right now. I'm going to start a repeated section for the array. The array is called upcoming. Make sure to close that block. Then inside, I'm going to create a div with the class of event. Inside each event, I'm going to set up a h2 and the h2 is going to hold the title of each of those items within the upcoming array. It's going to output the body right underneath. I'm not going to wrap that in any HTML because it's already got a lot of HTML that comes with it. Refreshing the page over here. We should start to see our title and body come through. They you go. Saturday Bootcamp, free to the public and the body content there. Now of course, because this is an event, we're going to want to show the actual time and date of this event. Otherwise, people don't know when it is apart from right here, Saturday Bootcamp. What we're going to do is bring in that data next. If I go down to the object again and we navigate to upcoming, go into that particular object, we can scroll down. It even has information like the location, with the longitude and latitude. That's pretty cool. But what we're looking for is the start date and end date. This is just a code of digits that the computer can read, but obviously it's not very human-readable to us. What we're going to do is bring that in and then format it. I'm going to take the start date and put it underneath here, in this em elements. Then I'm going to look for the appropriate formatter. This is our opportunity to use JSON-T Formatters. I'm going to go into the Squarespace documentation, head to the section on JSON-T Formatters, and then down here I'm going to look at the Date and Time Formatters. We want to format a date using this YUI date format. I'm just going to copy the example right here and put that after the start date. Let's hit "Save" on that. Let's refresh over here. There you have it. We have the date of the event, but we might also want to have the time of the event and not just the time of the event, but the start time and end time. For that, we use the same objects as start date and end date, but we just access different parts of that date-time. I'll show you what I mean by that in just a sec. Let's create another em tag that's separated by a break tag. Inside I'm going to put start date again. Instead of that particular date format, I'm going to go over here, click on this link, which is going to take us to the list of all the different codes we can put in to format our date/time. I'm going to scroll down to this right here and copy this code right here, and paste that in here. Then I'm going to grab the end date object. I'll just copy and paste this. Change that to end date with the same format. Let's hit "Save" on that. Let's go back to our page and refresh. There you can see the event is from 3:00-4:00 PM. We don't actually need the seconds there, so I'm going to remove that from the format string. Head back. Now, you can see Saturday Bootcamp, free to the public on Saturday. It's going to start at 3:00 PM and end at 4:00 PM. That's pretty much our list page done, but maybe we want to create a page for each individual event. For that, we need to create a.item file. Before we do that, however, I want to link up all the titles within our listing to head to that individual item on click. Let's do that right now. I'm going to wrap the title in an a tag and the attribute we're looking for, as always, is fullUrl. I'll hit "Save" on that. Refresh over here. Now, you can see that the title is linked to the individual event. If I click on that, you'll see that there is an error. That is because we haven't actually created that page yet. We're going to head back here. Let's actually create events.item. For events.item to keep it simple, I'm going to copy this code right here. What we're going to need to do is figure out which object to zoom in on in order to get all these attributes. This isn't going to work just yet but what I'm going to do is, we're going to, as always, console log the JSON data layer so we can see which object we need to zoom into. I'm going to refresh over here and click on that title again. Now, you can see that we don't have that error anymore. That's because we have our.item file. Down here, you can see we've got a secondary object again, and this is the object that's coming through the events.item file. Let's have a look inside there. You can click on the collection object. But the collection object actually represents the parent collection. Here, in this item object is the actual event itself. That's the object that we want to zoom into with our JSON-T. We just need to wrap all of this in some JSON-T code. We're going to zoom into the item using our section tag. Going to fix the nesting there. Let's refresh the page over here. You'll see that we have the exact same information. Because we're on the page already, we can remove the link here because it's just linking to itself currently. But of course we will keep it on the list over here. Refresh over here. As you can see our individual event page is slightly different, if I just click on this link, to our Events page because the link is missing. But of course it's not particularly obvious the difference between the two because they're both showing the same content. What I'm going to do is add another event and we can see for sure that this page is showing a list of all events. I'm going to go into here, create an event for an upcoming Wednesday, which is going to be a yoga seminar hosted by Mary. The content's going to be, "Mary is going to tell you-all about yoga." Sounds lovely. All right. Hit "Save" and publish on that. If we go over here, it probably won't show up because we'll need to refresh the server. Unfortunately, we going to have to go down here, "Control C", refresh the server, and then we should start to see the latest changes come through on our local version. There you go. It's listening on port 9,000. I'll check in with you once this finishes loading. Once the page finishes loading, you can see that in fact, our Events page is a listing and we have all the events inside our events collection listed here. If I click on one, you'll see that we go to the Item page for that event. It'll only show the information for that item or for that event. If we go back to Saturday Bootcamp, you can see it's doing the same behavior. As you can see, that is an example of a collection. I know it looked better using the system collections. Oftentimes, if you don't want to customize the look from the system collection, you don't have to. But if you wanted to present this in a different way, gain full control over the Listing page and the Item page, then this is how you would do it. You do so by going into your code, going into your collections folder, creating an events.conf file an events.list file and an events.item file. Of course, the events word here is interchangeable with whatever type of collection you're making. But as that's all good, we can remove those console logs now because they might cause problems on our Squarespace website, the live version. Let's actually go in here, git add, git commit and git push so we can push that change to our live Squarespace website. We can put in here "Add events list and item files." We'll git push that. We'll go to our Squarespace website in the admin. As you can see, now we've got the format that we set up in our list and item file. I'm going to move events, past the blog. There you have it. We have our own custom collection. We have full control over how it's presented on the page. Now, it's time to look at the last part of the diagram, which are static pages. I'll see you in that video.
12. Adding a Static Page: In this lesson, we're going to cover off the Squarespace template structure by looking at static pages. Static pages are pretty simple, it's just a hard-coded page, in our Squarespace admin, if we create a normal page right here, let's just leave it as new page. I can click in here and you've got this box up for page content, you've got settings and you've got edit. Now I have access to the page editor and I can add page content blocks. We've a static page, you don't have access to this page content editor. Instead what you have is just a page with no options for customization and all the code that goes in that page will be stored in a dot pagefile. Now off the top of my head, I can't think of many examples in which you would want to use a static page instead of using a normal page because even in the normal page you can insert custom HTML, but maybe there's a situation in which you just want to write the page in code, you don't want to have to use the Squarespace admin to do it or you want to restrict admin users from editing a page, then the static page is going to be the option for you. What I'm going to do in this lesson is create a static page with an embedded calendar and we can see how the static page works, let me go into Visual Studio code or whatever code editor that you're using and here we have to create a new directory called pages, I'm going to do that right now, new Folder pages. Now inside this pages directory, let's create a new file and our static page is going to be the timetable of classes. Make sure to put dot page on the end, and to accompany our page, what we're going to have to do is set up another file with timetable.page.conf. In this com file, it's very simple, we're just going to put in two key value pairs. The first is title, so I'm going to call this Timetable, and the second is going to be a description, I'm going to put a calendar of all our classes, cool. Now the Squarespace admin will know what to call the page and it'll provide a description to Squarespace as well. Here in our Timetable dot page file, I'm going to put in a h1 with collection dot title. Remember for most pages on Squarespace the information for the page is stored in the collection object, after we've made this heading we want this page to come up as an option in our Squarespace admin. For that you know what we have to do, we have to actually push these changes to Squarespace, down here, am going to get add to add those changes to the commit, git commit, add a static page for timetable. Then git push, and after the push is complete, we can go up here to our Squarespace admin, refresh. Once the page has finished reloading, we can look down in our not linked section and we'll see this page here called Timetable, if I click on that, you can see we've just got the name of the page which is Timetable. We know that this is a static page because number one we can see the icon is a dotted box, and also when we click on this static page, it doesn't open up a panel for us to create any edits because it is a completely static page. Let's move this into navigation here, I'm going to put it after events and now what we can do is write whatever code we want inside, there's nothing really fancy going on with the Squarespace admin, we're just going to write a page as we normally would, as an example of what we can put in this page, I'm going to put a calendar embed with this schedule for the classes. This has come right from Google Calendar, if you want to create a Google calendar embed yourself, definitely look that up, if I hit save on that, refresh our page, not on our published website, but locally. I can click on timetable and you can see that we've got the schedule for backpack fitness, which was the original name of the gym coming up here. Obviously if we want this change to go live on our website we just need to push that code every time we make changes, it's not coming from the Squarespace admin so it won't get inserted on our Squarespace website until we push that code live, let's do that right now, git add, git commit with the message of add content to timetable page and then git push. Now if we go back to our live website, we should see the same change, and there you have it. We have the collection title or the title of the page which is in the collection object and we have this calendar embed, no matter where we click on, if we go back to it, anytime we click on that in the admin, there are no options appearing for us to edit it because it is a completely static page we've hard-coded content that comes directly from this dot page file. That's basically it guys, not much to static pages, it's basically whatever you want to put in here you can and there's no special operation, it's not a collection, it's not a page with an editor for you to put in, content blocks in, it's just a very basic, hard-coded page. Not a lot of instances I can think of in which you would want to create a static page but if you were to create something that was very code intensive and didn't require anything from Squarespace is admin, then I think it would make a lot of sense, but for most users, we can insert this embed just as well using a normal page within Squarespace. Going into page content edit and we can insert, I'm sure, our iron HTML code or embed. In this instance, not exactly required in order for us to embed a Google Calendar, but I wanted to show you how to create a static page so you know how to do it and that covers off this diagram right here. As you've seen we can map this visual representation to our folder structure here, blocks, collections, pages, and regions down here. Of course, you've got scripts and styles here as well, and that's what we're going to cover in the next video.
13. Javascript, CSS and LESS: In this lesson, we're going to talk about scripts and styles. To start with, I'm going to close all of my open editors, and then let's go into our styles folder and look at CSS and less to begin with. Now less is a CSS pre-compiler. If I search for less on Google and we look at the website which is lesscss.org. Scroll down and we can see that less is a backwards compatible with language extension for CSS. Now, as it mentions, it's backwards compatible. I don't want you to be scared if you don't know less to write CSS in these files. As you can see here, there is some nesting. There is the use of the ampersand, which is less syntax, but here you can see just as well this code worked which is pure CSS. It is backwards compatible. You can just put in CSS straight into your Less files and it will still run that CSS, but if you know how to leverage less, and I definitely recommend you research how to use less or Sass. Sass is another, basically the same thing stands for Syntactically Awesome Style Sheets, so it's a similar thing to less and in fact, a lot of this syntax is the same, like the nesting and the ampersands. I would definitely recommend learning Sass or Less, and they're almost identical. There's just a few differences, but you don't have to know less to write code in these files and you don't have to know less in order to do template development, but highly recommended and it's there in case you want to use it. We're on template.com file. Here we can see base.less in our array of style sheets. These are pulling directly from the styles folder, and so if we wanted to include more style sheets, we could just create a new Less file inside this Styles folder. First of all, before we do that, going into head into base.less and let's look at something we can pull out of this and put it into its own section. As you can see here, we've got a section for homepage, which is basically empty, but we do have a section here for blog list. This could be a good candidate for placing it in a different file. If we go into here and create a blog.less, we paste that in and hit save. Now we've got the code for blog in base.less, and as long as the ordering is correct, we could go in here in template.com and then add that after base.less. After base.less, we're going to load in blog.less. As a better example, let's actually move something that's obvious, maybe our header and navigation. I'm going to take everything from site header right here, all the way down to here. I'm going to cut that so it's on my clipboard, go in here and make a header.less file. I'm going to put in all the header code there and between my base and my Less file, I'm going to put in header.less so that code is still included in my template. If I go over here to my local version and I run the page, you've got internal server error, so we're going to have to do that thing again where we cancel the currently running process using control C on a Mac and rerun our server. After our server reruns, and we refresh the page, we should start to see that there are no changes. As you can see, after we reload the page, we can see that our header is exactly the same, and if we go in and inspect, we can still see styles applying to side header. Clicking on this, you can see here that it comes through in a compiled CSS file called Site.css. This is all happening on the back-end for us without having to do anything other than set up the list of style sheets in our style sheets array right here, and make sure that that's mapping correctly to the files within our styles folder. Squarespace is awesome in the sense that it will take all of this, compile it down, and put it into one file that we will load into our project. Of course we don't have to break up our less and CSS files, but we can if we want to, and the benefit of breaking them up is to organize our code beta. If we have a lot of CSS and Less we can go to the different files and find the code for header, find the code for blog and find out base styles here. Now moving onto scripts, if we wanted to run our own JavaScript, what we could do is create a new file here or right here, we could just use site.js, but let's create a new file and let's call it custom.js. In this custom.js, I'm going to do the good old Hello World Alert just to show that it is working. Let's save that, refresh the page and we should expect that the alert won't work just yet because we haven't brought it in to our code just yet. I'm going to go into the squarespace documentation again and I'll show you how we can bring in some custom JavaScript into our template. I just need to go to developers.squarespace.com, template docs, and down here you can see a link for custom JavaScript. Here you can see we can load in custom JavaScript using the script loader. If I just copy and paste one of them, and let's say we want to run it on just the timetable page. Well, we would just include that code in the timetable page alone. Just need to change this filename to custom to match the new JavaScript file we've created in the Scripts folder, and now when we load the timetable page, we should start to see the alert coming through. There you go. Our local host 9 thousand says hello world, we can click OK and the rest of the page loads. There you have it. We are now running that custom js on that particular page, and this is really handy because if we want to go to another page and we don't want that code to run, that's easy to do. We can make it so that that JavaScript file only loads where we include it on the template and it all gets bundled nicely on the back-end through Squarespace. We don't have to worry about all these JavaScript files floating around. Squarespace will compile it and manage the assets for us. There you have it, guys. We have just included our own CSS and our own JavaScript files into our template. Very simple to do once you know how to bring it in, in the case with CSS, all you have to do is add the file and then add it to the style sheet array. In the case of JavaScript, all you have to do is add that JavaScript file and then use the tag that we just saw here to bring in that script into whichever part of that template we want. Very simple stuff. In the next lesson, what we're going to cover is a few of the other features of Squarespace templates which are interesting, including open blocks, custom queries, template annotations, and tweaks. I look forward to seeing you in the next video.
14. Open Block Fields, Custom Queries, Template Annotations & Tweaks: Guys, so in this lesson we're going to cover some of the other features of Squarespace templates that I think are particularly interesting and useful. They open blocks, custom queries, template annotations and tweaks. I know that sounds a lot, but each of are quite basic so it shouldn't take too long to go through all four. To get started, what I'm going to do is get rid of this JavaScript that we created in the last lesson. We don't really need a JavaScript file that a lot hell of world. I'm just going to remove that one. We can keep actually less files broken up or we can go back to how they were before, up to you. But for me, I'm just going to leave it the way it is and let's look at the first one of these features I want to talk about in this lesson, which is open blocks. We're going to refer to the documentation in this lesson. Let's go back to the documentation which is at developers.squarespace.com. Then you click on this menu item for Template Docs. If we scroll down, we can see the Open Block Field. I'm going to click on that and here you can read about what an Open Block Field is. Open Block Fields are open areas in a template, provided by a developer in which a user can add any system block and use the same LayoutEngine, grid-based layout system that is used in pages and blog posts. Open block fields are ideal for site footers and blog sidebars. I think that's a pretty good description, but in order to fully understand what's going on here, let's just grab the code and throw it into our template and see what happens, okay? I'm going to actually throw it into the template page here. That's going to be the easiest one for us to see and because this is going to affect the Squarespace admin, I'm going to have to push this code. I'm going to say git add, git commit. Remember we jumbled around some less files, so I'll put that in the commit message as well, broke up some less files and added an open block field. It is going to push that. Now let's load up our Squarespace website. Let's make sure we're on the timetable page and let's scroll down underneath this timetable calendar embed. What I want you to see when we hover underneath here, it says Region #blockField1 and has an Edit button. This is an Open Block Field and what it allows us to do is click Edit and we get the same user interface that we get for creating a page but we can insert content blocks where ever we want, as long as we've defined an Open Block Fields. I can go in here and we can embed a video. Instead, am going to put in a bit of a grid. I can upload some images that I have ready to go. I forgot to optimize these images for the web, so they'll probably take a little bit of time to upload. We'll fast forward through that. There you have it, guys, I've just added a Grid Content Block to this Open Block Field. I can add in any number of blocks in here, just like I would on a Squarespace page, I can hit Save on that and now that's a part of my page. Very cool, as it's mentioned in the documentation, we can put it in our footer. It's also good to put in a sidebar, if you wanted to add a sidebar to your website, so we could have a section over here and we could allow the admin user to come in here and add different blocks. Very cool feature of Squarespace right here. This blockedField1 maps directly to what we've written here. I haven't changed the name because this is just for an example, but we want to give that a nice name. Maybe we would say timetable page bottom or just label that a little bit nicer. But that essentially is an Open Block Field. Moving on to the next feature, I want to show you what a custom query is. custom queries allow us to take data from other parts of the template and bring it in wherever we want. If I scroll down here and click on ''Custom Query Tag'' on this Squarespace tags, you can see that we can, for instance, be on any page in Squarespace template and bring in blog posts from a particular blog. Let me use the Events page as an example. We've got our Events Page over here. Let's actually bring in those events into our timetable page. Going back to here, let's put in another h2 and we can say Upcoming Events. Underneath it we're going to put in a query tag. I'm going to copy and paste this example code right here. Inside I'm going to select the collection via it's ID. Okay, so where do we get this ID from? Well, let's just leave that in for now and let's go over to our events collection. We'll go into events.list, and let's add in that script tag again, which allows us to console log the JSON context. We're going to save that and then we're going to head over to our Events Page on our local version. Let's open up our developer tools, head into the Console. I'm going to open up the second object. Then I'm going to go into this collection objects here and look for U-R-L-I-D. Not this ID with a strange set of characters but urlid. It should be the same as the slug. Slug, meaning the part after the slash here in the URL. I'm going to take the urlid, all I got to do is copy this, which is events and we can get rid of this script tag now. Go back into our timetable.page file and then we know to target the events collection. Then we're going to take out this repeated section and we're going to replace it with the code in events.list. Repeated section upcoming, going to take that. Basically what this tag is doing is creating the exact same context as here. We can just copy and paste the code in word for word. Just fixing up the nesting there, save the page. Let's head back to the browser now and click on the Timetable link. Now if I scroll down, we've got the grid that came from the Open Block Field and we have down here Upcoming Events. Unfortunately, this is not showing up so what we're going to do is make sure that the correct context is coming through. Looks like we've made probably a minor error here. But of course we can always use Console log to figure out what's going on with JSON Data Layer. And if there's ever any issues like this, it's usually because we are not targeting the correct objects on the JSON context. Refreshing the page and I'm going to open up my Developer Console at the same time. Going to go into the second object here and you can see here that the array we're looking for is in fact items not upcoming. The context isn't exactly the same as over here in the sense that we don't have an upcoming array we just have all events as items in our items array. Okay, so that's all we need to fix up here is instead of section, upcoming section items. I think we can get rid of our console log now, pretty confidence this is going to work. Then we can head back here, refresh the page. Close this down and you can see we have brought in data from our events collection into this static page, and we can do so in any page we want. Custom queries, this is what they do. They bring in data from other parts of our Squarespace template and allow us to work with that JSON context. Next up we're going to talk about template annotations, which shouldn't take too long. Template annotations are quite simple. If I go back into my Squarespace admin and I hover over the site title, you can see this box appearing over here. If I click on Edit, what happens is it takes me out of the pages section of the admin and into the design section, right where I can update the site title. You can think of it as a shortcut for editing parts of your content, and the site title is a great example of something that exists on multiple areas of your website, but is edited in one place on the admin. This is a perfect example. Let me show you what that looks like inside the code. If we go into our header.region file and we look for the site title, you can see here that we've got this attribute here of data-content-field equals site title. If I was to actually take this away and push that change to our Squarespace website, git add, git commit, so we've made two changes here. Add custom query, remove template annotation for site title, and then push that so that the change is going to affect our live website. Then I go back to our admin. Notice that when the page refreshes and I hover over my title, that box doesn't appear. It doesn't mean that I can't edit the site title, I can always go in here and go to here to change my site title. I can call it the name I had in mind, Backyard Gym, and if I hit "Save", it'll update that title still, but that shortcut to get to that part in your admin is now gone. So I don't recommend doing that. It's better to keep those annotations in there. But if you want to learn what other annotations you can use in your template, again, Squarespace documentation, and down here under advanced, you can look at template annotations. Here you can see site title, main content, navigation, connected accounts, title. These are all examples of template annotations. These should all come by default in fully featured templates. But if you're developing your own template, this is important stuff to consider, that you should have these template annotations linked up in your elements. Finally, the last feature is a CSS tweak. I'm going to go down here and right under Template Annotations is Style Editor. Now, this is a little bit more complex and we won't be going into full detail on all the possibilities within this lesson, but I wanted to show you that we have what's called the style editor in Squarespace, and we can actually add what's called tweaks to our LESS files, and that will allow us to add in the option to change some of the styles that we've set up in our LESS files to our Squarespace admin. First of all, let's go into our Squarespace admin. Let's go into design and let's go into site styles. Here you can see when it loads for this image block poster. If I was to go on another page, well, it doesn't let me go on another page, but basically, these are the only tweaks we have available to us. We can go in here and change the text color here to green. But basically the other styles within our template aren't able to be changed. I'm not ready to commit to this green color so I'm going to press this little x to cancel out of that. Instead, I'm going to add a tweak to one of our LESS files so that we can actually control that style within the style editor. Let's go back to the documentation here and we can look at the syntax. One of the ones I like here is this page width, so I'm going to copy the variable definition here as well as these comments above, I'll copy that. Let's go into base.less and let's put it right here. As you can see, the tweak, the part that makes this a tweak, is actually just a LESS comment, this dash, dash makes this a comment so it's not technically run in your CSS, but Squarespace will interpret this as a tweak and it will add it to the site editor. Here you can see we've just got the keyword tweak with a colon after it, and then we've got an object with a few key value pairs. We've got type value, title, page width, and a min and max value. What I'm going to do is allow the admin user to change the width of our page container. I'm going to go in here, set this to a default value of what we have down here, which is 1,140, and then let's replace the hard-coded value down here with the variable. This is some LESS syntax, but basically the at symbol represents a variable, so whatever this is will be inserted right here. But of course we've got our tweak above, so that allows us to edit it and I'm going to set the minimum to, let's say, 900 and the maximum should be set to 2,000. These are arbitrary numbers. You can put whatever you want in here. I'm going to just give this a more descriptive name of page container width. I'm going to hit "Save" on that, and of course, because we are creating a tweak, which is something that we want to appear in our admin, we're going to have to push this change to our live website as well. I'm going to go in here, again, you should be very familiar with this by now, done it numerous times in this class. Git add, git commit, add our first tweak, there we go, git push, and after that is pushed, let's refresh our style editor here. Here you can see under size and values, we've got page container width. I don't know if we can navigate to another page here while we're in style editor. But let me just take the address of the website and open it up in a new tab. Let me drag it over here. Let's go on another page that actually has the site container, any other page other than the homepage. Let's click on the container, inspect it, and as you can see, the width of the container is 1140. It's up here. Once I move my cursor up there, you can't see it anymore, but you should be able to see that blue area is 1140 pixels. Let's go into our style editor and let's constrict that to 1000 pixels. You can see here it's already affecting the header. We can see this working live. I'm going to hit "Save" on that. Let's refresh this blog page, and you can now see, if we look at that site container again, it is constricted to the width of 1000. What we've just done is we've set up a default value for the page container down in our LESS file, but then we've also added in a tweak here that allows the admin user to go in and edit that value. This is another really cool feature of Squarespace templates. We can go throughout our CSS or LESS files and add in these tweaks to allow the admin user more control over the style of their template. Tweaks like these allow the admin user more control over the website without having to dig into the template code. You'll find that on many fully featured templates, there are a lot of tweaks available and the admin user has a lot of control over how their template looks and feels. But for our purposes with this space template, we don't actually have any tweaks yet, so if we were developing a template from scratch, we would have to build in all the tweaks ourselves. In the next lesson, we're going to actually look at one of these fully featured templates, and we'll see live examples of tweaks. But now that you know how to create your own tweaks, you can now modify those templates to remove tweaks or add your own tweaks on top of the tweaks that are already available, and that will allow you to build out a more fully featured template that allows you to change things without having to dig into code in the long run. That covers all the main features I wanted to talk about in today's class. But in the next bonus lesson, what we're going to do is look at a more complex template. We're going to look at probably a more realistic starting point, something that you've already been working on, a template that you've selected from the Squarespace website, and now you want to make some changes. Well, we're going to have a look at an example of that in the next lesson. Then we'll wrap up. We'll talk about the class project and I'll set you guys on your way. Almost at the end here guys. I thank you for watching up until this point, and I'll see you in the next video.
15. Bonus: Editing a more complex template: In this class we've used these Squarespace base template. I've used this base template because I think it's a good starting point in order to learn template development and also I would recommend using it to develop your own custom templates. I do suspect, however, that most of the time you'll be wanting to edit an existing template. Probably one of the ones that come with Squarespace to begin with. That's why in this bonus lesson, we're going to look at customizing an existing template. Just a disclaimer here guys, this is going to be a bit off the cuff because I haven't planned too much in advance what we're going to do, but that's why it's a little bit of a bonus video. We're going to choose a template and then we're going to come up with an edit and execute it and you can see a little recap of our workflow. This will form a little bit of an introduction into how to edit the more complex templates that you could be running on your Squarespace site. In order to get started, let's go to squarespace.com/templates, which we can find by just going to squarespace.com and clicking on Templates. Here, you can see the list of all these designs. Now, one warning before we jump straight in is that some of these are built with a newer version of Squarespace and you're not able to use developer mode on some of them. So just another disclaimer here that some of these, you can not use developer mode with. But if we scroll right down to the bottom, you can see these templates are on the latest version of Squarespace, looking for templates from an earlier version. I'm going to click this one. Here, we'll be able to search for a particular template. I'm going go with the template that I'm currently running on my live website, which is called Jasper. I'll search for Jasper, and when I find it, I'll click Start with Jasper. Just like that, we've got a new Squarespace website with a little bit of demo content. As you can see, it looks a lot like my live website that I showed you earlier, my photography and videography portfolio, but just with demo content. First things first, let's go into Settings, let's go into Advanced Developer mode, and let's turn on developer mode by clicking this toggle, clicking Continue, and soon enough, we'll have developer mode enabled and we'll have all of our information right here. I'm going to open up my favorite terminal application, which for me is iTerm, for you on a Mac, it's probably Terminal and on Windows, Command Prompt. I'm going to make things a little easier for myself this time and I'm going to put the template folder on my desktop. I'm going to use the keyword cd followed by desktop, and now I'm on desktop. What I can do is run git clone, copy the git address right here, paste it in here, and now it will clone that repository onto my desktop. I'm going to need to authenticate here. I'm going to need to put in my username. It's a bit hard to read when it's going over a line. There we go. The password is in my password management app. I'm going to close iTerm now and let's open up that newly created folder in VS Code or whatever coding editor that you like to use. Let's click here for Open Folder. On my desktop you can see here that there's a template folder. I'm going to click open on that and close the welcome screen. Now, we can go through our template structure and talk a little bit about what's going on here. The first folder is an assets folder. If you're familiar with web development, you should know that assets incorporate things like CSS, JavaScript, images and icons. Here, you can see we have an SVG Sprite that has all of the different icons that we use within this template. We can put in our own icons and images that are used within the template right here into assets. Here, inside blocks we can see a number of blocks. This template actually uses a lot of blocks over multiple region files, and it incorporates a bunch of different navigation blocks and also partials, which we haven't seen a real life example of before. But as you can see here, this cart.block is clearly not a navigation element, so this would have to be a partial. It's pretty clear here that this is for bringing in our cart when we're enabling e-commerce. We're not covering e-commerce in this class, but we'll see some partials being brought through in just a second. If we go into collections, we've got conf files for our main collection types, album, blog, events, products, projects. We've also got a folders.conf file so that we can have folders in this template and index.conf file to define an index and then a.list file for the index to determine the presentation of that index and a.list file for the presentation of a list of projects. Then moving through, we've got a scripts folder. In the scripts folder we've got site-bundle.js, which is a gigantic JavaScript file of minified JavaScript. I don't expect you to be able to decode this. If you do want to make JavaScript changes to a template that already has a file like that, I recommend creating a new JavaScript file and then bringing that in the way we have already done so in this class. Strings, we haven't seen before, but this is obviously a place to store json data. I'm not going to spend any time on that. In styles we have all of our less and CSS files. Going down we can see there's only one site.region file or there's only one region file and it's called site.region, and it incorporates a lot of these blocks. As you can see here, this is our first example in the world of a partial. We can see from this syntax here followed by the name of the block. We're basically taking the code from responsive-nav.block, which is right here, and placing it right in here. So just one region file and that obviously means that we've got only one layout. If I go into my template.conf file, you can see that is the case. We've got just one layout in our layouts object and it is the default layout using just the one region that we have. If we look at navigations, however, this is a little bit different to what we had in our template. We only had one navigation, whereas this template has two. It's got a secondary navigation, and then we've got this stylesheets array that lists the style sheets that we want to bring into our template, including the order in which we want them to come into our template. Here, we've got an array of systemCollections. As we've seen earlier in the class, systemCollections allow us to leverage these collection types without having to write a.list or.item page for them. Down here you can see a new array called systemPartials. This is just like partials, but we don't define these ourselves. Within Squarespace, we've got this partial here that Squarespace provides to us, and it is a set of share buttons. So that's a little overview of our template. What I'm going to do next is actually run this template locally. We need to go into here, run squarespace-server, followed by our website address. We're going to look at our website separately outside the admin as well. I'll put that into its own tab, and then I'll make sure to copy that, put it down here, and then run it in our Squarespace server command, making sure to put the --auth on the end. I hit Enter on that. After a while, it should be listening on port9000. Let's open up a new tab, run localhost:9000, and I'll catch you in a few seconds when this finally finishes loading. Here, you can see our website in all of its glory, it is basically just a site title at the moment. We don't have any navigation as of yet because unfortunately, if we go back to our admin, you can see that once we enable developer mode, Squarespace actually ripped out all the demo content, and so now we have to create our own content. Very sad. But well, in a real life example, you wouldn't be using demo content anyway. Let me just bring in some demo content again. I'll do the same example as in our main projects, which was in About page, click Edit, and I'm just going to search for an image. It doesn't really matter what the image is. Let's go with this lovely bunch of trees next to a lake, it looks like. It's just going to process and resize that and then we'll click Apply. After we click Apply, we can scroll down and see there's already some placeholder content there, so I'm going to save that. As you can see, we've got our first page and it's automatically added up here because it's in our main navigation. If I move it to secondary navigation, I believe it'll still show up and it probably won't be obvious the difference until you add navigation items to both navigations. Now, I know from experience that this template already looks quite nice. I can't really think of too many things you would want to change on this template, but there are infinite things you could obviously do with any template. One of the things I have noticed is that there's not much of a footer. One thing I know about this template is that there is a footer element at the bottom, but it's not enabled. If I go to Home, if I go to Design, then I go to Site Styles, I can find all my tweaks for this template. This was something we talked about briefly, but we didn't create a lot of tweaks because there wasn't really that many CSS styles within our template to begin with. But as you can see here under site:footer, we can click this checkbox to show the Global Site Footer. If we don't have that checkbox shown, the site footer will be set to display none and we won't actually get to see it. I'm going to hit save on that. Going back to our live Squarespace website outside of our admin, I'm going to scroll down and as you can see, there's still nothing in our footer. If I inspect the page however, we should start to see that there is a footer element in there. As you can see, footer, ID, footer and then inside we have a whole bunch of code and in the most nested div, there is actually no content. So let's have a look in our template code and see where that comes up. So I'm going to go to site.region and search for footer with the opening tag. Here you can see where our footer is defined. As you can see here, we've got a Squarespace open block field, so obviously we haven't actually put in any of our end blocks so there's going to be nothing showing up. Let's try doing that right now. Let's go back to here and you can see when I hover over this footer area, you can see this word footer come up and you can see this button for edit. Now, I can add blocks to my footer. Now that's all well and good, that's a feature already in the template. But what I want to do in this lesson is actually make a code change to the template because that's what this class is all about. It's all about developer mode. If you could just do it within your Squarespace admin, then why would you need code? Well, in this instance, let's just say that we wanted to have a navigation in our footer. I think that's quite common in a lot of websites, having a header navigation and a footer in navigation. So instead of having this open block field, what I'm going to do, go back here, let's go down here, remove this block field and replace it with a Squarespace navigation tag. Because we've already got two navigation setup in our Squarespace template, as you can see this secondary navigation, I'm going to save a bit of time here and just re-purpose the secondary navigation rather than creating a new footer navigation. What I mean by re-purpose is I'm going to make it so that the secondary navigation shows up in the footer rather than in the header as well. So, first things first, we need to find that code in the header, remove it, and move it over to here. So if I scroll up, our header content is in this header.block file. I'll go over to our blocks folder, go into the header.block file and as you can see here, we've got our Squarespace navigation tag for the main nav, and then just below it, the secondary nav. So I'm going to take the tag plus its parent element that's wrapping around it with command X, it's copied to my clipboard. Then I'll save on that page, head back down to here and let's put it in our footer instead. Hit save on that. Now, let's actually creates a secondary navigation item, let's say contact us page, just contact us. All right, so that's in the secondary navigation now and as you can see, it just sits right next to the main navigation on our currently live website. But of course, we have made code changes locally and that should be showing up on our local version. So let's re-run localhost 9,000 and see what happens. As you can see, we've got our about page up here in our primary navigation but if we scroll down to the bottom, we should see a footer with navigation for the secondary navigation. We don't currently see that, so let's go to the about page. Makes it a little bit more obvious and here can see the contact us link is down the bottom. Maybe it was there on the homepage. It seems that the homepage is a special case but nonetheless, if we're on the about page, you can see the contact us link is down here and we can of course swap these around, we can move contact us and about to the opposite positions. Then when we re-run our local version, you can see about is now down in our footer navigation and contact us is up here in our header navigation. So that's a small change on a more fully featured template in this lesson. Essentially, we could do anything we wanted from this point. The possibilities are endless and unfortunately, I can't cover every possible change that you could ever imagine with your Squarespace template. I came up with putting a site navigation or a footer in navigation in there just on the spot. I know that's not necessarily going to be the change that you would like to make to your Squarespace website but of course, feel free to leave a comment in the discussion box below. We can help each other to create whatever we want on our Squarespace template. Maybe we want to change the overall layout, maybe we want to incorporate a sidebar, maybe we want to incorporate some other JavaScript framework which runs almost an app inside our template. Almost anything is possible, at least on the front end. Definitely, take what you've learned in this class, apply it to creating something custom for yourself or making those changes to your Squarespace template and understand that if there is something you don't know how to do or you can't piece the two together, you can always leave a comment in the discussion box below. I'm interested to see what you want to change on your Squarespace template and I'll do my best to point you in the right direction. So yeah, hopefully this gave you a little bit more exposure to other templates and you can see that regardless of which template we're editing, wherever it be the base template or this Jasper template, it's the same process and the same mechanics that are working behind the scenes. So thanks for watching. I'm going to wrap up the class in the next video and you can get started on your class project if you haven't already. So I look forward to seeing you and signing off, so I'll see you in the next video. Hey guys, I forgot to mention one thing before we move on to the next lesson. If you did want to make these changes live on your website, you would of course, run git add and then git commit those changes. So let's say move to secondary navigation and then git push. So that change is now going to be live on your website rather than just running locally. Alright guys, I thought I'd just throw that in there because I just realized we didn't actually push that to our live website. Let's just double-check that right now. Yeah, so as you can see, that navigation is now separated into our header and our footer. So that's it. I'll see you in the next video.
16. Outro: In this class, we covered all the major things you can do within a Squarespace template. By opening up the template, we've been able to edit the entire front end, insert HTML, CSS, and JavaScript wherever we want. We've also learned about the JSON data layer and what data we can bring through from the back end using JSON-T. For your class projects, I encourage you to create your own template. Would you like there to be a sidebar on your blog page? Maybe you want to create a multi column navigation layout in your footer. Now, armed with your knowledge of Squarespace templates, the choice is yours. Be sure to post what you create in the project section of the class. If you need any help or guidance, leave your comments in the comments section or the discussion section below. Thanks, as always, for watching, and I hope to see you again on some of my other classes.
Christopher Dodd, Web Developer / Educator
