How to use a ColdFusion Component to re-use code?

Question

I'm trying to put together a footer in ColdFusion using a component. I want to be able to re-use the footer throughout my application, but only have to write the footer HTML once.

Here's what I have so far, but I'm unable to output the content.

<cfcomponent>
    <cffunction name="getFooter" access="public" returntype="string" output="yes">
        <footer>
            <div class="row text-center">
                <div class="col-sm-12">
                    Copyright © 2020 Company Name | <a href="#" data-toggle="modal" data-target="#msgPrivacy"> Security and Privacy </a>
                </div>
            </div>
        </footer>
    </cffunction>
</cfcomponent>

<cfoutput>
    #getFooter#
</cfoutput>

I created a cffidle here.

Answer 1

Footer.cfc

<cfcomponent>
    <cffunction name="getFooter" access="public" returntype="string" output="no" >
        <!--- chr(169) is the copyright symbol --->
        <cfset var footer= 
            '<footer>
                <div class="row text-center">
                    <div class="col-sm-12">
                        Copyright #chr(169)# 2020 Company Name | <a href="##" data-toggle="modal" data-target="##msgPrivacy"> Security and Privacy </a>
                    </div>
                </div>
            </footer>'>
        <cfreturn footer>
    </cffunction>
</cfcomponent>

testPage.cfm

<!---<cfprocessingdirective pageencoding="utf-8">---> <!---Optional, as UTF-8 encoding is usually the default --->
<cfset footerObject=new Footer()>
<cfset footer=footerObject.getFooter()>
<cfoutput>#footer#</cfoutput>

Answer 2

wrap the code like this

<cfcomponent>
    <cffunction name="getFooter" access="public" returntype="string" output="yes">
<cfsavecontent variable="footer">   
<cfoutput>     
<footer>
            <div class="row text-center">
                <div class="col-sm-12">
                    Copyright © 2020 Company Name | <a href="##" data-toggle="modal" data-target="##msgPrivacy"> Security and Privacy </a>
                </div>
            </div>
        </footer>
</cfoutput>
</cfsavecontent>
<cfreturn footer>
    </cffunction>
</cfcomponent>

<cfoutput>
    #getFooter()#
</cfoutput>