Build Your Own Free Website Part 2 - Top Menu (navbar)

Following the website splash screen that we built in Part 1, we'll go to the quarto homepage and find the relevant documentation (quarto.org/docs/websites), let's change our homepage one by one. (Do-it-yourself independence! Let's build on that independence!)

If you're arriving here directly from Part 1, please first read Part 1 below (Click here) before coming here.

Quarto website creation guide page

Do you see the Quarto website address on the browser splash screen that popped up from the render? (To learn more about Quarto websites visit https://quarto.org/docs/websites.) Click on it and you'll see a little text that says Creating a Website, as shown above.

If you don't speak English Right-click > Translate to English to make viewing easier. In both Microsoft's Edge and Google's Chrome browsers, you can use the Translation screento show the

Now it's easy on the eyes, which is good, but the problem is, what does this mean? I'm not even familiar with Quarto's terminology, and I can't even understand it in Korean! I'm going to stop looking at the Quarto homepage now! (You'll have to read the details later when you're more familiar with Quarto).

Rename your website

First, today we're going to change the top menu of our creation (quarto-website, Home, About), which is usually called the navbar.

First, change the main title! quarto-website <- this, IT Playground <- let's change it to something like this. Run RStudio and in the Files pane root folder at the bottom right (in my case C:\R\Project\quarto-website\), open the index.qmd file and select the Change the title to IT Playgroundto the name of your website, which of course you can change to whatever you want.

Adding a navbar menu - talks

At the top of the Files window, click _quarto.yml See the file? yml refers to a YAML file, and the Files that cover the overall setup of your website, such as titles, menus, etc.. For reference, YAML is an acronym for Yet Another Markup Language. Click on the file and change the source code as shown below. If you look at the before and after, you'll see the difference. We changed the title of the website (quarto-website -> IT Playground) and added talks.qmd to create a talks menu in the navbar.

But then I thought about it, I have index.qmd in the root folder, but not talks.qmd, right? So let's create that file and put the contents in it. In the Files window, click the Blank File > Quarto Doc and a new window will open, where you can see the talks.qmdand type OK! This will create talks.qmd in the root folder.

Click the newly created talks.qmd file and select the Type /yaml and enterand in between -, type the main title (talks) and body copy (.... in IT Playground) that should appear on the webpage that appears when you click talk in the navbar, as shown in the following figure.

Rendering with shortcuts

After following the above steps Crtl + Shift + Bthe website will render and you can see the changes and additions you made in your web browser as shown below. The site title has changed, the splash screen main title has changed, and there is now a TALKS menu, which when clicked brings up the TALKS page.

Organize

To summarize, in this installment of Replace the title of index.qmd with, Change the title of the yaml file and insert talks.qmdand, Create talks.qmd in the root folderand Type '/yaml' in that file to enter the title and body content of the talk.qmd sectionand Rendering and the thing we were trying to do appeared. So easy.

Add1 - Insert icon

To add additional icons to the navbar, visit the navbar-related page on the Quarto homepage (Click here), you'll see a table of options and descriptions like the one below. See the icon?

In Quarto Bootstrap 5 iconsin the following example.

right:
  - icon: github
    href: "#"
    aria-label: R Playground

_quarto.yml file, you can enter something like the image above. hrefis the address of where you want to be directed when the icon is clicked. I set it to "#" so that clicking on it doesn't do anything. (By the way, I set the icon to appear on the right side of the navbar, the other menus on the left, and the navbar background to be white). I hope this makes sense when you look at the image below.

What was the shortcut to render it and view it in a web browser? Yes! Ctrl+Shift+Band you should see the GitHub icon pop up next to the magnifying glass in the top right corner, as shown below. That wasn't too hard, was it?

Until the day my second life smiles! TerryI was going to say thank you, but there's one thing missing. Ugh. Hey, what's that logo next to the main title IT Playground. Are you wearing Bingdari hot pants or are you just trying to sneak by without them?

Add2 - Insert your website logo

There you go! Website logoFirst, we'll create a folder in the root folder called img folderfor a new project.

Then, in that folder, place the logo of your choice. Pixabay (pixabay) or Flaticon to get the logo file. I'm going to put Terry's logo (playblock) in the img folder, and then I'm going to use the _quarto.yml In logo: ./img/tere-logo.png and render it, and that's the end of today's lesson (phew - that was long).

*Add
logo: The next ./ The meaning of _quarto.yml Refers to the folder location of the file (root, C:\R\Project\quarto-website).

All content on 'secondlife.lol' is protected by copyright law. Unauthorized reprinting, copying, distribution, etc. is prohibited.