I actually managed to get the pipe approach to work.

[do-kevin]

          I actually managed to get the pipe approach to work.

The trick is to surround the whole value in quotes. The pipe character is already used in YAML, so surrounding in quotes tells YAML to ignore parsing it. Then pug parses it like it normally would.

// my-sample-post.pug
---
title: My Sample Post
layout: default
permalink: " | link/index.html"
---

p This is some text

---

The trouble I was facing in the past was in using pagination to map an array of global data objects to individual pages. product-x.pug should generate a single page for every product in the site.

---
pagination:
  data: products // these come from _data/products.js which calls a third-party api
  size: 1
  alias: product
permalink: "| products/#{ product.slug }/index.html"
---
extends /layouts/main.pug

block title
  | #{ product.title }

block main
  h1= product.title
  p= product.description
  p Your Price: $#{ product.price }

(edit)

Results in a page for each product, i.e.

/products/some-tee-shirt/index.html
/products/nifty-acme-sticker/index.html
/products/alphabet-soup/index.html

Originally posted by @jevets in https://github.com/11ty/eleventy/issues/286#issuecomment-436247985

[do-kevin]

So what we can do for your detail.pug is:

---
pagination:
    data: prismic.products
    size: 1
    alias: product
permalink: "| detail/#{ product.uid }/index.html"
layout: base
---
block variables
    - var template = "detail";

block content
    div= `${JSON.stringify(product.slug)}`
    .detail 
        .detail__wrapper 
            figure.test