知識分享

使用CSS時,因為 CSS 為 "層疊" 的,也就是同一個元素可以利用利用不同的 selector 規則,把樣式疊加上去,但當不同的規則間有衝突時,例如 a.title{color:#000;} 與 a{color:#333;} 兩個規則都設定了color的樣式,這時就要考慮權重來決定最後要以哪個規則來呈現 color 這個發生衝突的樣式 。

權重如下:

規則 權重 範例
行內樣式 1000  <a style="...">
id 100  #title
attribute / class / pseudo-class  10
更多

http_variables

變數名稱 說明
$args Request 的參數
也就是網址中 問號 ? 後面的所有參數。
如: example.info?p1=1&p2=2
則 $args = "p1=1&p2=2"
$binary_remote_addr  
$body_bytes_sent  
$content_length  
$content_type Request Headers 中的 "Content-Type"
更多

步驟如下

1.  開啟 VS Code,然後按 `Ctr`l +  `,`
2.  搜尋 settings.json
3.  點擊 "在 settings.json 內編輯",會開啟settings.json 的 頁籤
4.  增加或修改以下內容,其中 CMDER_ROOT 是 windows 的 環境變數,要先設定為 cmder 的安裝目錄

    "terminal.integrated.shell.windows": "cmd.exe",
    "terminal.integrated.env.windows": {"CMDER_ROOT": "[cmder_root]"},
    "terminal.integrated.shellArgs.windows": [
        "/k", "[cmder_root]\\vendor\\init.bat"
    ]

5.  重啟VS Code 

更多

Configuration API 提供了一個中心地帶,用來儲存模組的組態資料 (configuration data)。簡單組態的如 "網站名稱" , 複雜點的則如 "views" 或 "content type" 等設定。

組態所儲存的資料,可以用在開發站 synchronize 到正式站的。通常是那些在建站階段會修改,但正式站不太會有機會變動的。 如果是要儲存 local變數這種不需要被轉移的資料,則應該使用 State API。

interface abstract trait
  1. 規範子類/子介面一定要具備某些東西,包含變數與function
  2. 可以被多重 繼承(extends),子介面會擁有父母們的所有規範。但父母們之間的function不能重名。
  3. interface裡只能有public function,且都是空的。
  4. 可以有 constant ,但不能被override
  5. implement 的時候,必須 override所有的fucntion
  6. 不能直接 new 出來,要先有 class
更多

本文參考: 1. https://www.drupal.org/docs/8/api/services-and-dependency-injection/structure-of-a-service-file 2. https://symfony.com/doc/3.4/service_container.html

Services 源自於 Symfony,代表的是 有用的物件(object) ,例如 你有一個 Mail 物件(object),它可以在另一個 object 把資料存檔的時候幫你寄信之類的。 而這類型的 Service 會存在於 service container 的特殊object 裡,透過 services.yml 就可以註冊這些 有用的物件 並放進 Drupal 的 servcie container 裡。

更多

步驟如下:

  1. 需要先更新 repository
    sudo add-apt-repository ppa:certbot/certbot
    sudo apt-get update
  2. 然後安裝 python-certbot-nginx
    sudo apt-get install python-certbot-nginx
  3. 取得SSL 憑證(依照指示進行)
    sudo certbot --nginx -d example.com -d www.example.com
  4. 測試auto renew
    sudo certbot renew --dry-run

Middleware 會在一個頁面或一群頁面render之前執行的程式。

例如驗證使用者權限之類的功能,就會以middleware的方式來處理。

middleware會接收到一個context的變數作為第一個參數,關於context 裡面有key,可參考這裡

middleware被執行的順序如下:

  1. nuxt.config.js
  2. 符合的 layout
  3. 符合的 page

 

以下是參考範例
先在middleware裡面建立要執行的程式,檔名會自動可成為被呼叫的名稱

middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

nuxt.config.js

module.
更多

說明文件:https://nuxtjs.org/guide/routing

基本概念:只要在 pages 目錄及子目錄中,建立相關的index.vue檔,就會自動生成對應的route

例如

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

就可以產生  三個 route,分別是  "/" ,  "/user",  "/user/one"

 

動態路由

要建立動態路由也滿簡單的,就是在vue檔,加上 下底線 "_" 的前綴 ,如

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

以上範例中,有三個動態路由,分別是  "/{slug}/" , "/{slug}/comments" 與 "users/{id}"

 

說明文件:https://nuxtjs.org/guide/configuration

nuxt.config.js 的內容大概長這樣

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'my-project',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070
更多