• The header image is removed altogether, simply reserving vertical blank space to have a background for the title and the heading menu. There is no problem with that.

• A landscape theme patch was ported from the theme master.

• The reference to a Google location of some style-important material was changed from protocol http to protocol https.

Observations

• Everything works fine in Microsoft Edge and Google Chrome browsers both locally and from the hosted site, as always.
• When the hosted-site is viewed from a Windows Phone, the key problem is how slowly the default page loads images. The video links might also fail.

For PC viewing of the hosted-site in IE11,

• The main body text is now rendered properly.
• The sidebar does not appear next to the body, being shifted to following the main body text, although properly formatted.
• The videos do not appear, although the frames for them are present as white space.
• The heading space is still too large and the RSS icon does not appear.

As a desparation case, this is almost passable. I want better than that.

TODOs

• Having all posts on the default page makes for a very long load and rendering. The default page needs to be set to a short, fixed number of most-recent posts, since there are complete archives. For success on mobile, having a single post is probably best.
• Don’t forget to add a header link to the previous history of the blog, a feature needed on all production clones made from this Spanner Wingnut blog once it works as well as feasible using Hexo.
• Determine what there is about how videos are introduced in Hexo that does not work on the Apache-hosted access from IE11.
• Continue to explore the connection with the RSS icon disappearing and formatting/header divisions being mangled.

This snuck through manual checking because I didn’t confirm that there was any difference between browser viewing on my local machine and viewing on the hosted-site and its Apache HTTPD Server.

I am now working backwards to see if there were correct renderings of the page banner at any point in the past.

This post restores the original page-header banner image.

Observations

• This image renders correctly in both Edge and IE 11 at the demonstration site for the Hexo landscape theme. I have restored the parameters and folder content.

• Here is that image presented directly as an asset of this page, not as part of the page heading banner. I don’t usually employ JPEG images, and this is to verify that is not the problem.

]]>

This is the fourteenth in a series of Spanner Wingnut unit-test confirmations. This post confirms the sharing of posts to LinkedIn, expanding sharing facility that is installed by default.

LinkedIn sharing is added to the “Share” options available at the bottom of every post. The necessary modifications are from the hexo-theme-landscape Pull Request #100 by @itsAmr.

On selection, after any login-requirement, a form is offered for describing the shared post.

The submission becomes part of the sharing-user’s LinkedIn activity stream, as on my profile page.

The update entry provides the excerpt (when there is one) and the submitted “update” text, along with a link to the subject post.

Observations

• The additional sharing will automatically appear on existing pages that have a share button, including fixed pages (such as About) along with existing posts.

• The LinkedIn form does not always provide an automatically-derived excerpt. It is unclear how that might be influenced by the author of the post.

Observations

• This test fails at deployment. The folder for the post and for the tag do not upload via WS_FTP.

• I am able to manually transfer the folders via Windows File Explorer accessing the wingnut hosted-site using FTP. Then the http://orcmid.com/BlunderDome/wingnut/2017/12/26/中文測試/ folder appears, as does the http://orcmid.com/BlunderDome/wingnut/hexo-tags/中文/ tag entry.

• After editing these observations, I expect that I will need to manually transfer the two Chinese-named folders again.

• Also, every time there are changes that regenerate pages, the folders with Asian names will not be updated by my deployment script. So I won’t be updating this one any further after this (2017-12-29) update. You can tell it misses updates by the way “Recent Changes” remains stuck at the permalink version.

• There is no problem so long as tag names and file names do not use Asian characters. That’s all right for the English-language Spanner Wingnut blog. It is an unfortunate internationalization limitation.

Chinese Text

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

Tests

The first two videos are from the original unit test:

1
2
3
4
5
6
7

### YouTube 1 ###

{% youtube TIbZDRXM-Tg %}

## Vimeo test ##

{% vimeo 82090131 %}

YouTube 1

Vimeo test

