ithub近期上線一個新的功能，就是你在自己賬號下創(chuàng)建一個和自己用戶名同名的倉庫，并在倉庫下創(chuàng)建一個README.md文件，這個文件就會被展示在你的Github個人主頁。源于markdown的強大描述能力，你可以在你的Github首頁展示各種各樣的信息，甚至有人直接將自己個人簡歷掛上面，極大豐富了Github的可玩性。
比如我的Github賬號是xindoo ，我直接建個xindoo代碼庫，然后寫個README.md文件介紹自己，最終展示效果如上圖，大家也可以直接到我Github主頁查看。不過我個人設計的就比較簡陋了，但依賴于Markdown的能力，你可以充分發(fā)揮自己主觀能動性，在README嵌入更多好玩的東西，比如給你看下Github前端小姐姐的主頁，對比之下我直男的身份算是藏不住了。
不過如何制作一個好看的個人主頁不是今天的主要內容，我主要是想教大家如何制作一個動態(tài)更新的主頁。比如我自己的主頁有一欄是我最新博文列表，我每寫一篇新博文都要手動更新一次README.md？ 當然不，我的主頁是會自動定期更新上去的，怎么做到的???

思路很簡單，首頁動態(tài)更新的本質其實就是更新README.md文件，先問一個問題 Readme.md一定要手寫嗎？ 用程序生成不好嗎！！只要有個定時任務能自動抓取我博客首頁的內容，然后更新README.md并push到github上就行，自己手頭有服務器的人可能立馬想到寫一個crontab定時任務就能搞定，沒服務器也不急，你接著往后看。

稍微有點編碼水平的人用程序生成一個README.md并不難，拿我的主頁來說吧，稍微有點難度的就是如何抓取我最新的博客。 其實本質上就是個簡易的爬蟲，CSDN目前并沒有反扒機制，所以實現難度并不大，代碼如下，我用了urllib3抓取html源碼，并用了etree的xpath解析出了博客標題和地址。

# -*- coding: utf-8 -*-
import urllib3
from lxml import etree
import html
import re

blogUrl = 'https://xindoo.blog.csdn.net/'

headers={'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36'} 

def addIntro(f):
    txt = ''' 
9年技術博主，CSDN認證博客專家，新晉視頻up主  
曾在阿里做過2年運維+1年開發(fā)，現為某廠Java后端開發(fā)工程師，擁有豐富的 挖坑 踩坑 填坑 背鍋經驗    
專注于Java，對操作系統、網絡、編譯原理也有涉獵，目前正在寫一門簡易的腳本語言   
''' 
    f.write(txt)

def addProjectInfo(f):
    txt ='''
### 開源項目  
- [eng-practices-cn](https://github.com/xindoo/eng-practices-cn)谷歌工程實踐中文版    
- [regex](https://github.com/xindoo/regex)Java實現的正則引擎表達式    
- [redis](https://github.com/xindoo/redis) Redis中文注解版  
- [slowjson](https://github.com/xindoo/slowjson) 用antlr實現的json解析器  
- [leetcode](https://github.com/xindoo/leetcode) 我的Leetcode題解   

[查看更多](https://github.com/xindoo/)     
    ''' 
    f.write(txt) 


def addBlogInfo(f):  
    http = urllib3.PoolManager(num_pools=5, headers = headers)
    resp = http.request('GET', blogUrl)
    resp_tree = etree.HTML(resp.data.decode("utf-8"))
    html_data = resp_tree.xpath(".//div[@class='article-item-box csdn-tracking-statistics']/h4") 
    f.write("\n### 我的博客\n")
    cnt = 0
    for i in html_data: 
        if cnt >= 5:
            break
        title = i.xpath('./a/text()')[1].strip()
        url = i.xpath('./a/@href')[0] 
        item = '- [%s](%s)\n' % (title, url)
        f.write(item)
        cnt = cnt + 1
    f.write('\n[查看更多](https://xindoo.blog.csdn.net/)\n')

f = open('README.md', 'w+')
addIntro(f)
f.write('<table><tr>\n')
f.write('<td valign="top" width="50%">\n')

addProjectInfo(f)
f.write('\n</td>\n')
f.write('<td valign="top" width="50%">\n')
addBlogInfo(f)
f.write('\n</td>\n')
f.write('</tr></table>\n')
f.close 

有了上面代碼，你只需要在你服務器設置個crontab，執(zhí)行這段python代碼，然后git commit -a"update" git push 就可以擁有我和同款的Github首頁了。

你沒有自己的服務器也沒關系，Github給你免費的服務器讓你用，這就是Github之前推出的Actions功能，我理解它的本質就是Github給你提供了免費的容器，你可以在容器里執(zhí)行某些workflow，當然也可以運行一些自定義的代碼，更多Actions的內容可以參考下阮一峰老師的GitHub Actions 入門教程，當然你也可以直接看Actions的官方文檔。

為了實現無服務器的自動更新，我們只需要讓上面這段python運行在github Actions之上就可以了，你只需要在你代碼倉庫 ->Actions -> 新建Workflow，github會自動幫你在你倉庫下面創(chuàng)建 .github/workflows/${FILENAME}.yml 文件，你只需要按格式要求修改書寫文件即可，具體書寫方式參考上述文檔，這里不再展開。
最后給大家看下我的workflow文件，你也可以直接在我github倉庫查看該文件xindoo/.github/workflows/build.yml

# This is a basic workflow to help you get started with Actions

name: build readme

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:   # 觸發(fā)時機
  push:
    branches: [ master ]  # master有更新
  schedule:
    - cron:  '0 */6 * * *'  # 每6小時運行一次
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest   # 使用最新版ubuntu鏡像 

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps: 
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2  

    - name: Setup Python  # 安裝python環(huán)境 
      uses: actions/setup-python@v2.1.1

    - name: Install Python dependencies  # 安裝python爬蟲依賴包
      run: python -m pip install urllib3 lxml

    - name: Run python   # 生成新的README.md文件 
      run: python generateReadme.py

    - name: Record time  
      run: echo `date` > date.log

    - name: Commit and push if changed   # 將README.md更新到倉庫
      run: |
        git diff
        git config --global user.email "xindoo@zxs.io"
        git config --global user.name "zxs"
        git add -A
        git commit -m "Updated Readme" || exit 
        git push

本文來自https://blog.csdn.net/xindoo

家好，我是楊數Tos！

一個手機版的QQ界面如何實現呢？在這里簡單分享實現手機版QQ前端頁面效果的源代碼。

基于前后端分離的原則 ，所有手機APP的前端都是后端數據返回到前端通過CSS與JS裝飾后的結果。

Q的手機版可以分為三大主頁：消息、聯系人、動態(tài)；由三大主頁下又細劃出N個子頁面，前端開發(fā)的時候先構建好三大主頁，然后再繼續(xù)在主頁內構建相應子頁即可。

這是一種樹結構，主支桿下有分支，分支下有子分支，每個分支與子分支都有特定的功能；客戶需要用到哪個功能，點擊一下就會向后端發(fā)送數據請求，后端將數據返回以后經過前端的代碼裝飾，就是我們看到的頁面效果。

注：只有前端的頁面效果，沒有設計后端的代碼；所以整體代碼就是一個HTML+CSS的結合。

需要代碼請關注@楊數Tos，回關鍵字【簡版QQ】，獲取源代碼。

本文由楊數Tos原創(chuàng)，歡迎關注，帶你一起長知識。

壓縮包上傳解壓到服務器根目錄，入口文件是index.html

本網站的HTML模板資源：所見文章圖片即所得，搭建和修改教程請看這篇文章：https://yizhi2024.top/8017.html

HTML模板修改教程

一般是在index.htm內修改，搜索頁面關鍵詞來查看代碼所在位置

也可以使用HBuilderX來搜索：把壓縮包解壓，得到文件夾，拖動HBuilderX軟件，執(zhí)行CTRL+F，輸入關鍵字眼，會自動搜索文件夾內的所有內容