scottsweb / elva

✅ A multilingual, clean, green 11ty starter theme.

Home Page:https://elva.scott.ee

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Adding a new page question

theapplegates opened this issue · comments

commented

I am embarrassed to ask, but I am not a developer. I can't figure how to add a new page. I wanted a search function, so I read about pagefind. I decided it would be easiest to keep the search function on its own page.
Here is what I have done.

  1. install pagefind
  2. make a search page and enter the code to allow the search.
  3. For some reason I can't get the page to show up on the site.

I added search to navigation.js

		{
			text: 'Search',
			url: '/search/'
		},

I then added the search.md page in en -> pages

I added the search code and I can't get the search page to show, in dev or production.

---
title: Search
---
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

Any input you can provide would be helpful.

Thanks
Paul

Hi Paul
I am not familiar with pagefind, but it sounds like the steps you have taken are pretty much what would be needed. What happens if you replace the content of the search.md page to the following:

---
title: Search
date: 2023-10-11
---

This is my test page

And then run npm run dev. It should show up on your local machine at: http://localhost:8080/en/search/

It might be worth taking a step back. If you have VSCode or VSCodium installed, open the elva folder with VSCode and you should be prompted to install the Front Matter CMS extension. That will then give you a UI for managing content. For example:

Screenshot 2023-10-11 at 15 00 20
  1. Button 1 will start your local development server, so you can view the site locally
  2. Button 2 will allow you to create content at the touch of a button

You can also swap language at the top right if you want to manage the secondary language there.

Screenshot 2023-10-11 at 15 03 40

Once the content has been created, you should see this screen above:

  1. This button will open a preview of your content
  2. This area can be used to manage properies of the page, so you don't need to remember frontmatter shorthand

Once you have your basic/demo search content showing up, you can then look at how to integrate search.

commented

I decided to start over. A plus is that I did not add much content. I appreciate your help. You never know it might work fine.
You explaining will help me troubleshoot if needed. Thanks Paul