Conrefs

Content reference (conref) is the action of "calling" a piece of content located in another file. The "called" content gets placed in toto, word-for-word, image-for-image, comma-for-comma, at the location where it was called, as if the content had been written in the calling file itself. This page contains an example implementation for the conref.js file, and the instructions for using it in your help files.

How to implement conrefs

Conrefs in HTML do not seem to work for anchor tags in another file (abc.html#xyz), which means discrete blocks of content from file A cannot be called by file B (the entire file needs to be called). Calling anchor tags within a file works fine. Also, conrefs seem to work only within the same directory. The third caveat is that links in conref-ed content are rendered link-less at the place where they're called. The final gotcha: calling file A from file B does not work sometimes on a local drive (but always works if both files are on a server).

If you're fine with all that, read on for instructions:

  1. Include the following code within the "head" tag of the HTML file:
    	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    	<script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    	<script type="text/javascript" src="../scripts/conref.js"></script>
  2. To reuse a block of content within the same file:
    1. For the block that contains the content to be called, give an ID attribute, like this:
      	<p id = "reusable">Lorem lorem lorem<div>	
    2. Specify this ID in the content.js Javascript file and give it a calling class. The file is commented to show you where and how you need to do the changes. Here is an example:
      	$("#reusable" ).clone().appendTo( ".caller" )
    3. At the place where the content is to be called, create an empty block of the same element type as the conref, and call the content by giving it the class that you specified in step 2, like this:
      	<p class = "caller"><div>
  3. To reuse another file:
    1. At the place where the content is to be called, create a block element such as <p> or <div> and give it an ID, like this:
      	<p id = "mydiv1"><div>
    2. Specify this ID in the content.js Javascript file and link it to the html file that is to be called. The file is commented to show you where and how you need to do the changes. Here's an example (where the contents of the ref_content.html file is being linked to a has ID mydiv1):
      	$('#mydiv1').load('ref_content.html');

Example of conrefs in action

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aah ko chaahiye ik umr asar hone tak, kaun jeeta hai teree zulf ke sar hone tak. Bas ki dushwaar hai har kaam ka aasaan hona, admi ko bhi muyassar naheen insaan hona. Chand tasveer-e-buta, chand haseeno ke khatoot, bad marne ke mere ghar se ye saaman nikla.

The immediately following paragraph calls the immediately preceding Lorem Ipsum paragraph.

The following content is called from another file.