Using Template Comments to layout rendered html.

  • Hi,


    I'm looking for some help with Template Comments, specifically how I can use them to make my rendered code look prettier. I know this is a bit trivial, however, I have noticed an effect of SEO, plus if any other devs look at the code. I don't want them thinking I didn't even try :P


    My Example is this.


    Screenshot%202019-02-19%2011.23.36.png?dl=0


    Line 238 has a <ul> butted up against the closing </ul>. And then there are gaps on lines 240 and 242. And finally a closing </div> which should be on the next line down. And this is as good as I can get it currently. Gaps always appear when using <perch:if>.


    The above is from my Footer which pulls in a template for these social links. Here is my code.


    I have had some successes using this method, however, this isn't working for the above. Is there a specific way I should be using Template Comments to remove gaps, and line up code :?:

  • The importance of well indented markup is to make it easy to read and maintain without errors. So the place where it really matters is in your templates, not in the compiled HTML output. If you mess up your templates to try and get the output to be formatted nicely then you're defeating the purpose and actively making the situation worse.


    I have noticed an effect of SEO

    :/


    Never say never, but I couldn't be more skeptical about that.


    If you really must do this, so be it. The Perch template engine will remove any tags from where they stand in your template. If a </perch:if> tag is on a line on its own, once it's removed you'll be left with an empty line. Why is that? Because there's all sorts of places where whitespace matters, and so Perch tags try to be non-destructive to the context they're used it.


    The exception is comments - because they're completely optional and have no functionality of their own. Removal of a comment expands to encompass whitespace around it. That includes spaces, tabs and new lines.


    Having two comments together like this:


    Code
    1. <!--* END PERCH IFs *-->
    2. <!--* PERCH IFs *-->

    ... will do nothing more than a single comment, except burn a few more CPU cycles.


    Comments get removed pretty much first before any other tags are parsed. So if there's whitespace left by any other template tags, that will not get swallowed up by the comments.


    Taking an example, this part of the template:


    Code
    1.     <!--* PERCH IFs *-->
    2.     <perch:if exists="instagram">
    3.     <li>

    If I use § to represent areas of whitespace, that really looks something like:


    Code
    1. §§§§<!--* PERCH IFs *-->§§§§
    2. §§§§<perch:if exists="instagram">§§§§
    3. §§§§<li>

    Once the comments are removed, the comments swallow any neighbouring whitespace, so you get this:

    Code
    1. <perch:if exists="instagram">§§§§
    2. §§§§<li>

    Then if the perch:if tag is parsed and removed, you'll get this:

    Code
    1. §§§§
    2. §§§§<li>

    Which is why you're seeing whitespace in your output.