Whatever message this page gives is out now! Go check it out!
<cfinclude
template = "template name"
runOnce = "true|false">| Attribute | Req/Opt | Default | Description |
template | Required | A logical path to a ColdFusion page. | |
runOnce | Optional | false | If set to true, the given template (if already processed) is not processed again for a given request. |
<cfinclude template="myinclude.cfm">
<cfinclude template="../myinclude.cfm">
<cfinclude template="/CFIDE/debug/myinclude.cfm"><cfinclude template="C:\ColdFusion\wwwroot\doccomments\myinclude.cfm">
<cfinclude template="http://localhost:8500/doccomments/myinclude.cfm"><cfset templatetouse="../header/header.cfm">
<cfinclude template="#templatetouse#"><!--- main.cfm --->
<cfinclude template="header.cfm">
<p>
Welcome to my cfinclude demo!
</p>
<cfinclude template="footer.cfm"><p>
Sample header!
</p><p>
Sample footer!
</p><!--- Page-specific data --->
<cfset pageTitle = "Employee Dashboard">
<cfset currentSection = "dashboard">
<cfset userName = "Sarah Johnson">
<cfset userDepartment = "Marketing">
<cfset userRole = "Senior Manager">
<!--- Include shared header --->
<cfinclude template="header.cfm">
<!--- Include shared navigation --->
<cfinclude template="navigation.cfm">
<!--- Main content area --->
<div class="main-content">
<div class="content-wrapper">
<h1>Welcome back, <cfoutput>#userName#</cfoutput>!</h1>
<div class="dashboard-grid">
<div class="widget">
<div class="widget-icon">📊</div>
<div class="widget-content">
<h3>My Tasks</h3>
<div class="widget-value">12</div>
<p>Pending items</p>
</div>
</div>
<div class="widget">
<div class="widget-icon">📅</div>
<div class="widget-content">
<h3>Meetings Today</h3>
<div class="widget-value">3</div>
<p>Scheduled</p>
</div>
</div>
<div class="widget">
<div class="widget-icon">📧</div>
<div class="widget-content">
<h3>Unread Messages</h3>
<div class="widget-value">8</div>
<p>In your inbox</p>
</div>
</div>
<div class="widget">
<div class="widget-icon">🎯</div>
<div class="widget-content">
<h3>Goals Progress</h3>
<div class="widget-value">75%</div>
<p>Quarterly targets</p>
</div>
</div>
</div>
<div class="recent-activity">
<h2>Recent Activity</h2>
<div class="activity-list">
<div class="activity-item">
<span class="activity-time">2 hours ago</span>
<span class="activity-desc">Completed project proposal review</span>
</div>
<div class="activity-item">
<span class="activity-time">5 hours ago</span>
<span class="activity-desc">Attended team standup meeting</span>
</div>
<div class="activity-item">
<span class="activity-time">Yesterday</span>
<span class="activity-desc">Submitted expense report for approval</span>
</div>
</div>
</div>
<div class="info-box">
<h3>💡 How cfinclude Works Here</h3>
<p>
This page uses <strong>cfinclude</strong> to embed three shared components:
</p>
<ul>
<li><code><cfinclude template="includes/header.cfm"></code> - Corporate header with logo</li>
<li><code><cfinclude template="includes/navigation.cfm"></code> - Main navigation menu</li>
<li><code><cfinclude template="includes/footer.cfm"></code> - Footer with links and copyright</li>
</ul>
<p>
All pages in the portal include these same files, ensuring consistency.
When marketing updates the logo in header.cfm, it automatically appears
on all 200+ portal pages instantly!
</p>
</div>
</div>
</div>
<!--- Include shared footer --->
<cfinclude template="footer.cfm"><style>
.main-nav { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.nav-content { max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; gap: 30px; }
.nav-item { padding: 15px 0; color: ##333; text-decoration: none;
font-weight: 500; border-bottom: 3px solid transparent;
transition: all 0.3s; cursor: pointer; }
.nav-item:hover { color: ##1e3c72; border-bottom-color: ##1e3c72; }
.nav-item.active { color: ##1e3c72; border-bottom-color: ##1e3c72; }
</style>
<nav class="main-nav">
<div class="nav-content">
<cfoutput>
<a href="##" class="nav-item #currentSection EQ 'dashboard' ? 'active' : ''#">
🏠 Dashboard
</a>
<a href="##" class="nav-item #currentSection EQ 'hr' ? 'active' : ''#">
👥 HR Portal
</a>
<a href="##" class="nav-item #currentSection EQ 'it' ? 'active' : ''#">
💻 IT Support
</a>
<a href="##" class="nav-item #currentSection EQ 'finance' ? 'active' : ''#">
💰 Finance
</a>
<a href="##" class="nav-item #currentSection EQ 'projects' ? 'active' : ''#">
📊 Projects
</a>
</cfoutput>
</div>
</nav>
<style>
.main-content { max-width: 1200px; margin: 30px auto; padding: 0 20px; }
.content-wrapper { background: white; padding: 30px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; margin: 30px 0; }
.widget { background: linear-gradient(135deg, ##667eea 0%, ##764ba2 100%);
color: white; padding: 25px; border-radius: 10px; display: flex;
align-items: center; gap: 20px; }
.widget-icon { font-size: 48px; }
.widget-content h3 { font-size: 14px; opacity: 0.9; margin-bottom: 10px; }
.widget-value { font-size: 36px; font-weight: bold; }
.widget-content p { font-size: 12px; opacity: 0.8; }
.recent-activity { margin-top: 30px; }
.activity-list { margin-top: 15px; }
.activity-item { padding: 15px; background: ##f8f9fa; border-left: 4px solid ##667eea;
margin-bottom: 10px; border-radius: 5px; }
.activity-time { font-weight: bold; color: ##667eea; margin-right: 15px; }
.info-box { background: ##e7f3ff; padding: 20px; border-radius: 10px;
border-left: 4px solid ##1e3c72; margin-top: 30px; }
.info-box h3 { color: ##1e3c72; margin-bottom: 15px; }
.info-box ul { margin-left: 20px; margin-top: 10px; }
.info-box code { background: ##fff; padding: 3px 8px; border-radius: 3px;
color: ##e74c3c; font-family: 'Courier New', monospace; }
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<cfoutput><title>#pageTitle# - Corporate Portal</title></cfoutput>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: ##f5f5f5; }
.site-header { background: linear-gradient(135deg, ##1e3c72 0%, ##2a5298 100%);
color: white; padding: 20px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.header-content { max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 28px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
.user-info { display: flex; align-items: center; gap: 15px; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%;
background: white; color: ##1e3c72; display: flex;
align-items: center; justify-content: center; font-weight: bold; }
.user-details { text-align: right; }
.user-name { font-weight: bold; }
.user-role { font-size: 12px; opacity: 0.9; }
</style>
</head>
<body>
<header class="site-header">
<div class="header-content">
<div class="logo">
🏢 <span>ACME Corporation</span>
</div>
<div class="user-info">
<div class="user-details">
<cfoutput>
<div class="user-name">#userName#</div>
<div class="user-role">#userDepartment# - #userRole#</div>
</cfoutput>
</div>
<div class="user-avatar">
<cfoutput>#left(userName, 1)#</cfoutput>
</div>
</div>
</div>
</header><style>
.site-footer { background: ##2c3e50; color: white; margin-top: 50px; padding: 30px 0; }
.footer-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px; margin-bottom: 30px; }
.footer-section h4 { margin-bottom: 15px; color: ##3498db; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: ##ecf0f1; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: ##3498db; }
.footer-bottom { border-top: 1px solid ##34495e; padding-top: 20px;
text-align: center; font-size: 14px; color: ##95a5a6; }
</style>
<footer class="site-footer">
<div class="footer-content">
<div class="footer-grid">
<div class="footer-section">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="##">Employee Directory</a></li>
<li><a href="##">Company Calendar</a></li>
<li><a href="##">Policies & Procedures</a></li>
<li><a href="##">Benefits Information</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul class="footer-links">
<li><a href="##">IT Help Desk</a></li>
<li><a href="##">Training Portal</a></li>
<li><a href="##">Travel Booking</a></li>
<li><a href="##">Expense Reports</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Support</h4>
<ul class="footer-links">
<li><a href="##">Submit a Ticket</a></li>
<li><a href="##">FAQ</a></li>
<li><a href="##">Contact HR</a></li>
<li><a href="##">Emergency Contacts</a></li>
</ul>
</div>
<div class="footer-section">
<h4>About</h4>
<ul class="footer-links">
<li><a href="##">Company News</a></li>
<li><a href="##">Leadership Team</a></li>
<li><a href="##">Careers</a></li>
<li><a href="##">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<cfoutput>
<p>© #year(now())# ACME Corporation. All rights reserved.</p>
<p style="margin-top: 10px; font-size: 12px;">
Last updated: #dateFormat(now(), "mmmm d, yyyy")# |
Powered by ColdFusion cfinclude
</p>
</cfoutput>
</div>
</div>
</footer>
</body>
</html><cfparam name="url.campaign" default="welcome">
<!--- Campaign-specific content --->
<cfswitch expression="#url.campaign#">
<cfcase value="welcome">
<cfset emailSubject = "Welcome to Our Community!">
<cfset heroHeading = "Welcome Aboard!">
<cfset heroSubheading = "We're thrilled to have you join our community">
<cfset heroImage = "🎉">
<cfset ctaText = "Get Started Now">
<cfset ctaLink = "##onboarding">
<cfset contentText = "Thank you for joining us! We've prepared a special welcome guide to help you get the most out of your experience.">
</cfcase>
<cfcase value="promo">
<cfset emailSubject = "Exclusive 30% Off - Limited Time!">
<cfset heroHeading = "Flash Sale!">
<cfset heroSubheading = "Save 30% on all products this weekend only">
<cfset heroImage = "🔥">
<cfset ctaText = "Shop Now">
<cfset ctaLink = "##shop">
<cfset contentText = "Don't miss out on our biggest sale of the season. Use code SAVE30 at checkout. Offer ends Sunday at midnight!">
</cfcase>
<cfcase value="newsletter">
<cfset emailSubject = "Your Monthly Update">
<cfset heroHeading = "Newsletter">
<cfset heroSubheading = "What's new this month">
<cfset heroImage = "📰">
<cfset ctaText = "Read More">
<cfset ctaLink = "##news">
<cfset contentText = "Catch up on the latest product updates, industry insights, and tips from our expert team.">
</cfcase>
</cfswitch>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<cfoutput><title>#emailSubject#</title></cfoutput>
<style>
body { font-family: Arial, sans-serif; background: ##f4f4f4; margin: 0; padding: 20px; }
.email-preview { max-width: 800px; margin: 0 auto; background: white; }
.preview-toolbar { background: ##2c3e50; color: white; padding: 15px 20px;
border-radius: 5px 5px 0 0; }
.campaign-selector { margin-bottom: 20px; text-align: center; }
.campaign-btn { background: ##3498db; color: white; padding: 10px 20px;
margin: 0 5px; border: none; border-radius: 5px;
text-decoration: none; display: inline-block; }
.campaign-btn:hover { background: ##2980b9; }
.info-panel { background: ##e7f3ff; padding: 20px; margin: 20px 0;
border-left: 4px solid ##3498db; border-radius: 5px; }
.component-label { background: ##f39c12; color: white; padding: 5px 10px;
font-size: 12px; font-weight: bold; margin: 10px 0;
display: inline-block; }
</style>
</head>
<body>
<div class="campaign-selector">
<h2>Email Template Assembly Demo</h2>
<p>Select a campaign type to see modular email assembly:</p>
<a href="?campaign=welcome" class="campaign-btn">Welcome Email</a>
<a href="?campaign=promo" class="campaign-btn">Promotional Email</a>
<a href="?campaign=newsletter" class="campaign-btn">Newsletter</a>
</div>
<div class="email-preview">
<div class="preview-toolbar">
<cfoutput>
<strong>Preview:</strong> #emailSubject# |
<strong>Campaign:</strong> #url.campaign#
</cfoutput>
</div>
<!--- Email content starts here --->
<div style="background: white;">
<div class="component-label">INCLUDED: email-header.cfm</div>
<!--- Include shared email header --->
<cfinclude template="email-header.cfm">
<div class="component-label">CUSTOM CONTENT: Campaign-specific</div>
<!--- Campaign-specific hero section --->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 40px 20px; background: linear-gradient(135deg, ##667eea 0%, ##764ba2 100%);">
<div style="font-size: 72px; margin-bottom: 20px;">
<cfoutput>#heroImage#</cfoutput>
</div>
<h1 style="color: white; margin: 0 0 10px 0; font-size: 42px;">
<cfoutput>#heroHeading#</cfoutput>
</h1>
<p style="color: white; font-size: 18px; margin: 0 0 30px 0; opacity: 0.9;">
<cfoutput>#heroSubheading#</cfoutput>
</p>
<cfoutput>
<a href="#ctaLink#" style="background: white; color: ##667eea;
padding: 15px 40px; text-decoration: none; border-radius: 30px;
font-weight: bold; display: inline-block;">
#ctaText#
</a>
</cfoutput>
</td>
</tr>
</table>
<!--- Campaign content --->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 40px 20px;">
<p style="font-size: 16px; line-height: 1.6; color: ##333; margin: 0;">
<cfoutput>#contentText#</cfoutput>
</p>
</td>
</tr>
</table>
<div class="component-label">INCLUDED: email-social-footer.cfm</div>
<!--- Include shared social media footer --->
<cfinclude template="email-social-footer.cfm">
<div class="component-label">INCLUDED: email-legal-footer.cfm</div>
<!--- Include shared legal/unsubscribe footer --->
<cfinclude template="email-legal-footer.cfm">
</div>
</div>
</body>
</html><!--- Shared Email Header Component --->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 30px 20px; background-color: ##2c3e50;">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<h1 style="color: ##3498db; margin: 0; font-size: 32px; font-weight: bold;">
🏢 ACME Company
</h1>
<p style="color: ##ecf0f1; margin: 10px 0 0 0; font-size: 14px;">
Your trusted partner for success
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!--- Shared Legal/Unsubscribe Footer Component --->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 20px; background-color: ##2c3e50;">
<p style="color: ##95a5a6; font-size: 12px; margin: 0 0 10px 0;">
<cfoutput>
© #year(now())# ACME Company. All rights reserved.<br>
123 Business Street, Suite 100, City, State 12345
</cfoutput>
</p>
<p style="color: ##95a5a6; font-size: 12px; margin: 10px 0;">
<a href="##" style="color: ##3498db; text-decoration: none;">Unsubscribe</a> |
<a href="##" style="color: ##3498db; text-decoration: none;">Privacy Policy</a> |
<a href="##" style="color: ##3498db; text-decoration: none;">Contact Us</a>
</p>
<p style="color: ##7f8c8d; font-size: 11px; margin: 10px 0 0 0;">
You're receiving this email because you subscribed to our mailing list.<br>
To ensure delivery, please add noreply@acme.com to your address book.
</p>
</td>
</tr>
</table><!--- Shared Social Media Footer Component --->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 30px 20px; background-color: ##34495e;">
<p style="color: white; margin: 0 0 20px 0; font-size: 16px; font-weight: bold;">
Connect With Us
</p>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0 10px;">
<a href="##" style="color: ##3498db; text-decoration: none; font-size: 24px;">📘</a>
</td>
<td style="padding: 0 10px;">
<a href="##" style="color: ##1DA1F2; text-decoration: none; font-size: 24px;">🐦</a>
</td>
<td style="padding: 0 10px;">
<a href="##" style="color: ##E4405F; text-decoration: none; font-size: 24px;">📸</a>
</td>
<td style="padding: 0 10px;">
<a href="##" style="color: ##0077B5; text-decoration: none; font-size: 24px;">💼</a>
</td>
</tr>
</table>
</td>
</tr>
</table>