How to pass page title and link to href

Semih_Ural · August 3, 2021, 5:09am

Hi,

I’ve a feedback button and i passed the link as below in config.toml.

Is it possible to pass page title and link to the below href ? I mean TITLE should be the title of page and LINK should be the link of hugo page.

[params.ui.feedback]

enable = true

# The responses that the user sees after clicking "yes" (the page was helpful) or "no" (the page was not helpful).
yes = 'Glad to hear it!'
no = 'Sorry to hear that. Please <a href="https://mydomain.com/new-topic?tags=documentation&title=Documentation%20feedback%20for%20{{TITLE}}&body=Link:%20{{LINK}}%0AFeedback:%20">tell us how we can improve</a>.'

jmooring · August 4, 2021, 6:01am

No, not within a configuration file or within frontmatter.

You’ll have to insert the values on the template page using printf or querify.

Semih_Ural · September 28, 2021, 6:36am

@jmooring

Is it possible to give an example if you dont mind? Cause seems the link is pass from config file as below

<div class="td-content">
	<h1>{{ .Title }}</h1>
    {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
	{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}
        {{ partial "reading-time.html" . }}
    {{ end }}       
	{{ .Content }}
	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
		{{ partial "feedback.html" .Site.Params.ui.feedback }}
		<br />
	{{ end }}
	<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
</div>

partial.html


</style>
<div class="d-print-none">
  <h2 class="feedback--title">Feedback</h2>
  <p class="feedback--question">Was this page helpful?</p>
  <button class="feedback--answer feedback--answer-yes btn btn-secondary btn-md">Yes</button>
  <button class="feedback--answer feedback--answer-no btn btn-secondary btn-md">No</button>
  <p class="feedback--response feedback--response-yes">
    {{ .yes | safeHTML }}
  </p>
  <p class="feedback--response feedback--response-no">
    {{ .no | safeHTML }}
  </p>
</div>
<script>

jmooring · September 28, 2021, 8:40pm

OK, I figured out how to do this, but it’s not simple.

config.toml

[params.ui.feedback]
enable = true

# The responses that the user sees after clicking "yes" (the page was helpful) or "no" (the page was not helpful).
yes = 'Glad to hear it!'
no = 'Sorry to hear that. Please <a href="https://mydomain.com/new-topic?tags=documentation&title=Documentation%20feedback%20for%20{{ .Title }}&body=Link:%20{{ .RelPermalink }}%0AFeedback:%20">tell us how we can improve</a>.'

template

{{ partial "feedback.html" . }}

layouts/partials/feedback.html

<div class="d-print-none">
  <h2 class="feedback--title">Feedback</h2>
  <p class="feedback--question">Was this page helpful?</p>
  <button class="feedback--answer feedback--answer-yes btn btn-secondary btn-md">Yes</button>
  <button class="feedback--answer feedback--answer-no btn btn-secondary btn-md">No</button>
  <p class="feedback--response feedback--response-yes">
    {{ $yes := resources.FromString "yes.txt" site.Params.ui.feedback.yes }}
    {{ $yes = $yes | resources.ExecuteAsTemplate "yes.txt" . }}
    {{ $yes.Content | safeHTML }}
  </p>
  <p class="feedback--response feedback--response-no">
    {{ $no := resources.FromString "no.txt" site.Params.ui.feedback.no }}
    {{ $no = $no | resources.ExecuteAsTemplate "no.txt" . }}
    {{ $no.Content | safeHTML }}
  </p>
</div>

Semih_Ural · September 29, 2021, 5:53am

@jmooring

Appreciate for your support. I tried but seems it could not able to get value. When I inspect the href, it parses <no value>

<a href="https://oneapi-discourse.dot.daimler.com/new-topic?tags=documentation&title=Documentation%20feedback%20for%20<no value>&body=Link:%20<no value>%0AFeedback:%20">tell us how we can improve</a>.

Here what I did.

config.toml

[params.ui.feedback]
enable = true
yes = 'Glad to hear it!'
no = 'Sorry to hear that. Please <a href="https:/mydomain.com/new-topic?tags=documentation&title=Documentation%20feedback%20for%20{{ .Title }}&body=Link:%20{{ .RelPermalink }}%0AFeedback:%20">tell us how we can improve</a>.'

list.html

{{ define "main" }}
<div class="td-content">
  <h1>{{ .Title }}</h1>
  {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
  {{ .Content }}
  {{ partial "section-index.html" . }}
  {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
  {{ partial "feedback.html" . }}
  <br />
  {{ end }} 
  {{ if (.Site.DisqusShortname) }}
  <br />
   {{ partial "disqus-comment.html" . }}
   {{ end }}
    <div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
</div>
{{ end }}

partial.html

<div class="d-print-none">
  <h2 class="feedback--title">Feedback</h2>
  <p class="feedback--question">Was this page helpful?</p>
  <button class="feedback--answer feedback--answer-yes btn btn-secondary btn-md">Yes</button>
  <button class="feedback--answer feedback--answer-no btn btn-secondary btn-md">No</button>
  <p class="feedback--response feedback--response-yes">
    {{ $yes := resources.FromString "yes.txt" site.Params.ui.feedback.yes }}
    {{ $yes = $yes | resources.ExecuteAsTemplate "yes.txt" . }}
    {{ $yes.Content | safeHTML }}
  </p>
  <p class="feedback--response feedback--response-no">
    {{ $no := resources.FromString "no.txt" site.Params.ui.feedback.no }}
    {{ $no = $no | resources.ExecuteAsTemplate "no.txt" . }}
    {{ $no.Content | safeHTML }}
  </p>
</div>
<script>
  const yesButton = document.querySelector('.feedback--answer-yes');
  const noButton = document.querySelector('.feedback--answer-no');
  const yesResponse = document.querySelector('.feedback--response-yes');
  const noResponse = document.querySelector('.feedback--response-no');
  const disableButtons = () => {
    yesButton.disabled = true;
    noButton.disabled = true;
  };

jmooring · September 29, 2021, 6:43pm

I suspect the context (the dot) is not the page.

It would be easier to help you if you were to share your code. See:
https://discourse.gohugo.io/t/requesting-help/9132

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

Semih_Ural · September 30, 2021, 7:03am

@jmooring

What do you mean the dot is not the page

{{ partial “feedback.html” . }}

Here you can clone the repo.Your help will be appreciated.

Best Regards,
Semih Ural

jmooring · September 30, 2021, 2:53pm

diff --git a/config/config/config.toml b/config/config/config.toml
index 5033b3f..189dcf7 100644
--- a/config/config/config.toml
+++ b/config/config/config.toml
@@ -146,7 +146,7 @@ footer_about_disable = true
 [params.ui.feedback]
 enable = true
 yes = 'Glad to hear it!'
-no = 'Sorry to hear that. Please <a href="https://oneapi-discourse.dot.daimler.com/new-topic?tags=documentation&title="Documentation%20feedback%20for%20TEST"&body=Link:%20%0AFeedback:%20>tell us how we can improve</a>.'
+no = 'Sorry to hear that. Please <a href="https:/mydomain.com/new-topic?tags=documentation&title=Documentation%20feedback%20for%20{{ .Title }}&body=Link:%20{{ .RelPermalink }}%0AFeedback:%20">tell us how we can improve</a>.'
 
 [params.ui.readingtime]
 enable = true
diff --git a/layouts/_default/content.html b/layouts/_default/content.html
index 22f6889..5085101 100644
--- a/layouts/_default/content.html
+++ b/layouts/_default/content.html
@@ -6,7 +6,7 @@
     {{ end }}
        {{ .Content }}
        {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
-               {{ partial "feedback.html" .Site.Params.ui.feedback }}
+               {{ partial "feedback.html" . }}
                <br />
        {{ end }}
        <div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index b8394e0..a92c66d 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -8,7 +8,7 @@
        {{ .Content }}
         {{ partial "section-index.html" . }}
        {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
-               {{ partial "feedback.html" .Site.Params.ui.feedback }}
+               {{ partial "feedback.html" . }}
                <br />
        {{ end }}
        {{ if (.Site.DisqusShortname) }}

With these changes, when I run hugo server -e config this page looks fine:

http://localhost:1313/config/docs/introduction/api-management/

Semih_Ural · September 30, 2021, 4:25pm

@jmooring
worked like a charm! Great work! Appreciate for your kind support

system · October 2, 2021, 4:25pm

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.