Before signing out, the font color for logoff is black, and after logging in, the sign-in font is blue.
1. Add layout display code to the bulletin board
<!--show login begin--><!--hide calling HTML code--><divclass="Hide"><!--------------------------users display-------------------------------> <div before and after landingclass="Login_message"style="Display:none;"></div> <div > <a id="Lnklogin">hi, please login </a>-<a href="https://ing.cnblogs.com/"target="_blank"> Flash </a>-<a href="Http://msg.cnblogs.com/inbox"target="_blank"> News </a>-<a id="Lnkloginout"> Logout </a></br> </div> </div><!-------------------------end of user login before and after landing------------------- ---------></div><!--Hide calling HTML code end-->
2. Add JS code after layout
<!--******js code starts ******--><script type="Text/javascript">$ (document). Ready (function () {//*************** global variable ************* varDangqurl=window.location.href;//Get current URL varLoginy;//Login Status 1 is logged in 0 for not logged in//Ajax Get Set Login information$.ajax ({URL:"http://www.cnblogs.com/GetLoginInfo.aspx", Data:'{}', type:'Post', Async:false, DataType:'text', ContentType:'Application/json; Charset=utf-8', Success:function (data) {if(data) {varReset=data.replace (/document\.write\ (\"/g,""). replace (/\ "\) \;/,""). Replace (/\[/,""). Replace (/\]/,"");$(". Login_message"). HTML (reset); Loginz=$(". Login_message"). Find ("A:first"). html (); Bkurl= $(". Login_message"). Find ("A:first"). attr ("href"); //Login Settings if(Loginz! ="Login"){ $(". Headtopright"). HTML ($ (". Ylogin"). HTML ()); Loginy=1 //Set Login StatusLogin_name=Loginz; //Get Blog Address varBokarr=NewArray (); Bokarr=bkurl.split ("/"); Bok_link=bokarr[3]; $(". Login_namez"). HTML (Loginz); $(". Login_namez"). attr ("href","http://www.cnblogs.com/"+Bok_link); $(". LOGIN_NAMEZ1"). attr ("href","http://www.cnblogs.com/"+Bok_link); $("#lnkLoginout"). attr ("href","http://passport.cnblogs.com/logout.aspx?ReturnUrl="+Dangqurl); Window.location_href=Dangqurl; $(". Wdyz"). attr ("href","http://home.cnblogs.com/u/"+Bok_link); } if(loginz=="Login"){ $(". Headtopright"). HTML ($ (". Nlogin"). HTML ()); Loginy=0 //Set Login Status$("#lnkLogin"). attr ("href","http://passport.cnblogs.com/login.aspx?ReturnUrl="+Dangqurl); Window.location_href=Dangqurl; } //Login Settings End}}, Erro:function () { Loginy=0; Login_type="User"; $(". Login_main"). HTML ($ (". Nlogin"). HTML ()); $("#lnkLogin"). attr ("href","http://passport.cnblogs.com/login.aspx?ReturnUrl="+Dangqurl); Window.location_href=Dangqurl; } }); //Get login information End });</script><!--Show Login end-->
3. Display effect
Use jquery to add user login and logout to personal blog Home Bulletin Board