如何在HTML模板中引用YAML变量替换硬编码内容？

Absolutely, this is totally achievable! Whether you need JavaScript depends on where you're handling the template rendering—server-side or client-side. Let's break down both approaches:

Server-Side (Recommended if you can) #

Looking at your existing code, you're using server-side templating tags (like <%-, <% if(...) %>), so this is the cleanest path. Here's how to do it:

1. Parse the YAML file on your server: Use a library like js-yaml (for Node.js) to read and extract the Variable_name value from your YAML file.

   const yaml = require('js-yaml');
   const fs = require('fs');
   
   try {
     const yamlContent = yaml.load(fs.readFileSync('./your-yaml-file.yaml', 'utf8'));
     const nodenameLabel = yamlContent.Variable_name; // Gets "nodename"
     // Pass this value to your template's context (how you do this depends on your framework/templating engine)
   } catch (err) {
     console.error('Failed to load YAML:', err);
   }
   

2. Replace the hardcoded label in your template: Swap the static "Nodename" with the variable you passed in. I added a quick capitalization to match the original formatting:

   <label class="col-sm-2 col-lg-2 control-label"> <%= nodenameLabel.charAt(0).toUpperCase() + nodenameLabel.slice(1) %> </label>
   

This way, the label is dynamically set when the page is rendered, no client-side JS needed.

Client-Side (If server-side isn't an option) #

If you have to do this after the page loads, you'll need JavaScript to fetch and parse the YAML:

1. Include a YAML parser: Browsers don't natively parse YAML, so add a library like js-yaml via CDN:

   <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
   

2. Fetch and update the label: Write a script to grab the YAML file, parse it, and update the label text:

   fetch('./your-yaml-file.yaml')
     .then(res => res.text())
     .then(yamlText => {
       const yamlData = jsyaml.load(yamlText);
       const rawLabel = yamlData.Variable_name;
       // Capitalize first letter to match original "Nodename"
       const formattedLabel = rawLabel.charAt(0).toUpperCase() + rawLabel.slice(1);
       // Target the specific label (adjust selector if needed)
       document.querySelector('.form-group label.control-label').textContent = formattedLabel;
     })
     .catch(err => console.error('Error loading YAML:', err));
   

Quick Notes #

• Server-side is better for performance and keeps your YAML file private if needed.
• Make sure your templating engine supports passing variables from the server (most popular ones like EJS, Handlebars, etc., do this easily).
• For client-side, double-check the selector to ensure you're targeting the correct label (especially if there are multiple forms on the page).

内容的提问来源于stack exchange，提问作者JustCurious