These confirm that the specified tests run. The video markdowns are described in the Tag Plugins documentation. These two tests confirm those plugins are available and active.

The next confirmation is with a video of the kind that is important for me to share.

1

{% youtube XmsCaN0bH1k?t=20m54s %}

is part of an important address by Edward Ashford Lee at a panel on Living in the Cyberworld. All of the discussion is important. I am featuring, here, a segment on the reconciliation of scientific and engineering approaches around models. Althoug models of computation are not scientific models in the same sense that models of nature are, the relationship between mathematical models, engineering, and the incredible layering of abstractions on which dependable computing rests deserves careful attention.

Start about 20 minutes in and watch at least through to the point where programming languages are placed atop an extraordinary layering of abstraction beyond single transistors.

Edward Lee’s address ends at the 30-minute mark. The subsequent remarks and panel discussion are also informative. You will see there that non-determinism is used in more than one sense in discussions around non-deterministic models of systems.

Observations

• All of the tests work. Note that YouTube cookies can influence where the YouTube videos begin on a second viewing.

  • Attempting to start a YouTube video at a preset time marker apparently doesn’t work with the youtube tag plug-in. This needs to be researched.

  • For some reason, refreshing the page has the first YouTube video frame appear for the second, Vimeo, frame as well. This occurs when viewing via Microsoft Edge 41.16299.15.0.

Landscape requires Hexo 2.4 and above. If you would like to enable the RSS, the hexo-generate-feed plugin is also required.

Code

In themes/landscape/_config.yml there is one setting for RSS.

1
2
3
4
5

# Header
menu:
  Home: /
  Archives: /archives
rss: /atom.xml

For Spanner Wingnut, the names are customized to avoid conflicts with side-by-side installation of older (and someday newer) editions of the blog.

22
23
24
25
26
27

# Header
menu:
  Home: /
  Archives: /hexo-archives                                   # 0.0.5
  About: /hexo-about     # hat tip to John Stevenson         # 0.0.3         
rss: /hexo-atom.xml                                          # 0.0.6

It appears that the rss property, there, is for the menu button rather than anything to do with generation of the feed.

In accordance with the hexo-generator-feed README, it is sufficient to configure the plugin at the top-level config.yml. For Spanner Wingnut, the feed will include full content of pages without limit on the number of posts in the feed.

64
65
66
67
68
69
70
71
72
73
74
75

# RSS Feed                                                 # 0.0.10
feed:
  type: atom
  path: /hexo-atom.xml
  limit: 0
  hub:
  content: true
    
# Disqus (hat tip to John Stevenson)                        # 0.0.6
disqus_shortname: wingnut-1
  
# Home page setting

Result

The RSS button in the top right corner of the banner accesses the generated feed.

The feed format is acceptable to browsers and also feed readers, such as FeedDemon.

The exhibited excerpts are provided by the feed reader. The expanded view is available directly without having to go to the Internet for the actual post.

Observations

• The Atom XML stream provides great detail.

  • Updated dates are reported

  • Updates to older posts are reflected in the latest stream

  • Metadata includes information about categories and tags used on the post

• The content of the post is in a CDATA block. Styling information is not perpetuated, so highlighting in code blocks is not available and blockquote styling will be the default behavior of the feed reader.

• Images, including screen captures, are perpetuated properly. This is an alternative where code blocks do not provide what is desired in the RSS. Fancybox viewing is not available, however.

• Gallery posts lose the gallery in the RSS.

• Pull quotes appear as if they are simply preceding block quotes.

• no-title and link-title conditions of the original post are not perpetuated. The RSS feed title links to the actual post, and a title is fabricated from a blog-text heading if necessary.

• Previous unit test posts are now updated to reflect limitations that apply to RSS of the subject features.

The test involves introduction of three tags in the front matter.

1
2
3
4

tags:
- Foo
- Bar
- Baz

