#154 Template: Make a template for most pages

[7rs]

#154 Template: Make a template for most pages

[7rs]

First, header is needed.
Daisy UI has Navbar. This is equivalent to a header.
So, There are 3 ways.

• Make a new header
• Use DaisyUI
• Use other framework

[7rs]

No, probably there are only 2 ways.
DaisyUI doesn't have scripts.

[7rs]

There are no framework limitations.

[7rs]

Objects for a header

• Header text
  There is no specific definition, but probably it would include logo icon, website title, or article title.
• Theme Button
  Right now suppose only two modes: light mode and dark mode.
• Table of contents (foldable)
  It's for articles or pages.
• Navigations (foldable)
  It's for pages except for articles, etc.
• Input for searching (foldable)
  Inputs for searching entire website

Features for a header

• Animations
  Any type of animation, but playback time should be shortened.
• Auto hide
  Header automatically hides when scrolling down and reappears when scrolling up.
• Manual hide
  Allows a header to be hidden and redisplayed, and return to the open state when reloading.
• Auto tracing for table of contents
  Displays headings with h1 - h6 id set.
• Search
  Search for entire website, not articles.
• Label
  Display labels when holding or hovering.

References

• Starlight
• Index
• Proton
• shadcn/ui
• MDN Web Docs
• Node.js

[7rs]

Header

[7rs]

Objects for a footer

• Navigations
  The header has navigation too but, a footer always shows detailed navigation.
• Jump to top (Button)
  Scroll to the top automatically.
• Copyright
  Displays of thelicense for Pages and rights to contents.
• Social icons
  YouTube, GitHub and etc.
• Build informations
  From a security standpoint, it's better not to write it. But since it is open source, it's no use in hiding it.

Features for a footer

• Animations
  Any type of animation, but playback time should be shortened.

References

• Modrinth
• MHLW (Japan)

[7rs]

Footer

[7rs]

The table of contents would be useful for blogs and other pages. It's already in the header.
However, it's too lazy to call from a header everytime. So Display a sidebar for the table of contents with pc screen only.

[7rs]

Object for a sidebar

• Table of contents
  It's for articles or pages.