文章标题样式设置:
範例標題作法

前往 WordPress 編輯文章,建立一個任一大小的標題 ( Heading )。

點擊剛剛建立的標題,選擇右邊的區塊,並在最下面的「附加的 CSS 類別」中邊輸入一段你自定義的文字,例如我輸入的 cheese-cake
。
這是一個被稱為「class」的 CSS 屬性,你可以先把它理解成標籤的作用,所以說我們,對這個標題貼上了一個叫做cheese-cake
的標籤,等等會用到。


接著回到網站前台,點選 WordPress 最上方黑框框處的自訂
選項,進入自訂模式。


找到最下方的附加的 CSS
欄位。


將以下代碼複製貼上至空白處,並按下發佈
。
.cheese-cake{
background-color: #f7f7f7;
padding: 16px 0 16px 24px;
border-left: 8px solid #e85a5a;
color: #333 !important;
}


完成之後,你應該就會得到這樣子樣式的標題了!



如果你之後想要製作出一樣的樣式標題,那你只要在想要的標題中再寫上一樣的 CSS 類別,即可完成!


剛剛發生了什麼事?
剛剛我們做了一個複製貼上程式碼的動作,就造成了這個結果,是為什麼呢?
.cheese-cake{
background-color: #f7f7f7; /* 告訴電腦背景顏色 */
padding: 16px 0 16px 24px; /* 告訴電腦內距要多大 */
border-left: 8px solid #e85a5a; /* 告訴電腦左邊框要多寬、跟顏色 */
color: #333 !important; /* 告訴電腦文字顏色 */
}
剛剛貼上的這段 CSS 程式碼的意思,是只要有 cheese-cake
這個 class
的內容,都會受到這段程式碼影響。
而為什麼你會有cheese-cake
這個 class
呢?那是因為我們在 Step 1 的時候,有自己定義class
。
而如果想要在自訂 CSS 的欄位中選擇到這個class
的話,我們必須要在程式碼前面加上一個.
,這個的話只能請你背起來,因為是固定用法。
至於程式碼的內容,其實就算你不懂 CSS,多少也能猜出在講什麼,因為上面都是寫英文,不過我還是稍微講解一下:
background-color: #f7f7f7;
-> 代表背景顏色是 #f7f7f7 這個顏色padding: 16px 0 16px 24px;
-> 分別代表內距上、右、下、左各項的數值border-left: 8px solid #e85a5a;
-> 代表左邊線的粗細以及顏色color: #333 !important;
-> 代表字體顏色是 #333 這個顏色,!important
代表它的優先等級是最高的
如何修改成自己的 Style?
當然,我也不希望我這篇文貼出之後,所有人的標題都長得跟教學文章一樣,相信你最終的目的,還是想要自己設計專屬的標題樣式對吧?


舉例來說,我拿一個我平常寫網站用到的 JavaScript 框架 Vue.js 的 LOGO 做為例子,如果我想要做出一個符合它色系的標題樣式,這該如何做到呢?
稍微分析一下,你會發現其實我只需要把最左邊的邊框調成綠色 ( #41B883
),並且把背景調成深灰色 ( #34495E
),然後把文字調成白色 ( #fff
),這樣就完成了!


在這邊我先公佈解答,其實你拿來跟原本的例子比較,就會發現 CSS 的邏輯其實很簡單:就是很單純的用英文告訴電腦,你想要怎麼樣的樣式。
.cheese-cake{
background-color: #34495E; /* 告訴電腦背景顏色 */
padding: 16px 0 16px 24px; /* 告訴電腦內距要多大 */
border-left: 8px solid #41B883; /* 告訴電腦左邊框要多寬、跟顏色 */
color: #ffffff !important; /* 告訴電腦文字顏色 */
}
下载按钮与投票按钮:


在使用站点文章区块时,我们可以通过区块找到【nicetheme区块】其中有下载投票等预设内容,当我们需要发布相关涉及此类需求时,可以引用这些区块。下面是示例。
如何引用提示框:
使用教程:在文章中复制下方对应需要颜色的提示框,以文本模式插入使用。(替换掉其中的文本内容即可)
<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>
按钮设置:
攻略站的按钮形式有两种,我们可以通过HTML引用相应的代码,以下展示第一种按钮样式。(我们用需要指定的链接替换代码中的【#】,把需要的文字内容替换掉代码中的【Primary】等文字即可)
- 样式一(饱和式按钮)
<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-secondary" href="#">Secondary</a>
<a class="btn btn-success" href="#">Success</a>
<a class="btn btn-danger" href="#">danger</a>
<a class="btn btn-warning" href="#">warning</a>
<a class="btn btn-info" href="#">info</a>
<a class="btn btn-light" href="#">light</a>
<a class="btn btn-dark" href="#">dark</a>
- 样式二(细线框式按钮)
<a class="btn btn-outline-primary" href="#">Primary</a>
<a class="btn btn-outline-secondary" href="#">Secondary</a>
<a class="btn btn-outline-success" href="#">Success</a>
<a class="btn btn-outline-danger" href="#">Danger</a>
<a class="btn btn-outline-warning" href="#">Warning</a>
<a class="btn btn-outline-info" href="#">Info</a>
<a class="btn btn-outline-light" href="#">Light</a>
<a class="btn btn-outline-dark" href="#">Dark</a>
网易见外工作台:
什么是网易见外工作台,首先,见外工作台为一个集成的翻译工作台,这里可以上传需要翻译的文档、视频、图片与语音等内容。




网站负责一些搬运内容的编辑,如果有需求,可以把视频导入见外工作台,为了防止b站撞车,我们优先上传视频,因为见外工作台的视频翻译是外挂字幕,后期可以上传,我们只需要第一时间发布相关内容即可。


处理好后的视频编辑页面我们选中中文字幕,不要双语,对于那些狗屁不通的语句我们需要自己按照中国的文法进行修正,使这个机翻的表达更加准确。
工作台地址:https://jianwai.youdao.com/
站点视频布局:(此项待更新)
站内视频有两种布局方式,根据我们内容需求设置。
- 第一种


如果是单视频,介绍相对较少的搬运或者其他视频内容,我们可以设置为宽页大视频的样式。
- 首先在媒体库中上传视频(小于50M可直接上传,大于50M发b站和茶话会,让真理传到对象存储OSS中)


- 从编辑进入视频页面中。


- 编辑页面我们看到URL选框(这个地址是定向到对象存储OSS中的)注:对象存储OSS就是一个存储全站所有视频图片的云盘服务器,我们全站依靠这个高效快速的云盘才能过日子的样子。


- 在文章编辑页面我们选中格式为视频。


- 在下方输入我们从媒体库URL或者B站的视频链接。


- 更新文章后即为宽页大视频
文章内视频:
当我们的内容较长时,不可能用宽页大视频凸显我们的主要内容,这个时候我们就需要通过区块中添加视频→URL插入→插入视频地址,就可以实现视频插入。

