一、語言準(zhǔn)備:Markdown 基礎(chǔ)入門
markdown 簡介:是一種輕量級的標(biāo)記語言焕盟,目前也被越來越多的寫作愛好者、撰稿人廣泛使用。
使用markdown編輯器:
在線編輯器:stackEdit 和 簡書
離線編輯器:Typora 消玄、Markdown Pad、 Mpu
標(biāo)題
方法1:# 一級標(biāo)題 丢胚、 ##二級標(biāo)題 翩瓜、 ###三級標(biāo)題
方法2:文字下加===(3個等號)一級標(biāo)題、---(3個小破折號)二級標(biāo)題携龟、###三級標(biāo)題一樣的兔跌。
段落
兩次回車分段效果
shift+回車為斷行、分行效果
超鏈接
方法1:在要加超鏈接的內(nèi)容上加英文字符狀態(tài)的【】峡蟋,后加圓括號()坟桅,括號中放鏈接地址。
方法2:英文字符狀態(tài)<>蕊蝗,括號中加鏈接地址或郵箱地址仅乓。
圖片
英文狀態(tài)的!【】()圓括號中放圖片鏈接地址蓬戚,推薦在線工具極簡圖床和客戶端ipic圖床神器夸楣,快速得到圖片地址鏈接。
列表
無序列表:方法1:破折號-加空格 方法2:星號*加空格子漩。
有序列表:數(shù)字1英文句號.加空格豫喧,在一級序列中再插一級子列表時,需要按住Tab鍵或按4個空格縮進(jìn)幢泼,右邊就呈現(xiàn)層級縮進(jìn)效果紧显。
引用塊
英文字符>加空格,雙重引用嵌套的樣式2個大于號>>加空格
強(qiáng)調(diào)
加粗處理:詞語兩邊各加2個**星號或2個下劃線--
傾斜處理:詞語兩邊加1個星號或1個下劃線
代碼塊
行內(nèi)代碼塊突出重點(diǎn)旭绒,呈現(xiàn)為背景略灰的色塊樣式鸟妙,在要突出的詞前后加英文字符的分號`(和~鍵在一起的),整個段落突出就在段落前后加3個英文字符的分號焦人。
分割線
方法1:3個英文字符狀態(tài)下的破折號---
方法2:3個或以上英文字符狀態(tài)下的星號***
方法3:1個或以上英文字符狀態(tài)下的破折號-加1個空格,要3個- - -
方法4:1個或以上英文字符狀態(tài)下的星號* 加1個空格重父,要3個* * *
規(guī)范準(zhǔn)備:公眾號排版設(shè)計規(guī)范
公眾號設(shè)計規(guī)范的要素:
配色方案花椭;價值定位區(qū)塊;導(dǎo)語區(qū)塊房午;標(biāo)題區(qū)塊矿辽;正文區(qū)塊;強(qiáng)調(diào)文本區(qū)塊郭厌;行動呼喚區(qū)塊袋倔。
配色方案:
配色方案包括彩色系和無彩色系;
彩色系一般不使用超過3種色彩折柠;
彩色系一般使用于標(biāo)題或強(qiáng)調(diào)處宾娜;
無彩色系黑白灰一般選用3~4個梯度;
無彩色系一般使用在正文和引用文本扇售。
價值定位區(qū)塊:
價值定位區(qū)塊的應(yīng)用:
提供關(guān)于公眾號的競爭優(yōu)勢前塔、用戶價值等信息;
通常是關(guān)于公眾號的一句話簡介承冰;
公式:目標(biāo)用戶+痛點(diǎn)問題+解決方式华弓;
通常的表現(xiàn)形式為:文章頭圖、作者名稱困乒。
導(dǎo)語區(qū)塊:
一般用于出現(xiàn)在文章的頭部寂屏;
通常用于表現(xiàn)創(chuàng)作背景、寫作動機(jī)或構(gòu)造懸念娜搂;
通常的表現(xiàn)形式為:左邊框+右縮進(jìn)迁霎;
在正文中,引用的表現(xiàn)形式和導(dǎo)語通用
標(biāo)題區(qū)塊的應(yīng)用:
公眾號文章標(biāo)題級別通常不超過3個級別涌攻;
二級標(biāo)題使用頻率最高欧引;
字體表現(xiàn)形式:放大频伤、加粗恳谎、主色;
對齊方式常見:左對齊憋肖、居中
其他修飾風(fēng)格各異因痛,下邊框居多。(em是默認(rèn)的倍數(shù))
正文區(qū)塊的應(yīng)用:
公眾號文章的主體岸更,創(chuàng)建設(shè)計氛圍的重要載體鸵膏;
公眾號默認(rèn)正文字體大小16px像素;
公眾號默認(rèn)正文字體顏色值#3e3e3e;
公眾號支持的字體有限怎炊,但可自定義谭企;
正文字體15px廓译、顏色#333333、1.8倍行距可以快速構(gòu)建一種優(yōu)雅感债查。
強(qiáng)調(diào)文本區(qū)塊的應(yīng)用:
強(qiáng)調(diào)文本區(qū)塊用于突出重點(diǎn)非区、表明身份等場景;
具體的表現(xiàn)形式包括加粗盹廷、傾斜征绸、加主色、放大俄占、下劃線等管怠;
公眾號最常用的兩種強(qiáng)調(diào)形式為:加粗和加主色;
外站超鏈接在公眾號圖文中無法使用缸榄,所以強(qiáng)調(diào)文本會與超鏈接文本混用渤弛。
行動呼喚區(qū)塊的應(yīng)用:
行動呼喚一般放置于公眾號的文末,是所有文章的最終目的甚带;
常用的形式包括二維碼掃描暮芭、商業(yè)購買、原文鏈接欲低、相關(guān)閱讀等辕宏;
通常需要進(jìn)行額外的圖片設(shè)計和嵌套;
二維碼掃描的形式會再次加入經(jīng)過變形的價值定位砾莱。
樣式準(zhǔn)備:自定義公眾號排版樣式
配置公眾號自定義渲染樣式:
安裝Markdown Here 打開在基本渲染css中
配色方案的自定義樣式:
提取顏色值
價值定位區(qū)塊的自定義樣式:
在公眾號后臺素材庫新建圖文中的作者位置輸入價值定位一句話瑞筐,或者在頭部插入價值定位圖作為頭圖。
導(dǎo)語區(qū)塊的自定義樣式:
打開右上角markdown here 選項(xiàng)查看基本渲染css腊瑟,在markdown here輸入欄中聚假,ctrl+f搜索:blockquote
border-left:導(dǎo)語線條:4個像素的DDD色的實(shí)線。
padding:導(dǎo)語線與文字的距離闰非,一個字符大小膘格。
color:導(dǎo)語部分777顏色。
標(biāo)題區(qū)塊的自定義樣式:
標(biāo)題2代碼 ctrl+f搜索:h2
font-size:標(biāo)題2為默認(rèn)字體大小的1.4倍财松。
border_bottom:標(biāo)題下加1個像素DDD色的實(shí)線下劃線瘪贱。
正文區(qū)塊自定義樣式:
正文代碼 ctrl+f搜索:markdown-here-wrapper
font-family:正文英文字體Arenir,微信中中文字體不可改辆毡。
font-size:正文字體大小為15個像素菜秦。
color:正文字體顏色為333號。
line-height:每行間的行高為默認(rèn)的1.8倍舶掖。
margin:與邊框距上下0.5倍球昨,左右1倍。
text-align:正文文字兩邊對齊眨攘。
公眾號markdown排版生效問題:
近期微信公眾號后臺升級主慰,不再支持Markdown Here中,markdown-here-wrapper的全局設(shè)定嚣州。
可以通過渲染代碼中對P的代碼修改:
P{ margin: 0 0 1.2em 0 !important; font-family: Avenir, PT-sans !important; padding: 0.5em 1em !important; font-size: 14px !important; line-height: 1.8em;}
!important是“強(qiáng)制應(yīng)用”意思
強(qiáng)調(diào)文本區(qū)塊自定義樣式:
強(qiáng)調(diào)文本有所不同,在基本渲染css空白處插入:strong
color:文中強(qiáng)調(diào)部分的顏色為00F9A5共螺,一般為規(guī)范文件主色避诽,達(dá)到統(tǒng)一。
font-weight:強(qiáng)調(diào)的字體加粗bold璃谨、不加粗沙庐、減細(xì)。
行動呼喚區(qū)塊自定義樣式:
在文尾插入行動呼喚的圖片佳吞。
注意:結(jié)尾不能是引用的格式拱雏,不然行動呼喚的圖會插在引用部分中。方法1:不要在結(jié)尾用引語底扳。方法2:先插入好頭圖和行動呼喚圖片铸抑,再在中間放入內(nèi)容渲染。
導(dǎo)語
一鍵排版:公眾號自動排版工作流
安裝Markdown渲染插件
翻墻:藍(lán)燈 再安裝google旗下的Markdown插件
公眾號自動排版工作流
注意:圖片需要重新插入的衷模。