Using customizer plugin to modify topic view


  • Hi all. I want to use nodebb-plugin-customizer to modify the topic template. Essentially, I'm looking to add a wrapper div (identified as <div class="hero">, so the modified topics template would then look like this

    <!-- IF breadcrumbs.length -->
    <div class="hero"> 
    <ol class="breadcrumb" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
    	{{{each breadcrumbs}}}
    	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" <!-- IF @last -->class="active"<!-- ENDIF @last -->>
    		<meta itemprop="position" content="{@index}" />
    		<!-- IF !@last --><a href="{breadcrumbs.url}" itemprop="item"><!-- ENDIF !@last -->
    			<span itemprop="name">
    				{breadcrumbs.text}
    				<!-- IF @last -->
    				<!-- IF !feeds:disableRSS -->
    				<!-- IF rssFeedUrl --><a target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss-square"></i></a><!-- ENDIF rssFeedUrl --><!-- ENDIF !feeds:disableRSS -->
    				<!-- ENDIF @last -->
    			</span>
    		<!-- IF !@last --></a><!-- ENDIF !@last -->
    	</li>
    	{{{end}}}
    </ol>
    <!-- ENDIF breadcrumbs.length -->
    
    <div class="row">
    	<div class="topic col-lg-12 col-sm-12" data-has-widget-class="topic col-lg-9 col-sm-12" data-has-widget-target="sidebar">
    
    		<h1 component="post/header" class="hidden-xs">
    			<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="{{{ if !pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {pinExpiryISO}]]{{{ end }}}"></i>
    			<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
    			<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
    			<!-- BEGIN icons -->@value<!-- END icons -->
    			<span class="topic-title" component="topic/title">{title}</span>
    		</h1>
    
    		<!-- IF merger -->
    		<div component="topic/merged/message" class="alert alert-warning clearfix">
    			<span class="pull-left">[[topic:merged_message, {mergeIntoTid}, {merger.mergedIntoTitle}]]</span>
    			<span class="pull-right">
    				<a href="{config.relative_path}/user/{merger.userslug}">
    					<strong>{merger.username}</strong>
    				</a>
    				<small class="timeago" title="{mergedTimestampISO}"></small>
    			</span>
    		</div>
    		<!-- ENDIF merger -->
    
    		<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted --> clearfix">
        <span class="pull-left">[[topic:deleted_message]]</span>
        <span class="pull-right">
            <!-- IF deleter -->
            <a href="{config.relative_path}/user/{deleter.userslug}">
                <strong>{deleter.username}</strong>
            </a>
            <small class="timeago" title="{deletedTimestampISO}"></small>
            <!-- ENDIF deleter -->
        </span>
    </div>
    </div>
    

    I've saved the template, rebuilt nodebb, but it never appears. Am I modifying the right template ? From looking at the enclosed HTML, this does seem to match what I have in the template.

    An example of the topic I'm looking to target is here
    https://www.phenomlab.com/topic/167/22-of-pc-users-still-running-end-of-life-windows-7-os


  • Never mind - after looking at the slick theme, I realised that partials/breadcrumbs is being included at the top of the file, so this is the intended target 🙂

Suggested Topics

  • 3
  • 6
  • 3
  • 2
  • 4
| |