Links that open in new window or tab?

Archive
1

Is there anything within Grav to support links within a markdown file to be opened in a new window or tab? I know I could include chunks of HTML, but I was hoping for something I could use with just Markdown.

Thanks,
Paul

2

No, that’s not support in markdown syntax and it’s generally frowned upon to use target anyway.
However if you need to do so, you can simply use HTML:

<a href="http://www.google.com" target="_blank">Test</a>
3

Thanks Andy.

Would I be correct in thinking that one workaround to having to use HTML within the md files would be to include links and title text in a page header, and then through my Twig template display as links and use the target attribute?

I am looking at many many small pages with links that I would like to open in a new window/tab, so trying to keep the text of those pages as simple as possible.

4

If you know those layouts are structured enough that you can output those links in a defined way.

Another alternative is to use markdown_extra to set a class like { .external } and then use a JavaScript to convert those links with that class to have a target:

$("a.external").attr("target","_blank");

Or if the target of those links is consistent and known, you can use that and not even bother with the .external class

5

That alternative approach is brilliant Andy!

My end-goal is to share a working skeleton of this site if I can get it going - where in the site folder structure would it be best to add that bit of Javascript?

Thank you,
Paul

6

Anywhere really. You can add it via addInlineJs() method or in a js file and just use addJs() to add that file. Look at antimatter for examples of this.

7

Ok, I am already using the (awesome) theme inheritance feature with the bootstrap theme, so I am trying to add the needed JS somewhere in that same ‘mytheme’ folder.

I can see CS changes made to mytheme (clearing cache as needed) ok, but so far I’ve tried adding the JS in several places and it does not seem to change the behaviour of the link, as included below:

-   [A Gentle Introduction to Agile](http://www.drdobbs.com/jvm/a-gentle-introduction-to-agile/240164649) {.external}

I’ve got in markdown extra: true, and in mytheme->templates->partials->base.html.twig I’ve added an assets add for the file my.js:

            {% do assets.add('theme://js/jquery-2.1.1.min.js', 101) %}
            {% do assets.add('theme://js/modernizr.custom.71422.js', 100) %}
            {% do assets.add('theme://js/bootstrap.min.js') %}
        
            {% do assets.add('theme://js/my.js') %}

            {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
                {% do assets.add('https://oss.ma xcdn.com/respond/1.4.2/respond.min.js') %}
                {% do assets.add('theme://js/html5shiv-printshiv.min.js') %}
            {% endif %}

            {{ assets.js() }}
        {% endblock %}

and in the file mytheme -> js -> my.js I’ve got:

$("a.external").attr("target","_blank");

Is there something I’ve got wrong or am I barking up the wrong tree?

Thanks very much,
Paul

8

If you inspect/view source on the page, is the my.js file being loaded?

9

It looks like it… here is the related chunk of code I see via view source:

<script src="/grav/user/themes/mytheme/js/modernizr.custom.71422.js" type="text/javascript" ></script>
<script src="/grav/user/themes/mytheme/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="/grav/user/themes/mytheme/js/my.js" type="text/javascript" ></script>
10

That JS from rhukster needs to be wrapped into a domready function as you need the DOM to be available before you can change the target to the links.

The full code should be like this:

$(document).ready(function(){
    $("a.external").attr("target","_blank");
});
11

Can confirm this works, just tested it.

12

Bingo! Thanks very much w00fz and Andy, that works like a charm.