前端網頁 疑難雜症 整理

這篇記錄了我在處理網頁時遇到的問題。

Q: 後台是用 textarea，前台要怎麼顯示後台輸入文字格式

1. 前台顯示區加上 white-space 屬性:

pre-wrap 保留空白符序列，但是正常的進行換行
pre-line 合併空白符序列，但是保留換行符
pre: 空白會被瀏覽器保留, 在遇到換行符或者 <br> 元素時才會換行,
類似 html 中的 <pre> 程式碼區塊

2. js 控制替換 : 連結

---

Q: 讓 hover 在手機上沒作用

1. css 方法

a:hover { color: blue; }
        @media (hover: none) {
            a:hover { color: inherit; }
        }

2. js 方法

function hasTouch() {
  return 'ontouchstart' in document.documentElement
         || navigator.maxTouchPoints > 0
         || navigator.msMaxTouchPoints > 0;
}

if (hasTouch()) { // remove all the :hover stylesheets
  try { // prevent exception on browsers not supporting DOM styleSheets properly
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

---

Q: 讓 hover 在手機上還有作用

1. css 方法

@media (hover: hover) and (pointer: fine) {
          a:hover { color: red; }
      }

---

Q: 遇到引用 JS 卻沒有效果?

1. 要用 JS 操縱網頁的DOM元素時，必須等網頁完全載入後才可安全地進行操作，而要確保網頁載入，在 JS 檔案中加上以下擇一 :

$(document).ready(function(){}; 或是 $(function() {}); //左排的簡寫

2. 引用 JS 的先後位置調動一下

---

Q: 如果換了設定網址還是沒能連上測試網站?

<add key=”Target” value=”Peugeot”/> 的 Peugeot 可做更改，更改至你要的專案名稱

---

Q: 在剛申請SSL憑證情況下，跑專案網頁出現 cURL error 60: SSL certificate problem: unable to get local issuer certificate (see https://curl.haxx.se/libcurl/c/libcurl-errors.html)

Ａ: 因為本身電腦內也要先設定才能連到有憑證的網頁修改

1. 確認伺服器需要的金鑰副檔名

如你的伺服器是 Nginx、Apache…等，需要的金要副檔名是 .pem， 而Certificate Authority 發的多半金鑰檔是 .crt / .key，則可以用 OpenSSL 這軟體來轉換成 .pem， 再將此 .pem 檔案放於 C:\你php的路徑\extras\ssl 之下

2. 確認 mod_ssl.so 是否有存在

確認 mod_ssl.so 是否有在 C:\你apache的路徑\modules 之下

3. 開啟 mod_ssl、php_openssl.dll

httpd.conf (C:\你apache的路徑\conf) 中把 mod_ssl 註解刪除 php.ini (C:\你php的路徑\) 中把 php_openssl.dll 註解刪除

4. 把證書位置加入 php.ini 

在 php.ini 中找這行 curl.cainfo = 填上金鑰路徑
curl.cainfo = "C:\你php的路徑\extras\ssl\cacert.pem" 後儲存

---

Q: php 中限制某頁面可以使用某程式

Ａ: 使用時機？像是當 js、css 引用的頁面太多，但又不是每頁都需要，就可以限制。

@if(($_SERVER['REQUEST_URI'] == '/')
|| (strpos($_SERVER['REQUEST_URI'], '頁面名稱'))
<!-- 這邊放上你要在上面頁面中使用的程式 -->
<script src="{{ asset('你的套件.js') }}" type="text/javascript"></script>
@endif

---

Q: laravel php 放上空間後，開網頁顯示 your app key is missing

Ａ: 沒有網頁金鑰的意思。

1. 檢查 .env 檔案裡，APP_KEY 有沒有金鑰？ 沒有請產生一個金鑰 php artisan key:generate
   如果更新檔案後，還是說找不到金鑰，請執行 php artisan config:cache 清除 cache。
2. 檢查 .env 檔案有沒有被上傳到空間？ 沒有請找到 .env 後上傳。
   mac 找隱藏檔案快捷鍵：同時按住鍵盤的「Shift」+「Command」+「.」