Overview
DudaMobile uses a our own custom markup language called DudaMobile Markup Language Extension (DMLE). This markup code informs Duda of changes that you make to the page and is required for anyone wanting to edit the HTML of the mobile site directly. When using the Duda editor, you will notice that these attributes are automatically added to the HTML markup, but you can add and edit tags manually by following the guide below.
How to use it
Depending on what you are trying to do, you will insert the corresponding attribute directly into the HTML element you are wanting to edit. For example, if you are wanting to insert a new paragraph element into the page, you will add the following code directly into the HTML:
<p dmle_insert="true">This is an example paragraph</p>
Notice in the code above, that we added the dmle_insert="true" attribute. This tells Duda that this is newly inserted content that differs from the what is already in the page. Let me give another example.
Say we have some content that was pulled in directly from the desktop website after conversion and we want to edit it directly in the HTML. The original code that was pulled in looks like:
<p id="99" duda_id="99">From the beginning, their philosophy has been the same; simply to seek out the best possible ingredients and make the highest quality sandwiches.</p>
In order to make changes inside of the HTML, we have to add our dmle_replace attribute to look like this:
<p id="99" duda_id="99" dmle_replace="true" replace_mode="node_subtree">From the beginning, their philosophy has been the same; simply to seek out the best possible ingredients and make the highest quality sandwiches.</p>
(Notice that I also added a replace_mode="node_subtree", this tells Duda to notice all changes we've made inside of the tags. If we did not add the replace & replace_node attributes, Duda would not recognize the changes and simply throw them out.)
DMLE Attributes
|
Operation |
How to Use It |
|
Remove or Delete Element |
Add attribute dmle_remove="true" |
|
Move Element |
Move element to required position in HTML then add attribute dmle_move="true" |
|
Change element attributes / values |
Change the attributes of the element then add dmle_replace="true" |
|
Change content of element |
First change content, then add the following two attributes: dmle_replace="true" replace_mode="node_subtree"(the replace_mode specifically indicates the content in the HTML element) |
|
Insert a new element |
Insert the new HTML element and any content and add the dmle_insert="true" attribute |
|
Add or change CSS class |
The first thing is to add or edit your class value, such as class="test example" then add dmle_class="true" to the element. Think of this like replace, but only for class changes. |
|
Enclose element(s) |
Add your enclosing element around other elements, then add dmle_enclose="true" to the enclosing element you added. |
Troubleshooting and FAQ's
I'm making edits to the code and it's not saving.
You can only edit the HTML code by using the DMLE attributes above - For example, if you edit something in the HTML without adding dmle_replace="true"to the element (such as a <p> tag), your HTML edits won't be saved.
I want to undo the edits I made to the HTML
In order to undo an edit made to the HTML, you can simply go back into the HTML and revert the changes manually. A better solution though would be to restore to a backup. It's always a good idea to make a backup before editing the HTML of your site so that way you always have a version to restore to.