I do not wish to add tag entries on the sidebar and in the archives for those useless tags. Tags are already working and this is just a place-holder confirmation. Here, the front matter has used tags along with other material.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: Hexo Unit Test - Post Tags
date: 2017-12-12 08:32:56
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [Blog Development, Hexo, tags]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- Landscape Theme
- Markdown
- Observations
- TODOs
- tags
---

Expected Result

The effect will be to list the tags at the bottom of the post.

In addition, those tags will be listed among the TAGS sidebar listing.

Both listings have clickable tag names, providing an archive-style list of those posts that use the tag, including this one.

Observations

• The post-bottom list of tags is unobtrusive, and the small type is also valuable. For long posts, this material is not easily come by.

• Confirmation of the unit test requires verification that the post on the home page and at the permanent post location have the tags listing at the bottom of the page body.

  • Each body entry for a tag must link to an archive-style page of all current posts that employ the same tag.

  • The sidebar entry for TAGS should have links in the same manner.

• The screen captures are based on the landscape features as they are rendered as of 2017-12-12. Later updates to some features may have this post appear differently.

• It is unfortunate that changes to the sidebar cause all pages to be regenerated. It changes the sense of “Recent Posts” although it does keep the sidebar Categories and Tag lists current. I would prefer something different, if I could figure out what that might be and how to introduce it.

• If tag maps were being used, it would be nice for those to be reflected on every page as the lastest. This suggests to me that this should be generated at server access time, from stored data. That changes how much on the site has to be regenerated, and might not be too intrusive. That does sound like considerable effort and it changes the static character of the blog. A quandary.

• In the RSS feed, the specified tags (and categories) are recorded. The read feeder feed reader need not provide anything for them. There is nothing available using FeedDemon. added 2017-12-14, corrected 2017-12-24

Tag plugins have nothing to do with “tags” on posts. The term applies to plugins that are exercised in template processing, including particular Markdown “tags” that invoke plugin functions. See Hexo Docs for more information. These tests follow the illustrations there.

Block Quote

Normal blockquote

This is the default formatting when using the “>” line leaders to make a block quote/indentation. This behavior was already customized as part of the Wingnut Markdown/HTML Elements unit test.

1

> Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

yields

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Specialized formatting is by using Octopress tag insertions instead of “>“.

Quote from a book

1
2
3

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

yields

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

Quote from Twitter (or any URL)

1
2
3

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

yields

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

1
2
3

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

yields

Every interaction is both precious and an opportunity to delight.

The Pattern

The general pattern is complicated. It appears to be something like

1
2
3

{% blockquote [author/source [url] [title] ] %}
body
{% end blockquote %}

Code Block

