### CSS Rule for Responsive Images
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/5/page.html
Defines a CSS rule to ensure images within the template adapt to their container by setting their maximum width to 100%. This helps maintain layout integrity on various screen sizes.
```CSS
img{ max-width: 100%; }
```
--------------------------------
### WangMarket Page Template Example
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/3/newsimage_list.html
This snippet shows a typical page template from the WangMarket project. It includes directives for header, top, page content, and footer, along with a conditional JavaScript include for news editing functionality.
```Templating Language
{include=head} if(edit){ dynamicLoading.js("{resUrl}template/"+getTemplateId()+"/js/newsedit.js"); } {include=top}
{siteColumn.name}
=================
[{siteName}](index.html) > [{siteColumn.name}]({siteColumn.url})
{listItem}
{include=page}
{include=foot}
```
--------------------------------
### JavaScript Variable for Contact Us Section
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/7/index.html
Defines a JavaScript variable to store the HTML anchor ID for the 'Contact Us' section, used for navigation within the fullPage.js setup.
```JavaScript
var pageTag_contactUs = '{siteColumn.id}'; //HTML描点,联系我们相关 [联系我们](#)
```
--------------------------------
### JavaScript Initialization and Dynamic Resource Loading
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/5/common/head.html
This script sets up essential global variables like `masterSiteUrl`, `edit` mode flag, and `attachmentFileUrl`. It then dynamically loads a template's `style.css` if the current page is not the homepage, and loads `styleedit.css` and `commonedit.js` specifically when in 'edit' mode. It relies on a `dynamicLoading` utility and `getTemplateId()` function, which are assumed to be defined elsewhere.
```JavaScript
var masterSiteUrl = '{\_masterSiteUrl}';/*主站URL*/ var edit = 'controllerRegEditMode' == 'edit';/*是否是编辑模式下*/ var attachmentFileUrl = '{AttachmentFileUrl}'; /*附件url*/ var urlname = window.location.pathname.split('.')[0].toLowerCase(); if(urlname != '/index' && urlname != '/'){ dynamicLoading.css("{resUrl}template/"+getTemplateId()+"/style.css"); /*非首页将动态加载模版样式文件*/ } if(edit){ dynamicLoading.css("{resUrl}template/"+getTemplateId()+"/styleedit.css");/*加载编辑模式的CSS*/ dynamicLoading.js("{resUrl}js/admin/commonedit.js");/*加载编辑模式的js*/ }
```
--------------------------------
### Initialize and Render Site Columns and Navigation
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/1/index.html
This JavaScript function `initSiteColumnData` initializes and renders the site's column and navigation data. It compares `siteColumnRank` and `siteColumn` for consistency, then iterates through sorted column data to generate HTML for display and editing, including dynamic URLs based on column type.
```JavaScript
//普通预览模式下点击上方的标题栏 function site_(){ }
//首页不显示顶左侧的后退按钮 document.getElementById('topBlock_back').innerHTML='';
var addSiteColumnHTML = '';
var addSiteColumnHTMLedit = document.getElementById('columnList').innerHTML;
/* 刚打开初始化栏目、导航的缓存数据 */ function initSiteColumnData() {
/* 首先先判断排序跟栏目导航数据个数是否一样 */ if (siteColumnRank.langth != siteColumn.length) {
var content = '';
var contentedit = '';
var topNavContent = '';
/* 先遍历排序数据，根据排序拿到栏目导航数据 */ for (var i = 0; i < siteColumnRank.length; i++) {
var rank = siteColumnRank[i];
for (var j = 0; j < siteColumn.length; j++) {
if (siteColumn[j]['id'] == siteColumnRank[i]) {
var url = siteColumn[j]['url'];
var type = siteColumn[j]['type'];
switch (type) {
case '1': /* 新闻 */ url = 'lc'+siteColumn[j]['id']+'_1.html'; break;
case '2': /* 图文 */ url = 'lc'+siteColumn[j]['id']+'_1.html'; break;
case '3': /* 独立页面 */ url = 'c'+siteColumn[j]['id']+'.html'; break;
case '4': /* 留言板 */ break;
case '5': /* 超链接 */ break;
}
contentedit = contentedit + '
' + siteColumn[j]['name'] + '
'+ '
填充内容
'+ '
栏目属性
'+ '
' + siteColumn[j]['name'] + '
'+ '
' + siteColumn[j]['name'] + '
'+ '
填充内容
'+ '
栏目属性
'+ '
' + siteColumn[j]['name'] + '
'+ '
';
carouselContent = carouselContent + '';
//点击修改
carouselContentedit = carouselContentedit + '';
}
document.getElementById('banner').innerHTML = ''+carouselContent{edit}+"
";
}else{
document.getElementById('banner').innerHTML = '';
}
```
--------------------------------
### Declare Global Configuration Variables in JavaScript
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/2/common/head.html
This snippet defines several global JavaScript variables used for site configuration. It includes a timestamp, URLs for OSS (Object Storage Service) and the master site, a resource path for CDN assets, and a boolean flag to indicate if the page is in edit mode.
```JavaScript
//当前的时间戳
var time = new Date().getTime();
//设置OSSUtil.url
var OSSUrl = '{AttachmentFileUrl}';
//主站URL
var masterSiteUrl = '{masterSiteUrl}';
//CDN资源文件主URL
var resPath = '{AttachmentFileUrl}';
//是否是编辑模式下
var edit = '{edit}' == 'edit';
```
--------------------------------
### JavaScript Dynamic CSS and JavaScript Loader
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/1/common/head.html
Provides a `dynamicLoading` object with `css` and `js` methods to programmatically inject stylesheet and script tags into the document's ``. This utility is essential for loading resources on demand, with CSS files including a timestamp for cache busting.
```JavaScript
//动态加载js、css文件
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path+'?v='+time;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
```
--------------------------------
### JavaScript Dynamic Resource Loading and Variable Initialization
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/6/common/head.html
This JavaScript snippet initializes global variables such as the master site URL, an 'edit' mode flag, and an attachment file URL. It then dynamically loads template-specific CSS if the current page is not the homepage. Additionally, it loads specific CSS and JavaScript files when the application is in 'edit' mode, enhancing the user interface for content management.
```JavaScript
var masterSiteUrl = '{\_masterSiteUrl}';/*主站URL*/
var edit = 'controllerRegEditMode' == 'edit';/*是否是编辑模式下*/
var attachmentFileUrl = '{AttachmentFileUrl}'; /*附件url*/
var urlname = window.location.pathname.split('.')[0].toLowerCase();
if(urlname != '/index' && urlname != '/'){
dynamicLoading.css("{resUrl}template/"+getTemplateId()+"/style.css"); /*非首页将动态加载模版样式文件*/
}
if(edit){
dynamicLoading.css("{resUrl}template/"+getTemplateId()+"/styleedit.css");/*加载编辑模式的CSS*/
dynamicLoading.js("{resUrl}js/admin/commonedit.js");/*加载编辑模式的js*/
}
```
--------------------------------
### Initialize Page Elements and Dynamically Load Header Scripts
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/6/common/top.html
This JavaScript snippet performs several frontend initialization tasks. It clears the inner HTML of the 'columnList' element to prevent SEO-unfriendly descriptive text from appearing during slow network conditions. It also controls the visibility of the 'banner' element based on the 'mShowBanner' property from the 'site' object. Finally, it dynamically loads either 'headeredit.js' or 'header.js' based on the 'edit' variable, likely for different user contexts (e.g., editing mode vs. regular view).
```JavaScript
document.getElementById('columnList').innerHTML = '';/*清空不让有利于SEO的nav描述文字显示，免得网速慢时效果差*/ document.getElementById("banner").style.display = site['mShowBanner'] == '1'? '':'none';/*如不显示，直接让其隐藏*/ if(edit){ dynamicLoading.js("{resUrl}template/"+getTemplateId()+"/js/headeredit.js"); }else{ dynamicLoading.js("{resUrl}template/"+getTemplateId()+"/js/header.js"); }
```
--------------------------------
### CSS for Responsive Images
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/2/page.html
Ensures images within the content are responsive by setting their maximum width to 100% of their parent container, preventing overflow on smaller screens and adapting to various device sizes.
```CSS
img{ max-width: 100%; }
```
--------------------------------
### Site Information Navigation Functions
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/4/index.html
Defines JavaScript functions for navigating to the site information page (`site_edit`) and a placeholder function (`site_`) for general site interactions. The `site_edit` function redirects the user to the master site's information page with specific site and client parameters.
```JavaScript
function site_edit(){
window.location.href='{masterSiteUrl}site/info.do?siteid={siteId}&client=wap';
}
function site_(){ }
```
--------------------------------
### Wangmarket Page Template Structure
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/5/index.html
This snippet demonstrates the basic layout and dynamic content placeholders used in Xnx3 Wangmarket web page templates. It includes references to header/footer includes, site column navigation, and news article display, utilizing a custom templating syntax.
```HTML Template
{include=head} {include=top}
[{siteColumn.name}](c{siteColumn.id}.html) [更多>>](c{siteColumn.id}.html)
 这是关于我们的内容了是关于
[{siteColumn.name}](lc{siteColumn.id}_1.html) [更多>>](lc{siteColumn.id}_1.html)
[{news.title}]({news.url})
[{siteColumn.name}](lc{siteColumn.id}_1.html) [更多>>](lc{siteColumn.id}_1.html)
[
{news.title}
]({news.url})
{include=foot}
```
--------------------------------
### Displaying News and Site Information using Wangmarket Template
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/6/module/newsimage_list_item.html
This snippet demonstrates how to display news articles and site-related information within the Wangmarket content management system using its proprietary templating syntax. It relies on 'news' and 'siteName' objects/variables being available in the template context, which are expected to contain properties like 'titlepic', 'url', 'title', 'addtime', and 'intro'. The output renders HTML links and text based on the provided data.
```Wangmarket Template
[]({news.url})
[{news.title}]({news.url})
{news.addtime}
[{news.intro}]({news.url})
```
--------------------------------
### News Article Display Template
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/5/module/news_list_item.html
This template snippet illustrates the structure for rendering news article information, including its title, URL, publication timestamp, and an introductory summary. It utilizes placeholder syntax to dynamically embed data from a 'news' object.
```Template
[{news.title}]({news.url})
{news.addtime}
[{news.intro}]({news.url})
```
--------------------------------
### Displaying News Item Template
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/5/module/newsimage_list_item.html
This template snippet is designed for the /xnx3/wangmarket system to render a news article. It utilizes Markdown-like syntax for images and links, alongside custom placeholders (e.g., {news.title}, {news.url}) to dynamically insert content such as the site name, news title, featured image, publication date, and an introductory summary. The snippet structures the display to make each element clickable, leading to the full news article.
```Markdown Template
[]({news.url})
[{news.title}]({news.url})
{news.addtime}
[{news.intro}]({news.url})
```
--------------------------------
### Dynamic Site Column Links
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/3/index.html
This snippet shows how to generate dynamic links for site columns, displaying the column name and linking to its respective page. It also includes a 'More' link for navigation.
```HTML Template
[{siteColumn.name}](c{siteColumn.id}.html) [更多>>](c{siteColumn.id}.html)
[{siteColumn.name}](lc{siteColumn.id}_1.html) [更多>>](lc{siteColumn.id}_1.html)
```
--------------------------------
### Dynamically Load JavaScript File
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/2/index.html
This line of code dynamically loads the `wap.js` script from a specified resource URL. This is typically used for loading additional JavaScript functionalities after the initial page load.
```JavaScript
dynamicLoading.js("{resUrl}js/wap.js");
```
--------------------------------
### Initialize Site Column and Navigation Data
Source: https://github.com/xnx3/wangmarket/blob/master/src/main/resources/static/template/4/index.html
This core JavaScript function initializes and renders the site's column and navigation data. It first validates the consistency between column ranking and data, then iterates through ranked columns to construct dynamic HTML for both normal and edit modes, handling different column types (news, image-text, independent page, message board, hyperlink) and their respective URLs. It also includes buttons for content filling and column property updates in edit mode.
```JavaScript
var addSiteColumnHTML = '';
var addSiteColumnHTMLedit = document.getElementById('columnList').innerHTML;
function initSiteColumnData() {
if (siteColumnRank.langth != siteColumn.length) {
var content = '';
var contentedit = '';
var topNavContent = '';
for (var i = 0; i < siteColumnRank.length; i++) {
var rank = siteColumnRank[i];
for (var j = 0; j < siteColumn.length; j++) {
if (siteColumn[j]['id'] == siteColumnRank[i]) {
var url = siteColumn[j]['url'];
var type = siteColumn[j]['type'];
switch (type) {
case '1':
url = 'lc'+siteColumn[j]['id']+'_1.html';
break;
case '2':
url = 'lc'+siteColumn[j]['id']+'_1.html';
break;
case '3':
url = 'c'+siteColumn[j]['id']+'.html';
break;
case '4':
break;
case '5':
break;
}
contentedit = contentedit + '' + siteColumn[j]['name'] + '
'+ '
填充内容
'+ '
栏目属性
'+ '
' + siteColumn[j]['name'] + '
'+ '