× Search About Posts Code Music Links
Blank Try
experiment
lots
learn
more

.GetPage Test

Updated on
Last site update: 8 May 2024

SITE UPDATES

Latest

  1. Adding new Baguette Box JS image gallery and a code page.
  2. Added a Search Page based on a lovely simple solution. And a post about it
  3. The Docs is a new section for documentation about the site. So many features it’s easy to forget them or how they work. Link in the footer. (07.08.21)
  4. Added css option for frontmatter. This is an array that allows CSS rules to be added to the <head> section stylesheet from the frontmatter. Also set the config file to allow HTML attributes to be added to HTML blocks like lists, tables, paragraphs etc. (03.08.21)
  5. New html shortcode. Same as <div> but without markdownify so can use for HTML tags and SVG. (01/06/21)
  6. New <div> shortcode for generic CSS on the fly in Markdown. Takes class, id and style attributes. Used it to create this scrollable box. (29/05/21)
  7. New Draft page with a list of draft articles (not viewable on live site, obviously.) (28/05/21)
  8. Added RSS icon to footer (26/05/21)
  9. Added next and previous page option in section pages (26/05/21)
  10. Added a dark theme (for OS’s set to dark mode), first using a CSS filter and then by changing the custom property colours. (25/05/21)
  11. Set up and image gallery using Photoswipe and Hugo’s page resources. This included new partial and shortcode: photoswipe.html and ps_thumbs.html. Photoswipe can be turned on or off in the frontmatter: photoswipe: off. (24/05/21)
  12. New Youtube and Soundcloud shortcodes. The youtube one, yt.html, uses aspect-ratio which is not well supported yet.
  13. Changed About page into a leaf bundle
  14. Added meta description tags
  15. A new image shortcode
  16. Line Breaks in Headings
  17. Custom scroll bar added for FF and webkit browsers. (18/05/21)
  18. smooth scroll back to top button
  19. Site title subtitle
  20. Custom tags page.
  21. Music section added.

Less Late

  1. Chartism and Chart js libraries (10/05/21)
  2. Added mobile friendly slide in menu.
  3. Code block responsivity added.
  4. Added some reponsivity (though the code blocks are not responsive)
  5. Added Wavy background from BG Jar
  6. Embedded the clamp sizing tool.
  7. Enabled Git Info for dates and lastmod field.
  8. Sorted external links extlinks for frontmatter arrays
  9. Favicon added.
  10. Added fonts Epilogue (main text) and Roboto Mono for code.
  11. Added new section for experimenting with: test-panel, which is above the footer
  12. Added type and section variables to the footer.
  13. Added a new section ‘code’ for chunks of code from the site
  14. Added Params / mainSections to the config file to allow the code section posts appear in the sidebar. The default behaviour is: “If the user has not set this config parameter in their site config, it will default to the section with the most pages.”

Earlier

  1. added hugo.Generator
  2. changed name of post to Syntax highlighting
  3. Changed the site url in config file to netlify.app from netlify.com
  4. changed summary to description in frontmatter and summary.html / summary did not work on Netlify.
  5. renamed some files so more logical in finding them
  6. added netlify.toml with hugo version (maybe also set this on Netlify too)

So here’s a quick experiment using .GetPage. This can retrieve any page object in your given the right url. You can then get different parts of the page: .Content, .Title, .Permalink etc.

Here I created a new folder /headless and added an index.md file with the setting headless: true in the frontmatter. headless is a predefined Hugo variable.

To retrieve the content section of the page I first created a shortcode, getpage-test.html and then used with like so:

1{{ with .Site.GetPage "/headless/index.md" }}
2  <div class="getpage-updates">
3      {{ .Content }}
4  </div>
5{{ end }}

The CSS class had some CSS applied through my frontmatter array css.

NOTE: This won’t work with other pages in that /headless/ folder. That’s because other pages will be page resources and you need to use the

Layout on this page

The Site Updates box is floated to the right. This method ONLY works if the text on the left side (the content of this page) is long enough to push the bottom of the content section down far enough. A floated element can’t do this.

I tried experimenting with grid but for that to work you would need just 2 HTML elements and with the Site Updates box being inside section.content every paragraph and heading becomes a grid item. So floating seems the only way to go.

▲

External links