I received some inspiration from the ChatGPT teacher regarding the footer settings of Obsidian Publish.
You can modify the website footer by modifying the CSS, but this has its limitations.
The sample code is applicable for adding the website ICP license number in mainland China, and adding a website name in front of the license number. The following is the solution provided by ChatGPT:
I hope that Obsidian Publish can customize each page in the future, especially the password input interface.
const footer = document.querySelector('.site-footer');
const link = footer.querySelector('a');
const newLink = document.createElement('a');
newLink.href = 'https://beian.miit.gov.cn/';
newLink.target = '_blank';
newLink.textContent = '京ICP备20XXXXXXX号-1';
const newText = document.createElement('span');
newText.textContent = 'YOUR WEBSITE NAME ';
// 添加原有的 CSS 样式
footer.style.display = 'flex';
footer.style.justifyContent = 'center';
footer.style.alignItems = 'center';
newLink.style.color = link.style.color;
newLink.style.textDecoration = link.style.textDecoration;
This code first uses the
document.querySelector() method to get the footer element on the page, then uses the
querySelector() method to get the link element inside the footer element. Then, a new link element and a new text element are created, with the
textContent properties of the new link set to the new footer content, and with the
textContent property of the new text element set to “YOUR WEBSITE NAME”. Then, the
parentNode.replaceChild() method is used to replace the old link element with the new text element. Next, the
appendChild() method is used to add the new link element to the end of the footer element. Note that this code needs to be executed after the page has finished loading, and can be placed in a
window.onload event handler or in a
<script> tag in the HTML file with the
To retain the original CSS styles, some extra code needs to be added. First, the
alignItems styles of the original element should be added to the new footer element using the
style attribute, in order to maintain the original layout and alignment. Then, the
textDecoration styles of the new link element should be set to the same values as the original link element, in order to maintain the original color and underline style.