-
|
My web pages each have a menu of links to other pages. To reduce code, I want to store the menu as a PageElement. For example: PageElement MENU_ELM("file:/menu.html", { I saved the menu string as "menu.html" with div formatting. URI_Page1,2,3 are defined above as "/Page1", 2, 3 etc. And these pages are inserted into the Web server. Page1.html (simplified) is < HTML > < BODY > < H1 > Title < /H1> {{MENU_ELM}} < H4 > Content < /H4 > < /BODY> < /HTML > When I open Page1.html (as "/Page1"), all of the MENU_ELM is included however, there is nothing else. No HTML, BODY or H content My eyes are getting blurry from all the brackets. If you see something, say something. Thanks. Here is a simplified version of the menu.html: < a href="{{URI_PAGE1}}" > Page1 </a> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
How to share the same page element with different PageBuilder content: #include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>
#include <FS.h>
#include <SPIFFS.h>
#include <PageBuilder.h>
#define SSID "********"
#define PASSWORD "********"
WebServer server;
const char* const URI_Page1 = "/Page1";
const char* const URI_Page2 = "/Page2";
const char* const URI_Page3 = "/Page3";
const char* const _PAGE_HEADER = R"(
<html>
<body>
<h1>{{TITLE}}</h1>
)";
const char* const _PAGE_CONTENT = R"(
<h4>{{CONTENT}}</h4>
)";
const char* const _PAGE_TRAILER = R"(
</body>
</html>
)";
// Page header elements
PageElement PAGE_HEADER1(_PAGE_HEADER, {
{"TITLE", [](PageArgument& args) { return "Page 1"; }}
});
PageElement PAGE_HEADER2(_PAGE_HEADER, {
{"TITLE", [](PageArgument& args) { return "Page 2"; }}
});
PageElement PAGE_HEADER3(_PAGE_HEADER, {
{"TITLE", [](PageArgument& args) { return "Page 3"; }}
});
// Menu element
PageElement MENU_ELM("file:/menu.html", {
{"URI_PAGE1", [](PageArgument& args) { return URI_Page1; }},
{"URI_PAGE2", [](PageArgument& args) { return URI_Page2; }},
{"URI_PAGE3", [](PageArgument& args) { return URI_Page3; }}
});
// Generate different content for each page from the same page content mold.
PageElement PAGE_CONTENT1(_PAGE_CONTENT, {
{"CONTENT", [](PageArgument& args) { return "This is Page1."; }}
});
PageElement PAGE_CONTENT2(_PAGE_CONTENT, {
{"CONTENT", [](PageArgument& args) { return "This is Page2."; }}
});
PageElement PAGE_CONTENT3(_PAGE_CONTENT, {
{"CONTENT", [](PageArgument& args) { return "This is Page3."; }}
});
// Page trailer element
PageElement PAGE_TRAILER(_PAGE_TRAILER);
// Declare Pages, All pages share the same menu.html and the page trailer html content
PageBuilder PAGE1(URI_Page1, {PAGE_HEADER1, MENU_ELM, PAGE_CONTENT1, PAGE_TRAILER});
PageBuilder PAGE2(URI_Page2, {PAGE_HEADER2, MENU_ELM, PAGE_CONTENT2, PAGE_TRAILER});
PageBuilder PAGE3(URI_Page3, {PAGE_HEADER3, MENU_ELM, PAGE_CONTENT3, PAGE_TRAILER});
void setup() {
delay(1000);
Serial.begin(115200);
Serial.println();
WiFi.mode(WIFI_MODE_STA);
delay(100);
WiFi.begin(SSID, PASSWORD);
unsigned long tm = millis();
Serial.print(SSID);
while (WiFi.status() != WL_CONNECTED) {
delay(300);
Serial.print('.');
if (millis() - tm > 20000) {
Serial.println("failed");
return;
}
}
Serial.printf("connected %s\n", WiFi.localIP().toString().c_str());
SPIFFS.begin();
PAGE1.insert(server);
PAGE2.insert(server);
PAGE2.insert(server);
server.begin();
}
void loop() {
server.handleClient();
}/menu.html file on SPIFFS <a href="{{URI_PAGE1}}">Page1</a>
<a href="{{URI_PAGE2}}">Page2</a>
<a href="{{URI_PAGE3}}">Page3</a> |
Beta Was this translation helpful? Give feedback.
How to share the same page element with different PageBuilder content: