整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ithub近期上線一個新的功能，就是你在自己賬號下創(chuàng)建一個和自己用戶名同名的倉庫，并在倉庫下創(chuàng)建一個README.md文件，這個文件就會被展示在你的Github個人主頁。源于markdown的強(qiáng)大描述能力，你可以在你的Github首頁展示各種各樣的信息，甚至有人直接將自己個人簡歷掛上面，極大豐富了Github的可玩性。
比如我的Github賬號是xindoo ，我直接建個xindoo代碼庫，然后寫個README.md文件介紹自己，最終展示效果如上圖，大家也可以直接到我Github主頁查看。不過我個人設(shè)計的就比較簡陋了，但依賴于Markdown的能力，你可以充分發(fā)揮自己主觀能動性，在README嵌入更多好玩的東西，比如給你看下Github前端小姐姐的主頁，對比之下我直男的身份算是藏不住了。
不過如何制作一個好看的個人主頁不是今天的主要內(nèi)容，我主要是想教大家如何制作一個動態(tài)更新的主頁。比如我自己的主頁有一欄是我最新博文列表，我每寫一篇新博文都要手動更新一次README.md？ 當(dāng)然不，我的主頁是會自動定期更新上去的，怎么做到的???
思路很簡單，首頁動態(tài)更新的本質(zhì)其實(shí)就是更新README.md文件，先問一個問題 Readme.md一定要手寫嗎？ 用程序生成不好嗎！！只要有個定時任務(wù)能自動抓取我博客首頁的內(nèi)容，然后更新README.md并push到github上就行，自己手頭有服務(wù)器的人可能立馬想到寫一個crontab定時任務(wù)就能搞定，沒服務(wù)器也不急，你接著往后看。
稍微有點(diǎn)編碼水平的人用程序生成一個README.md并不難，拿我的主頁來說吧，稍微有點(diǎn)難度的就是如何抓取我最新的博客。 其實(shí)本質(zhì)上就是個簡易的爬蟲，CSDN目前并沒有反扒機(jī)制，所以實(shí)現(xiàn)難度并不大，代碼如下，我用了urllib3抓取html源碼，并用了etree的xpath解析出了博客標(biāo)題和地址。
# -*- 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年技術(shù)博主，CSDN認(rèn)證博客專家，新晉視頻up主
曾在阿里做過2年運(yùn)維+1年開發(fā)，現(xiàn)為某廠Java后端開發(fā)工程師，擁有豐富的 挖坑 踩坑 填坑 背鍋經(jīng)驗(yàn)
專注于Java，對操作系統(tǒng)、網(wǎng)絡(luò)、編譯原理也有涉獵，目前正在寫一門簡易的腳本語言
'''
f.write(txt)
def addProjectInfo(f):
txt ='''
### 開源項(xiàng)目
- [eng-practices-cn](https://github.com/xindoo/eng-practices-cn)谷歌工程實(shí)踐中文版
- [regex](https://github.com/xindoo/regex)Java實(shí)現(xiàn)的正則引擎表達(dá)式
- [redis](https://github.com/xindoo/redis) Redis中文注解版
- [slowjson](https://github.com/xindoo/slowjson) 用antlr實(shí)現(xiàn)的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 有了上面代碼，你只需要在你服務(wù)器設(shè)置個crontab，執(zhí)行這段python代碼，然后git commit -a"update" git push 就可以擁有我和同款的Github首頁了。
你沒有自己的服務(wù)器也沒關(guān)系，Github給你免費(fèi)的服務(wù)器讓你用，這就是Github之前推出的Actions功能，我理解它的本質(zhì)就是Github給你提供了免費(fèi)的容器，你可以在容器里執(zhí)行某些workflow，當(dāng)然也可以運(yùn)行一些自定義的代碼，更多Actions的內(nèi)容可以參考下阮一峰老師的GitHub Actions 入門教程，當(dāng)然你也可以直接看Actions的官方文檔。
為了實(shí)現(xiàn)無服務(wù)器的自動更新，我們只需要讓上面這段python運(yùn)行在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ā)時機(jī)
push:
branches: [ master ] # master有更新
schedule:
- cron: '0 */6 * * *' # 每6小時運(yùn)行一次
# 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
家好，我是楊數(shù)Tos！
一個手機(jī)版的QQ界面如何實(shí)現(xiàn)呢？在這里簡單分享實(shí)現(xiàn)手機(jī)版QQ前端頁面效果的源代碼。
基于前后端分離的原則 ，所有手機(jī)APP的前端都是后端數(shù)據(jù)返回到前端通過CSS與JS裝飾后的結(jié)果。
Q的手機(jī)版可以分為三大主頁：消息、聯(lián)系人、動態(tài)；由三大主頁下又細(xì)劃出N個子頁面，前端開發(fā)的時候先構(gòu)建好三大主頁，然后再繼續(xù)在主頁內(nèi)構(gòu)建相應(yīng)子頁即可。
這是一種樹結(jié)構(gòu)，主支桿下有分支，分支下有子分支，每個分支與子分支都有特定的功能；客戶需要用到哪個功能，點(diǎn)擊一下就會向后端發(fā)送數(shù)據(jù)請求，后端將數(shù)據(jù)返回以后經(jīng)過前端的代碼裝飾，就是我們看到的頁面效果。
注：只有前端的頁面效果，沒有設(shè)計后端的代碼；所以整體代碼就是一個HTML+CSS的結(jié)合。
需要代碼請關(guān)注@楊數(shù)Tos，回關(guān)鍵字【簡版QQ】，獲取源代碼。
本文由楊數(shù)Tos原創(chuàng)，歡迎關(guān)注，帶你一起長知識。
壓縮包上傳解壓到服務(wù)器根目錄，入口文件是index.html
本網(wǎng)站的HTML模板資源：所見文章圖片即所得，搭建和修改教程請看這篇文章：https://yizhi2024.top/8017.html
一般是在index.htm內(nèi)修改，搜索頁面關(guān)鍵詞來查看代碼所在位置
也可以使用HBuilderX來搜索：把壓縮包解壓，得到文件夾，拖動HBuilderX軟件，執(zhí)行CTRL+F，輸入關(guān)鍵字眼，會自動搜索文件夾內(nèi)的所有內(nèi)容
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