The normal code block and code font tagging in Markdown is via the ` character. These also offer annotations for other features as part of GitHub-compatible markdown. This test demonstrates how much the tag-plugin and standard approaches match.

One difference is that the ``` boundaries can enclose a codeblock, but nothing can enclose ``` boundaries.

The codeblock tag format is

1

{% codeblock [title] [lang:language] [url] [link text] [mark:[#[-#][,..]%}

The backtick format is

``` [language] [title] [url] [link text]
code snippet
```

Normal code block

1
2
3

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

yields a plain codeblock,

1

alert('Hello World!');

With caption

1
2
3

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

yields

1

array.map(callback[, thisArg])

With caption and URL

1
2
3
4

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]
{% endcodeblock %}

yields

1
2

_.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

1
2
3
4
5
6
7
8
9
10
11
12
13

{% codeblock lang:js mark:1,7-8,10 %}
const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
{% endcodeblock %}

should have lines 1,7-8,10 marked with a selection coloring, yielding

1
2
3
4
5
6
7
8
9
10
11

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: This depends on the theme’s style supporting .highlight.line.marked, with the selection or current line coloring used.

Gist

1

{% gist 996818 %}

will yield a particular Gist item

jsFiddle

1

{% jsfiddle ccWP7 %}

yields a particular JSFiddle in-line editing window

There is more information about these at https://hexo.io/docs/tag-plugins.html

Pullquote

Pullquotes add the pull quote item as a block on the left or right of the following Mardown paragraph.

Left

1
2
3

{% pullquote left %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% endpullquote %}

will apply on the top-left corner of the paragraph that follows.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Right

1
2
3

{% pullquote right %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% endpullquote %}

will apply on the top-leftright corner of the paragraph that follows. touched-up 2017-12-12

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

Observations

• This is a reminder that I very much want a different highlighting choice. The grey on black doesn’t work.

• There are more tag plugins that might be tested. It is not clear why those are omitted from the Unit Tests. There are further variations to confirm for some of the tags.

• Spin out more tests as needed for features and changes specific to Spanner Wingnut and the intended family of nfoCentrale blogs.

• It would be useful to have a way to select different highlightings in code blocks within a single post. Perhaps there are clues to be found digging into how highlight is integrated.

• In the RSS feed, Block Quote styling is not preserved. With FeedDemon, emphasis is apparently determined by the viewer, although all features are handled. added 2017-12-14

• In the RSS feed, code blocks have no highlighting. They are presented as text lines in monospace font. added 2017-12-14

• In the RSS feed, the Gist snippet result does not appear. added 2017-12-14

• In the RSS, jsFiddle presents a rendering of the field, but jstFiddle is not used. added 2017-12-14

• In the RSS, Pullquotes don’t work. They render as separate block quotes. added 2017-12-14

This is the tenth in a series of Spanner Wingnut confirmation tests using the Hexo Unit Tests for Themes. This test is the second one produced on this day with no title.

This test is derived from the hexo-theme-unit-test no-title.md Post of 2013-12-25.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13

---
date: 2017-12-09 17:13:11
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- Landscape Theme
- Markdown
- Observations
- TODOs
---

The challenge is to see how the post remains accessible, how it appears in archives and the Recent Post lists, and how it is separated from others on the index page. For this case, it is about two no-title pages produced on the same day.

Observations

• The persistent post has its slug specified as “untitled2“ and is located at wingnut/2017/12/09/untitled2. In archives and archive-like indexes, there is no title, only a post date.

• The persistent post can be located from other locations and index entries by the post date.

• In Recent Posts, the post is identified as “(no title)”. In archive and archive-like lists, there is only the date, and the two untitled posts for December 9, 2017, each have a date-only entry.

• There is not much to complain about. The edge case works well enough. If convenient, it might be handy to use the (no title) designation in archive-like lists as well.

• I’m declaring relief that all of the title tests have been produced. Now to move on to other features.

This is the ninth in a series of Spanner Wingnut confirmation tests using the Hexo Unit Tests for Themes. This test post has no title. The test is to confirm that the post remains accessible.

This test is derived from the hexo-theme-unit-test no-title.md Post of 2013-12-25.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13

---
date: 2017-12-09 16:51:40
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- Landscape Theme
- Markdown
- Observations
- TODOs
---

The challenge is to see how the post remains accessible, how it appears in archives and the Recent Post lists, and how it is separated from others on the index page.

Observations

• The persistent post has its slug specified as “untitled“ and is located at wingnut/2017/12/09/untitled. In archives and archive-like indexes, there is no title, only a post date.

• The persistent post can be located from other locations and index entries by the post date.

• It becomes interesting to know what happens if two no-title posts are produced on the same date.

• In the RSS feed, the post is given the first heading of the page as its title. So some sort of title always appears in FeedDemon, and it links to the post article. added 2017-12-14

• At the bottom of the post article where the Newer and Older article links appear, an untitled post at Newer is listed and linked as “(no title).” In the Older position, there is no link and now text for an untitled post, bu the “Older” title will link to it. added 2017-12-14

This test is derived from the hexo-theme-unit-test long-title.md Post of 2013-12-24.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14

---
title: Hexo Unit Test - Long Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
date: 2017-12-09 16:07:37
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- Landscape Theme
- Markdown
- Observations
- TODOs
---

Observations

• Review how the title appears in Recent Posts, Archives, and the categories and tag archive-index-like pages.

• Also check how the responsive formatting is handled as the browser window is narrowed or a mobile device is used.

• It is great for this to work. Keeping titles appropriately short is preferable, of course.

• I want to adjust the Recent Posts list so that continuations on multiple lines are set off. I think using an unnumbered list will do the job best.

• The entire blog is regenerated too often. I need to determine which features can be adjusted (such as the Categories and Tags sidebar, maybe) to inhibit this. As my blogs become populated with thousands of posts, the regeneration will not be endurable, especially with the amount of material that is then synchronized.

This test is derived from the hexo-theme-unit-test link-post-without-title.md Post of 2013-12-24.

Instead of a text title, the link itself should be presented. Clicking on that “title” should open Bing in a new tab or window. Click on the date instead to get to the archive location of the post.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14

---
date: 2017-12-09 10:01:43
link: https://www.bing.com/
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- Landscape Theme
- Markdown
- Observations
- TODOs
---

Observations

• This is similar to the sixth unit test, “Hexo Unit Test - Link“ except a form of the link is expected to appear in place of the missing title.

• I find it odd that this front-matter link case occupies so much unit-test attention. In this particular link-as-title case, there might be some usefulness.

• I remain concerned that the collision of two different link cases for titles is awkward and defeats confident usability.

• It is also important to check how this form of post is listed in the archives and in category and tag lists. In this case, only the faux title appears and clicking there follows the link instead of finding the post itself. This applies to the sixth unit test also. (Clicking the date above the archive/category/tag title will find the post.)

• My conclusion is that this no-title link case is workable if there is no body to the post, only the front matter. That minimizes confusion in the situation where all one wants to provide is a link. It remains a borderline hostile act to omit any guidance that assists the reader’s determination of the prospective benefit of following the link.

• In the RSS feed, the title refers to the blog post and the link is not carried forward when viewed in FeedDemon. This also makes the link case, with or without title, inconsistent in another way. added 2017-12-14

This test is derived from the hexo-theme-unit-test “Link Post” of 2013-12-24.

Clicking on the title of the post will should open Bing in a new tab or window. Click on the date instead to get to the archive location of the post.

Code

The link specification is in the front-matter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---
title: Hexo Unit Test - Link
date: 2017-12-07 19:47:50
link: https://www.bing.com/
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- Landscape Theme
- Markdown
- Observations
- TODOs
---

Observations

• I don’t see any way to use this.

• Since clicking on the title is the standard way to access the single-page of a post, having that link go elsewhere sometimes strikes me as misleading.

• It is very subtle that the date links to the single-page of the post. I need to make two posts on the same day and confirm that is actually what happens. It might be useful to provide a finer date stamp. Or maybe simply not worry about it. expanded 2017-12-08

• The link apparently has no effect in the RSS. In FeedDemon, the title links to the blog post location. added 2017-12-14

This test requires relative addressing to particular folders of the public structure. The unit-test Gallery uses the same photos as the Wingnut Image Assets post and they are used from that post’s asset folder.

The test is derived from the hexo-theme-unit-test “Gallery” test post of 2013-12-25.

Code

The gallery is specified in the front matter here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

--
title: Gallery
date: 2017-12-04 14:41:34
photos:
- /2017/11/28/Test/wallpaper-2572384.jpg
- /2017/11/28/Test/wallpaper-2311325.jpg
- /2017/11/28/Test/wallpaper-878514.jpg
- http://placehold.it/350x150.jpg
categories:
- [Authoring, Markdown]
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
tags:
- Hexo
- images
- Landscape Theme
- Markdown
- Observations
---

Gallery Viewing

The first of the four photos shows automtatically above the title of the post page.

To view the gallery images, click on the one shown. The fancibox image window will pop out. Inside the right/left edges of the current photo pointers will appear, enabling cycling through the four images.

• Widescreen wallpaper of a cat
• Portrait orientation photo of a girl in a fruit collage
• very wide and narrow widescreen wallpaper
• smaller photo of a placeholder image

All photos should be displayed properly.

From Wallbase.cc

Observations

• The gallery and images are not reflected in the RSS Atom feed of a gallery page. This is another reason for avoiding this feature where an RSS record is important. added 2017-12-14

• The gallery view has each image fit within the browser-window. Resizing can be used to provide larger or smaller views.

• It is unclear to me whether there is much use of this in nfoCentrale blogs. Part of it has to do with the absence of captions and of any indication that a gallery is being provided.

• Because the assets location must be known, it takes a little work to get the front-matter set up. That’s not difficult, but requires iterative creation and viewing of a gallery post.

• It seems desirable to have a special gallery scaffold page. That might provide some recuring information in having the visitor understand that there is a gallery.

• I notice that, with the default landscape theme setup, if there are individual images on a page, they each pop-out as their gallery page, and the other images are in a gallery that can be cycled through from any of the pop-outs. added 2017-12-05

This test is the wingnut-specific counterpart of the hexo-theme-unit-test “Categories” test post of 2013-12-24.

Original Markdown

Categories are specified in the front-matter at the beginning of the post’s markdown.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: Hexo Unit Test - Categories
date: 2017-12-02 17:56:02
updated: 2017-12-03 15:43:00
categories:
- [Blog Development, Hexo, landscape theme]
- [blogs, Spanner Wingnut]
- [Toolcraft, JavaScript, NodeJS]
- [Authoring, Markdown, HTML, CSS]
- Golden Geek
tags:
- Categories
- TODOs
- Observations
- Hexo
---

Observations

• The established categories will be extended as needed for further posts. How this works and the use of category maps remains to be understood.

• The appearance of the category list between the date of a post and its title deserves refinement.

• When other blogs are restored, categories and tags should be operating from the beginning.

• The impact of using the “updated” property in the front-matter needs to be understood. Perhaps related to RSS feed updating?

• There is too much use of very light small caps items, and the light date on posts. Along with major features that require work and testing, these touch-ups will be important for the legibility and personality of nfoCentrale blogs.

• For the record, it is worthwhile to review posts so far and introduce tags and categories. done 2017-12-03

• Categories are touchy. It is possible to create peers at the same level
  (e.g., in the blogs category). However, changes in a categories of a post are not detected and defects will be preserved. I am looking at how to trigger post and category tree regeneration. added 2017-12-08 When fixed in the front matter, category changes are detected and reflected. Deletions will remain on the hosted site until explicitly removed, but not serious. updated 2017-12-08

• Categories (and tags) are reported in the RSS feed, although the FeedDemon reader does not make use of them. added 2017-12-14

updated 2017-12-03 to correct a heading, add tags, and record observations

The excerpt break is just below this paragraph. To see it, find this post on the main page of the blog. It is not revealed on the full-text permanent location of the post. added 2017-12-10

This test is based on the Hexo Theme Unit Test excerpts.md test file. When implemented, it has a “read more” link and the remainder of the post page is only visible on the archive version, not on the front-page of the blog.

It is not necessary to activate the use of explicit excerpts. This test confirmst that. I can do that whenever it is ever important.

One complication in explaining this text is that the break point after the intended excerpt is via HTML comment, so it could be difficult to exhibit, in the page, the MarkDown that demarks the separation between exerpt and the full body of the post.

1

<!-- more -->

Observations

• The processor of code blocks has been done in a way that there is no accidental leaking of HTML-interpreted elements. Another one of those nice touches that has me smile.

• The “Read More” link goes to a continuation point (#more) in the body of the complete post. This is a bit distracting. Consider just going to the top. On the other hand, it is unlikely that Excerpts will be used.

• The only interest in exerpts is to assure that the facility is working properly. It is unlikely that it will be used for nfoCentrale blogs.

update 2017-12-03 Added observations and made categories/tags adjustments

The test is derived from the hexo-theme-unit-test “Elements” test post of 2013-12-24.

Heading Check

This test reveals the formatting that is currently created for six levels of MarkDown/HTML headings.

The MarkDown source is simply

1
2
3
4
5
6

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Here are the formatted results

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph Formatting

These paragraphs include a variety of in-line formatting styles. To make comparison easier, the original MarkDown is broken into separate lines.

First Paragraph

1st Paragraph MarkDown Source

1
2
3
4
5
6
7
8
9
10

Lorem ipsum dolor sit amet, [test link]() consectetur adipiscing elit. 
**Strong text** pellentesque ligula commodo viverra vehicula. *Italic text* 
at ullamcorper enim. Morbi a euismod nibh. <u>Underline text</u> non elit nisl.
~~Deleted text~~ tristique, sem id condimentum tempus, metus lectus venenatis
mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis 
auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh 
egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam
id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit
ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id.
Phasellus scelerisque nunc sed nunc ultricies accumsan.

1st Paragraph Generated Text

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Second Paragraph

2nd Paragraph MarkDown Source

1
2
3
4

Interdum et malesuada fames ac ante ipsum primis in faucibus. `Sed erat diam`,
blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales 
eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus 
eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

2nd Paragraph Generated Text

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Third Paragraph - updated 2017-12-01 for wingnut

3rd Paragraph Block Quote MarkDown Source

1
2
3

> Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. 
*updated 2017-12-01* to appear as ordinary text indented.
> > *added 2017-12-01* to confirm additional indentation per level.

3rd Paragraph Generated Block Quote Text

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. updated 2017-12-01 to appear as ordinary text indented.

added 2017-12-01 to confirm additional indentation per level.

List Types

Various list types are tied to HTML elements for the same purposes. There are more variations than those checked on here. These are an essential minimum.

Definition List (dl)

Definition List Source

This is a pure insertion of HTML elements

1

<dl><dt>Definition List Title</dt><dd>This is a definition list division.</dd></dl>

Definition List Generation

Definition List Title

This is a definition list division.

Ordered List (ol)

Ordered List Markdwon

1
2
3

1. List Item 1
2. List Item 2
3. List Item 3

Ordered List Generation

1. List Item 1
2. List Item 2
3. List Item 3

Unordered List (ul)

Unordered List Markdown Source

1
2
3

- List Item 1
- List Item 2
- List Item 3

Unordered List Generation

• List Item 1
• List Item 2
• List Item 3

Table

There is more variation to be considered in the use of tables. Here is a fundamental test.

Table Markdown Source

1
2
3
4
5

| Table Header 1 | Table Header 2 | Table Header 3 |
| - | - | - |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |

Generated Table

Misc Stuff - abbr, acronym, sub, sup, etc.

Miscellaneous MarkDown Usage

These are all via HTML elements. Superscripts and Subscripts should be apparent. Some other elements might not have visible indicators except for the possibility of mouse-over indications.

MarkDown Text

1
2
3
4
5
6
7
8
9

Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer
adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
<cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero
nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis,
massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam
eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla
nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris
a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr>

Generated Text

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Observations

• Assuming that these tests all render appropriately, the styling will be adjusted to have them also be pleasant for Spanner Wingnut’s Muddleware Lab, and its sibling blogs.

  • Definition lists should have the details indented beneath the title.

  • Tables are all right. Other variants are desirable. These must be found.

updated 2017-12-03 Adding observations and adjusting categories/tags

This test verifies image inclusion from a post-specific asset folder, the folder that has the generated post/page as its index.html. The test is derived from the hexo-theme-unit-test “Image” test post of 2013-12-26.

Code

The original code is

1
2
3
4
5
6
7

![](/assets/wallpaper-2572384.jpg)

![Caption](/assets/wallpaper-2311325.jpg)

![](/assets/wallpaper-878514.jpg)

![Small Picture](http://placehold.it/350x150.jpg)

For Spanner Wingnut, there is no common assets folder at the blog location. Instead, the three local test images are moved to the spanner/source/_posts/Test/ folder, corresponding to the spanner/source/_posts/Test.md file that has the source text of this blog post.

To use those assets properly, the code becomes

1
2
3
4
5
6
7

{% asset_img wallpaper-2572384.jpg "1920 x 1200 kitten" %}

{% asset_img wallpaper-2311325.jpg "1383 x 1858 fruit cup girl !?" %}

{% asset_img wallpaper-878514.jpg "3840 x 1200 waterfront cityscape" %}

![350 x 150 gray "placeholder" block](http://placehold.it/350x150.jpg)

No provision for positioning, scaling or anything else is included. The test is for minimal and simple inclusion of images.

For an existing rendition of the test, see the Theme Anatole Demo Images page.

Resulting Images

Note the captions. They are also the mouse-over titles. Also, the images are all sized to the article width. The Fancybox pop-out view can be seen by clicking on individual images. Resizing the blog page allows the higher-resolution pop-out images to expand to their full resolution. Try that on the cityscape.

Observations

• Specify links in images - I suppose in the captions if fancybox is kept.

• Specify position, sizings, and margins in some straightforward manner

• Specify Alt Text

• Have better formatting for the Captions/Titles.

• Find out how to accomplish this with parameters on {$ items or find appropriate HTML tagging to apply when these matter. I definitely want to operate with post-specific assets and not global ones.

  That’s all for now.

  update 2017-12-03 Adjust categories/tags and observations.

Work on adapting Hexo is documented on Orcmid’s Live Hideout and its Hexo tag. Candidate improvements will be reflected in blog updates here as the work progresses.

Several provisions remain to be resolved.

• Changing the highlighting of code blocks to something not so contrasty and unfavorable to soft/light colors
• Changing the blog page header-block and banner image for something smaller and with all text easy to read done 2017-11-26
• Addition of a favicon different than the default
• Producing the Atom RSS feed with preservation of pre-Hexo feeds. done 2017-12-12 keeping the new feed separate
• Tying in the previous blog archives and feeds as they remain preserved and accessible
• Removing the search button and feature
• Removing instrumentation and tracking (e.g., Google Analytics)
• Incorporating images in posts and pages done 2017-11-28
• Enabling categories done 2017-12-02
• Enabling tags done 2017-11-28
• Removing tag cloud support done 2017-11-29
• Adding MathJax for mathematical formulas
• Changing the Archive layout from a tiled format to a simple list format.
• Determining how internationalization works, when needed.
• Providing necessary accessibility support.

Some changes require clean regeneration of the blog. Previous posts can be altered/updated as a result. What is working already are basic posts, supporting pages, blog comments via Disqus, and the ability to share on social networks. That’s enough for starters.

Bring your hard hat and goggles if you wander out onto the scaffolding here.

updated 2017-12-03 Adjust categories/tages, manage TODOs

This preface is added to explain the unique status of this page. Experiments with this Spanner Wingnut blog confirm features and styling before introducing them to other blogs in the nfoCentrale family.

For more information about these activities, see About.

– Dennis E. Hamilton, 2017-11-12
update 2017-11-13 to relocate About folder to hexo-about/.
update 2017-11-17 to have About link in page headers.
update 2017-12-03 to retrofit categories/tags and format improvements so far.

Check documentation for more info. If you have any problems when using Hexo, check the troubleshooting tips. You can also report any issues on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment