teleren/devto huggingface dataset:
Top 10 Unsplash Alternatives
Tags: productivity, opensource, devtools, writing
Published: 2020-03-23 11:54:42

Hey developers, ever wondered where bloggers get copyright free amazing photos for their blogs, thumbnails and baners etc? You must've definitely used `Unsplash` but here are some other alternatives with their links. :blush:


- [Foter](https://foter.com/)
- [Free Range Stock](https://freerangestock.com/)
- [Gratisography](https://gratisography.com/)
- [Magdeleine](https://magdeleine.co/)
- [BucketListy](https://www.bucketlistly.blog/photos)
- [Pic Jumbo](https://picjumbo.com/)
- [Picography](https://picography.co/)
- [Pixaba](https://pixabay.com/)y
- [Unsplash](https://unsplash.com/)
- [Morgue File](https://morguefile.com/)
- [Pexels](https://www.pexels.com/)
- [Splitshire](https://www.splitshire.com/)
- [Stockvault](https://www.stockvault.net/)
- [Photopin](http://photopin.com/)
- [Image Base](https://www.imagebase.net/?lang=en)
- [RGB Stock](https://www.rgbstock.com/)

Hope you find it useful for everyone. :+1:

Originally posted on [HariHaran Subramanian](https://hariharan-subramanian.netlify.com/posts/2020/03/top-10-unsplash-alternatives/)

Thanks for reading :pray::pray:
Solution to Leetcode’s Maximum Subarray
Tags: leetcode, datastructure, algorithms, problemsolving
Published: 2020-03-23 11:11:20

This is an easy [Leetcode problem 53](https://leetcode.com/problems/maximum-subarray/). See below image for description:

![problem description]
(https://miro.medium.com/max/860/1*3ymjM19wozTRYha9sJHOEQ.png)

<h1>ALGORITHM</h1>
1.Have a global variable currentSum;

2.Have a global variable max that will also be the return value;

3.Loop through the array, check if the current element (nums[i]) is greater than the current sum and current element put together (i.e currentSum + nums[i]);

4.if it is greater, reassign the currentSum variable to be the current element, nums[i];

5.if it is not, reassign the currentSum variable to be the summation of both the existing current sum and the current array element (currentSum = currentSum + nums[i])

6.finally, check if the currentSum is greater than the current maximum. if it is, reassign the current max to be equal to currentSum.

7.Then return max.

**CODE**
```
public static int maxSubArray(int[] nums) {

    int currentSum = nums[0];
    int max = nums[0];

    for (int i = 1; i < nums.length; i++) {
        if (nums[i] > (currentSum + nums[i]))
            currentSum = nums[i];
        else
            currentSum = currentSum + nums[i];

        if (currentSum > max) {
            max = currentSum;
        }
    }
    return max;
}
```

**OUTCOME**
![outcome image]
(https://miro.medium.com/max/1018/1*3c6cW3x0mSStQBqTFe9xog.png)

**IMPROVEMENT**
Math.max checks the maximum/bigger value between two numbers. So we can replace those if statements with Math.max(). Cleaner code is shown below:
 
**IMPROVED CODE**
```
 public static int maxSubArray(int[] nums) {

        int currentSum = nums[0];
        int max = nums[0];

        for (int i = 1; i < nums.length; i++) {

            //cleaner and simple
            currentSum = Math.max(nums[i], currentSum + nums[i]);

            max = Math.max(currentSum, max);
        }
        return max;
    }
```
**LESSONS**
1.Don’t always be in the box of a particular algorithm you thought would work, just the way i thought Sliding window would work.

2.Using library functions where and when needed.

Thank you for reading. Please leave a comment.
create react app + preact = 💖
Tags: preact, react, createreactapp, javascript
Published: 2020-03-23 11:07:10

---
title: create react app + preact = 💖
published: true
description: Create React App with Preact without ejecting! 
tags: [preact, react, create-react-app, javascript]
---

TL;DR: [cra-preact](https://github.com/shilangyu/cra-preact)


Preact is a popular alternative to React. It provides most features that React does in a much smaller package:

[2.6kB](https://bundlephobia.com/result?p=react@16.13.0) + [35.9kB](https://bundlephobia.com/result?p=react-dom@16.13.0) vs [3.7kB](https://bundlephobia.com/result?p=preact@10.3.3)!

But you want to use Create React App (CRA) for the ease of development.  
What to do then? Well, Preact gives a CRA alternative: [preact-cli](https://github.com/preactjs/preact-cli). It is great (it prerenders your routes!), I recommend using it. However it is not ideal in every situation. Let's say you already have a project using CRA and don't to deal with migration to `preact-cli`. Another thing is that the configuration is exposed and can sometimes be overwhelming.

Here's where `cra-preact` comes to rescue us! The idea is simple: I want to use CRA but I want to have preact instead of react. No problem:

```diff
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "cra-preact start",
+ "build": "cra-preact build",
+ "test": "cra-preact test",
  "eject": "react-scripts eject"
}
```

Yep, that's it. Now watch the bundle size go down. Here's the bundle size of an initial project created with `create-react-app myapp`, with react and preact respectively:

![](https://github.com/shilangyu/cra-preact/raw/master/assets/initial.png)

Get started now!
https://github.com/shilangyu/cra-preact
Purpose of Symbol()
Tags: javascript, todayilearned
Published: 2020-03-23 10:58:01

##Introduction
This post is about how we can make use of Symbol() in javascript.

A “symbol” represents a unique identifier which can be created using Symbol():
```javascript
let firstSymbol = Symbol();
typeof(firstSymbol)  //symbol
```

We can give description to a symbol like:
```javascript
let dummy = Symbol("dummy");
console.log(dummy);   // Symbol(dummy)
```

###What is the use??
Symbols allow us to create “hidden” properties of an object, that no other part of code can accidentally access or overwrite.

1) Using symbols as unique values
Whenever we use a string or a number in our code, we tend to use enums.We should use symbols instead. 

```javascript
let statuses = {
    PENDING: Symbol('Pending'),
    REQUESTED: Symbol('Requested'),
    IN_PROGRESS: Symbol('In progress'),
    COMPLETED: Symbol('Completed'),
    ERROR: Symbol('Error')
};
// complete a task
myObject.setStatus(statuses.COMPLETED);
```

2) Using symbol as the computed property name of an object

```javascript
let status = Symbol('status');
let task = {
    [status]: statuses.REQUESTED,
    description: 'Request'
};
console.log(task);
//{description: "Request", Symbol(status): Symbol(Requested)}
```

As mentioned at the start, it is just a unique identifier. There could be other use cases where we can make use of symbol.

Hope it helps you.
Cheers!!
Ruby Package
Tags: ruby
Published: 2020-03-23 10:26:33

Hi, 

I have three separate files, I would like to have a script that would install the below files in the local folder 

*Package Items*
https://gitlab.com/darkout/builder/-/raw/master/_data/do-hero-content.yml	
https://gitlab.com/darkout/builder/-/raw/master/_includes/do-hero-content.html	
https://gitlab.com/darkout/builder/-/raw/master/_sass/modules/do-hero-content.scss

*Sample code example*
```install do-hero```

Should install the above three files in the local in the following folders

*expected output: to have the files in the local below folder*
local > /_data/do-hero-content.yml
local > /_includes/do-hero-content.html
local > /_sass/modules/do-hero-content.scss

Could someone advise me what's the best way to execute this? 

Thanks
Shovan
Countries To Engineer AI For Futuristic Policing (Just Like In The Movies)
Tags: engineerai, sachindevduggal, coronavirus, covid19
Published: 2020-03-23 10:22:02

Surveillance and Artificial Intelligence go hand in hand. Scientists managed to engineer AI facial tracking bots that are able to narrowly track down persons of Interest, with a 12.5% accuracy. This might seem low now, but in the future, this number is bound to rise. Now, with the recent [Coronavirus Pandemic looming](https://medium.com/@aliamalhotra/engineer-ai-in-the-time-of-corona-combating-covid-19-through-artificial-intelligence-bface0ff6c7b) over our heads, scientists at Carnegie Mellon, who developed AI-powered traffic stops in 2014, have been able engineer AI in CCTV cameras, which employ “patient tracking” software, used identify those potential infected at risk.

**Policing Through AI**

Recently, public sentiments against the police have soured. TV Shows like the 2019 version of The Watchmen, have shed the blue bloods in a dire light. It’s safe to say that the people working behind the uniform are people as well. Policing software has existed for quite some time now, although not as effective as one would like. With the recent Coronavirus (Covid-19) pandemic, a new facial recognition software has sprung up, that can partially do the police’s job for them.

Developed by China, it cannot track facial features, but only potentially criminal behavior. Before you have thoughts of dictatorial regimes popping through your head, criminal behavior here implies deluding or hiding from the authorities, and withholding cases of Covid-19. Couching incessantly, sneezing, looking pale, etc. are tells for this [Engineer AI](https://inc42.com/resources/bridging-indias-education-gaps-with-cloud-computing/
).

While we have a long way to implement proper police reform, steps like these would ease soft-criminality, by allowing officials to engineer AI tracking machines, who look out for the Coronavirus now, and will criminals later.
Two things to immediately take note of when using JavaScript's array sort() method
Tags: javascript
Published: 2020-03-23 10:12:59

There are two things to take note of, when using JavaScript's array `sort()` method.

The first one is easier to remember: it is sorting in place.  That is, no new array is created.  This is easier to remember, because in ES5, the only two array methods that return a new array is `slice()` and `concat()`. So `sort()` doesn't return a new array and therefore it must be sorting in place.

The second one is, even when all the elements are numbers, it is sorted as if they are strings. So it is by lexical order ([by unicode UTF-16 order](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)).

```js
> arr = [1, 3, 5, 11111111]
[ 1, 3, 5, 11111111 ]

> arr.sort()
[ 1, 11111111, 3, 5 ]
```

To sort them numberically, simply supply a comparison function:

```js
> arr = [1, 3, 5, 11111111, 20, 30]
[ 1, 3, 5, 11111111, 20, 30 ]

> arr.sort((a, b) => a - b)
[ 1, 3, 5, 20, 30, 11111111 ]
```

In coding competition measured by time to finish, or in an online interview that requires the code to be running successfully for all the test cases within 10 to 15 minutes, this can be important.

So the two things to remember are: (1) sorted in place (2) as if they are strings.
IPFS
Published: 2020-03-23 10:08:11

[什麼是「IPFS」？](https://blockcast.it/2019/10/16/let-me-tell-you-what-is-ipfs/)

「IPFS」星際文件系統 (InterPlanetary File System) 是一個分佈式的 web，點到點超媒體協議。可以讓我們的互聯網速度更快、更加安全，並且更加開放。IPFS 協議的目標是取代傳統的互聯網協議 HTTP。

[IPFS 和區塊鏈有什麼區別？](https://www.chainnews.com/zh-hant/articles/900937828919.htm)
"There has been an error"...
Tags: watercooler, ux, errors, discuss
Published: 2020-03-23 10:04:42

> “The best error message is the one that never shows up” 
> — **Thomas Fuchs**

****

**I've never taken error messages that seriously,** 
now I think they can decide whether a user leans towards your app or some other one, let me tell you why.

This weekend I wanted to start a new TV Series, I checked Netflix out and did not find anything interesting so I checked Amazon Prime Video and found a cool series there and hit play... An error then appeared:

> **"This video can't be played"**

I thought _"crap this is unfortunate..."_, and decided to go back to Netflix and watch some crap show instead, I then realized there was some error with my connection and it didn't work either.

This is the thing... because Amazon said that the video could not be played, I guessed they meant in general, like if it was restricted by location or something... so I decided not to use their service.

## Some examples 
Here is an example of a really bad error:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/idbo3o9onrrn5jd1ispw.jpeg)

> “Something happened”
> Microsoft, Windows 10


## To wrap things up
#### An error message can be critical, it is really different to say:
_"This video can't be played"_

**as opposed to**

_"This video can't be played at the moment, please check your internet connection"_
Best Way to Get Traffic with Trust Through Web Directories
Tags: seo, directory, directories, catalog
Published: 2020-03-23 09:11:38


Web Directories don’t place your site on Google's first page with the best of SEO, but a web directory is a source that gives you returning traffic with trust. For a successful business, it is important to have consistent traffic that only web directories can promise. By fulfilling SEO criteria, you may get traffic for a day, week or month, however, by enlisting your site on a reputable web directory, your site will stay in sight of your target audience.

Here’s a list of some reputable directories:

[picktu.com](picktu.com) Daily Traffic: 53,414
[ussitedir.com](https://ussitedir.com) Daily Traffic: 15
[happal.com](happal.com) Daily Traffic: 46,196
[jewana.com](jewana.com) Daily Traffic: 33,990
[livepopular.com](livepopular.com) Daily Traffic: 37,952
[thalesdirectory.com](thalesdirectory.com) Daily Traffic: 38,153
[eslovar.com](eslovar.com) Daily Traffic: 7,478
[h-log.com](h-log.com) Daily Traffic: 15,862
[busybits.com](busybits.com) Daily Traffic: 21,365
[bocaiw.net](bocaiw.net) Daily Traffic: 26,707
[usgeo.org](usgeo.org) Daily Traffic: 37,390
Über Dietmar Hopp
Tags: senderlumen, soccer, bundesliga
Published: 2020-03-23 08:43:53

_Dies ist die Bekanntmachung Nr. 1 ([Original vom 06.03.2020](http://simp.ly/publish/mBqY1g)):_

### Hopp-Hopp Riots

Wir wissen nicht, ob der SAP-Mitbegründer Dietmar Hopp ein Hurensohn ist. Was wir wissen, ist, daß sein Vater ein Nazi gewesen ist und er sehr viel Verständnis dafür hat.

Dietmar Hopp ist ein reicher Mann, deshalb konnte er sich seinen Lieblingsfußballverein einfach kaufen. Das ist uneingeschränkt zu kritisieren – und auch die Tatsache, daß Ölscheichs, Oligarchen und Energy-Drinks bei anderen Clubs noch viel schändlicher agieren, ändert daran nichts.

Durch sein Verhalten macht es Dietmar Hopp nicht nur in unseren Augen schlimmer. Auf überzogene Kritik und Beleidigungen mit Massenanzeigen zu reagieren, ist als Fan von Barbara Streisand sein gutes Recht. Uns als Fußballfans allerdings interessiert das nicht.

Sich selbst und sein finanzielles Engagement bei der TSG Hoffenheim als Diskriminierungsopfer dargestellt sehen wollen, gleichgestellt mit ungleich übleren rassistisch motivierten Verfehlungen, ist in seiner abgefeimten Ungeheuerlichkeit uneingeschränkt zu verdammen.

### Eskalation – können wir auch

Sämtliche SAP-Produkte zu boykottieren, ist uns noch nie schwergefallen. Nach Beschlusslage der gestrigen ZK-Versammlung wird diese Maßnahme auf die über 100.000 SAP-Mitarbeiter ausgeweitet.

Vom heutigen Tage an werden sie allesamt – Pförtner bis Aufsichtsratsvorsitzender – als Hopp-Sympathisanten und -Supporter angesehen und haben demnach mit entsprechenden Konsequenzen zu rechnen.

> **"Este es tu cuota de sangre para la revolución."**

_gez._

- presidente g0nzal0
- Escort Glitch
- Tallulah Spankhead
- Señor Geilnice
- HektoChantal
- Pater Noir
Spring @Component @Bean 알고 쓰기
Tags: java, korean, spring
Published: 2020-03-23 08:42:28

단도직입적으로 말하겠다. 알고 써라. 이 둘의 차이만 알아도 당신은 스프링이 어떻게 돌아가는지 반은 알고 들어간다고 봐도 좋다.

알다시피 스프링은 폭망한 EJB 방식을 대체한다. 그리고 어노테이션 기반은 개발생산성에 엄청난 향상을 불러와줬다.

자, 이제 알아보자. 두 어노테이션의 차이를!

## `@Component`

싱글톤 클래스 빈을 생성하는 어노테이션이다. 물론 `@Scope("Prototype")` 어노테이션을 통해 싱글톤이 아닌 빈을 생성할 수도 있다. 또한 `@Service`, `@Repository` 어노테이션 또한 이에 포함된다.

이 어노테이션은 선언적(Declarative)인 어노테이션이다. 즉, 패키지 스캔 안에 이 어노테이션은 "이 클래스를 정의했으니 빈으로 등록해줘." 라는 뜻이 된다.

이 어노테이션은 질리도록 쓰기 때문에 이상 설명을 마치도록 하겠다.

## `@Bean`

이녀석은 주로 `@Configuration` 어노테이션이 들어간 Spring 을 설정하는 클래스 내에 들어가는 메소드에서 선언한다. 만약 이를 `@Component` 로 따지면, 스프링은 스캔할 패키지를 검색해서 `@Component` 어노테이션을 발견하면 이렇게 등록하는 꼴이 된다.

```java
@Component
public class MyBean {
    // ...
}

// 스프링 내부 처리를 이해하기 쉽게 표현하면?

@Bean
public MyBean myBean() {
    return new MyBean();
}
```

물론 생성자에 인자가 있다면 그 빈이 있는지 확인 후 넣는다. 물론 없으면 스프링은 오류를 뱉으며 앱을 끝내버린다.

자, 그럼 이녀석의 존재 이유는?

예전 스프링은 XML 설정만 가능했으며, 3.0 부터 본격적인 어노테이션 지원이 시작되었다.
물론 최신 버전인 5.2 에서도 XML 설정은 지원한다. XML 으로 설정할 때 장점이라면?
바로 넣었다 뺐다, 클래스 바꾸는 등의 유연한 설정이 가능하다는 이점이다. 그냥 XML 파일 편집하고 앱을 재시작하면 끝이다. 정말 간단하다. 필요없는 빈은 주석처리하면 된다. 어자피 XML 이나 클래스나 수정하면 앱 재시작 해야 하는건 매한가지다.
또한 스캔할 필요 없이 빈 등록이 빠르게 이루어진다. XML 설정을 고수하는 시니어 개발자들이 이런 매력 때문에 XML 설정을 빠져나가려 하지 않는 것이다.
위 빈 설정을 클래스 기반에서는 `@Bean` 어노테이션 또한 이런 유연한 작업을 가능하게 해준다. 예를 들면,

```java
// prop 정의 안하면 빈 문자열로. null 받으면 switch 문에서 NullPointerException 발생함
@Value("${my.prop.animal:}")
private String animal;

@Bean
public Animal animal() {
    switch(animal) {
        case "dog": return new Dog();
        case "cat": return new Cat();
        case "cow": return new Cow();
        default: throw new InvalidStateException("동물 정의하고 다시 실행할 것!");
    }
}
```

이런 식으로 프로퍼티 값을 읽어들여 여기에 맞는 구현 클래스를 인터페이스 기반 빈에 등록해주는 유연한 처리가 가능하다는 것.
또한, `@Component` 어노테이션 넣기 곤란한 타사 라이브러리 클래스를 빈에 등록할 때도 `@Bean` 어노테이션을 통한 메소드를 통해 등록할 수 있다.

## 정리

일반적인 당신의 빈 등록은 간편하게 `@Component` 어노테이션으로, 유연한 빈 등록이 필요하다면 `@Configuration` 어노테이션이 들어간 클래스 내 `@Bean` 어노테이션 메소드 선언으로!
아, Spring Boot의 경우 `@SpringBootApplication` 어노테이션이 들어간 스프링 실행부에서도 `@Bean` 어노테이션이 깃든 메소드 등록이 가능하다는 것도 잊지 말자.
Socially Responsible Companies During COVID-19: Giving Out Free Products
Tags: business, coronavirus, technology, software
Published: 2020-03-23 08:19:01

Coronavirus doesn’t just pose a threat to human health it also poses threat to the economy. It is especially hard for small companies to survive, to manage work from home flow and security.
Gladly there are companies that can survive themselves and can even help other businesses. Companies are taking action and being socially responsible by providing others with free tools they can use during this crisis.

<b>Microsoft — offering free trial for Team Chat</b>

Microsoft, trying to be an ethical company, decided to offer free trials for their Team Chat App, which will help companies communicate with their employees while working from home.

<b>Surfshark — giving out Free VPN for small businesses</b>

Surfshark is a well known Cyber Security company that provides VPN services. During the COVID-19 pandemic they decided to give a 6 months plan for small companies for free. Read more about it <a href="https://surfshark.com/blog/corona-response">here.</a>

<b>Google — free Access to Hangouts Meet</b>

Google decided to allow free access to their Hangouts Meet. The free access will be available for all G suite and G Suit for education users.

<b>Zoom — free video conference software</b>

Although zoom has always offered a free version, now they are trying to offer maximum reliability and capacity for free. Also they are offering information sessions to help businesses use Zoom.

<b>LogMeIn — Emergency Remote Work Kits</b>

LogMeIn is offering “Emergency remote work kits” for free for three months. They are created for non profit organizations, schools, health care organizations and small businesses.

<b>Jamm — audio-visual communication tool</b>

Jamm is offering free audio-visual communication tools built to help remote workers.

<b>Meero — Free Large File Transfers</b>

Meero (file transfer service) is offering their services for free and will support large file transfers helping companies while working remotely.

<b>OneDine — Free Tap & Pay</b>

Since paying by credit cards is preferred and recommended right now, OneDine is offering a free Tap & Pay touchless payment system which will help restaurants.

Source: https://medium.com/@lillyjones2120/socially-responsible-companies-during-quarantine-giving-out-free-products-48766a4f7572
Diffusion Map for manifold learning, Theory and Implementation
Tags: machinelearning, datascience
Published: 2020-03-23 08:11:52

‘Curse of dimensionality’ is a well-known problem in Data Science, which often causes poor performance, inaccurate results, and, most importantly, a similarity measure break-down. The primary cause of this is because high dimensional datasets are typically sparse, and often a lower-dimensional structure or ‘Manifold’ would embed this data. So there is a non-linear relationship among the variables (or features or dimensions), which we need to learn to compute better similarity.

Read more at https://randomwalk.in/python/ml/2020/03/14/Diffusion-Map.html
Overwriting base_href in SilverStripe 4
Tags: silverstripe, seo
Published: 2020-03-23 07:54:30

---
title: Overwriting base_href in SilverStripe 4
published: true
description: How to overwrite the base_href in SilverStripe 4
tags: 
  - SilverStripe
  - SEO
canonical_url: https://bringyourownideas.com/blog/overwriting-base-href-in-silverstripe-4/
---

There are use-cases which require to overwrite the URL the SilverStripe base-tag <% base_href %> defined in the theme. Usually this is the case if you are using a hosting environment which doesn't allow you to control the header parameters passed through by your web-server to the PHP run-time environment. For example this could be required if you are keen to enforce a SSL-only hosting setup behind a firewall or CDN.

There is a simple way to overwrite the base-href URL. The following configuration lives within a newly created file called "*app/_config/baseurl.yml*":

```yml
---
Name: baseurl
Only:
  environment: 'live'
---
SilverStripe\Control\Director:
  alternate_base_url: "https://bringyourownideas.com"
```

This will ensure your base href URL is set to the defined URL, here "https://bringyourownideas.com".

Keep in mind, you will need to set the **SS_ENVIRONMENT_TYPE** in your local *.env*-file to dev to ensure this doesn't apply on your local development environment:

```env
SS_ENVIRONMENT_TYPE="dev"
```
【WordPress】サイト内検索実装までの流れ
Tags: wordpress
Published: 2020-03-23 07:30:01

# 検索窓の挿入
```
<?php get_search_form(); ?>
```

# 検索窓 searchform.php
php
```
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'サイト内検索', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
</form>
```

style
```
.search-field{
background:#e8f3ff;
text-align:center;
border:none;
box-shadow:2px 2px 2px #e0e0e0;
height:40px;
padding:0 0 0 10px;

}

.search-form{
margin:10px 0;
text-align:center;
}

/*****サイドバー使うなら***/
.formside{
width:165px;
margin-top: 20px;
}
```
# サイト内検索結果ページ search.php
php
```
<?php get_search_form(); ?>
<div class="search-result">


<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<a href="<?php the_permalink(); ?>">
<div class="search-result-link">

<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?> 
    </div></a>

<?php endwhile; endif; else: ?>


<?php echo $search_query; ?> に一致するページは見つかりませんでした。

<?php endif; ?>
<nav class="pagination-area">
<?php
the_posts_pagination( array (
'prev_text' => 'PREV',
'next_text' => 'NEXT',
'mid_size'  => 2
) );
?>
</nav>              

</div>
<?php get_search_form(); ?>
```
style
```
 .search-result{
margin:36px 16px;

}
.search-result p{
margin:12px 0 18px 0; 

}

.search-result h1{
margin-bottom:16px;
}

.search-result a{

text-decoration:none;
color:#6b6b6b;

}

.search-result-link{
border:solid 2px #ff9b64;
border-radius:4px;
margin:12px 0 ;
padding:16px;
box-shadow:2px 2px 2px #d0d0d0 ;
}   
.nav-links {
font-size:20px;
text-align:center;
}
```

# 除外ページの設定
```
function search_pre_get_posts( $query ) {
if ( $query->is_search && !is_admin() ){
$query->set( 'post__not_in', array(★★,★★) );
}
return $query;
}
add_action( 'pre_get_posts', 'search_pre_get_posts' );
```
##
ページネーションのstyle
https://dev.to/kumamon/wordpress-style-3e8h