底部样式

docusaurus.config.js

@@ -36,7 +36,7 @@ module.exports = {
     footer: {
       style: 'dark',
       logo:{
-        src:"/static/img/gitlink.png"
+        src:"static/img/gitlink.png"
       },
       links: [
         {
@@ -88,6 +88,20 @@ module.exports = {
               label: '官网邮箱：gitlink@ccf.org.cn',
               to:"https://www.gitlink.org.cn"
             },
+            {
+              label:'QQ群',
+              logo:{
+                src:"/static/img/gitlink-qq.png",
+              },
+              to:'https://www.gitlink.org.cn'
+            },
+            {
+              label:'公众号',
+              logo:{
+                src:"/static/img/gongzhong.png",
+              },
+              to:'https://www.gitlink.org.cn'
+            }
           ],
         },
       ],

src/css/custom.css

@@ -43,3 +43,93 @@ html[data-theme=light] .menu{
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+.footer{
+  height: 473px;
+  position: relative;
+  background: #1e1e1e;
+}
+.container{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.footer__bottom .margin-bottom--sm{
+  position: absolute;
+  margin-top: -150px;
+  top:50%
+}
+.footer__links .footer__title{
+  height: 25px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 25px;
+  margin-bottom: 20px;
+}
+.footer__links .footer__col:last-child .footer__items:last-child{
+  display: flex;
+  flex-wrap: wrap;
+}
+.footer__links .footer__col:last-child .footer__items:last-child .footer__item{
+  width: 50%;
+}
+.footer__links .footer__col:last-child .footer__items:last-child .footer__item:nth-child(2){
+  background-image: url(/static/img/gitlink-qq.png);
+  background-size: 100% 100%;
+  height: 90px;
+  width: 90px;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+}
+.footer__links .footer__col:last-child .footer__items:last-child .footer__item:nth-child(3){
+  background-image: url(/static/img/gongzhong.png);
+  background-size: 100% 100%;
+  height: 90px;
+  width: 90px;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+  margin-left: 34px;
+}
+.footer__links .footer__col:last-child .footer__items:last-child .footer__item:nth-child(2) a,
+.footer__links .footer__col:last-child .footer__items:last-child .footer__item:nth-child(3) a{
+  position: absolute;
+  top: 95px;
+  left: 50%;
+  margin-left: -17px;
+}
+.footer__links .footer__col:last-child .footer__items:last-child .footer__item:first-child{
+  width: 100%;
+}
+.container .footer__links{
+  margin-left: 420px;
+}
+.container .footer__links .footer__col .footer__item{
+  color: #bdc2d1;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  height: 20px;
+  margin-bottom: 15px;
+}
+.footer__bottom .margin-bottom--sm img{
+  width: 300px;
+  max-width: unset;
+}
+.container .footer__copyright{
+  position: absolute;
+  width: 100%;
+  left: 0px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #bdc2d1;
+  line-height: 28px;
+  padding: 15px 0;
+  text-align: center;
+  background-color: #1b212c;
+}
+.container .footer__copyright p{
+  margin-bottom: 0px!important;
+}