Add ICP Filing Number to Discourse Forum

🛠 Tools and Programming
1

For websites operating in mainland China, according to relevant laws and regulations, the ICP Filing Number issued by the Ministry of Industry and Information Technology and the Public Security Filing Number issued by the Public Security Bureau must be displayed at the bottom of the website. This not only ensures compliant operation but also enhances the professional image of the website. As the title says, this article will detail how I added the ICP Filing Number and Public Security Filing Number to my own forum, and you can customize your website based on this article. For example, if your website needs to add HTML code verification, it’s easy to extend.

Adding Filing Numbers in Discourse Forum

I believe by the time you read this article, you already have your ICP Filing Number and Public Security Filing Number, right?

  • First, log in to your Discourse admin panel. In the left navigation bar, go to “Admin”, then “Customize”, and then the “Components” page.
  • Next, on the page shown, click “Install”, then “Create New Component”, enter the component name “Filing Information”, select the type as “component”, and then click “Create”.

After that, you will reach this page. Select “Components for these themes”, i.e., the theme you want to modify. I’m modifying the default theme here, so “Default” is selected as shown. Then click the “Edit CSS/HTML” button. (If the theme you choose to modify is not currently in use, you won’t see the modification effect.)

Adding CSS/HTML Code

On the code addition page, I have prepared the CSS and HTML code here. You only need to replace it with your own ICP Filing Number and Public Security Filing Number. The code also links to the authoritative Ministry of Industry and Information Technology and Public Security Bureau’s filing query pages. As shown, add the CSS code:

/* Filing number style, fixed at bottom right */
#icp-beian {
    position: fixed;
    right: 10px; /* 10px from the right */
    bottom: 10px; /* 10px from the bottom */
    font-size: 12px;
    color: #666;
    background-color: rgba(255, 255, 255, 0.8); /* semi-transparent background */
    padding: 3px 5px;
    border-radius: 3px;
    z-index: 9999;
    text-align: right;
}

/* Mobile device style adjustments */
@media (max-width: 768px) {
    #icp-beian {
        font-size: 10px;
        right: 5px; /* 5px from right on mobile devices */
        bottom: 5px; /* 5px from bottom on mobile devices */
        background-color: rgba(255, 255, 255, 0.9); /* increase background opacity */
    }
}

Add the HTML code:

  • Filing number info: Replace "京ICP备000000号" and "京公网安备000000号" with your actual filing numbers.
<footer>
    <div id="icp-beian">
        <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备000000号</a>
        <span> | </span>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">
            <img src="https://www.beian.gov.cn/img/ghs.png" alt="Public Security Filing" style="vertical-align: middle;">
            京公网安备000000号
        </a>
    </div>
</footer>

Save! That’s it. Click the preview button at the bottom right or refresh your website, and you will see the effect. As shown, your filing information appears at the bottom right corner, and you can click the filing numbers to jump to the Ministry of Industry and Information Technology and Public Security Bureau’s filing query pages.

Reference

https://www.soulcloser.com/4414/